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,
|
ArrowRight,
|
||||||
MessageSquare,
|
MessageSquare,
|
||||||
Phone,
|
Phone,
|
||||||
|
Briefcase,
|
||||||
|
ArrowDown,
|
||||||
|
MapPin,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
|
|
||||||
const API_BASE = import.meta.env.VITE_API_BASE || "";
|
const API_BASE = import.meta.env.VITE_API_BASE || "";
|
||||||
|
|
@ -36,8 +39,9 @@ export default function ClientHub() {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const { user, loading: authLoading } = useAuth();
|
const { user, loading: authLoading } = useAuth();
|
||||||
const [activeTab, setActiveTab] = useState("overview");
|
const [activeTab, setActiveTab] = useState("overview");
|
||||||
const [opportunities, setOpportunities] = useState<any[]>([]);
|
|
||||||
const [contracts, setContracts] = useState<any[]>([]);
|
const [contracts, setContracts] = useState<any[]>([]);
|
||||||
|
const [invoices, setInvoices] = useState<any[]>([]);
|
||||||
|
const [teamMembers, setTeamMembers] = useState<any[]>([]);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
@ -53,32 +57,45 @@ export default function ClientHub() {
|
||||||
const token = session?.access_token;
|
const token = session?.access_token;
|
||||||
if (!token) throw new Error("No auth token");
|
if (!token) throw new Error("No auth token");
|
||||||
|
|
||||||
// Load opportunities
|
// Load contracts for milestone tracking
|
||||||
const oppRes = await fetch(`${API_BASE}/api/nexus/client/opportunities`, {
|
const contractRes = await fetch(`${API_BASE}/api/corp/contracts?limit=10`, {
|
||||||
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`, {
|
|
||||||
headers: { Authorization: `Bearer ${token}` },
|
headers: { Authorization: `Bearer ${token}` },
|
||||||
});
|
});
|
||||||
if (contractRes.ok) {
|
if (contractRes.ok) {
|
||||||
const data = await contractRes.json();
|
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) {
|
} 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 {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
if (authLoading || loading) {
|
if (authLoading || loading) {
|
||||||
return <LoadingScreen message="Loading Client Hub..." />;
|
return <LoadingScreen message="Loading CORP Dashboard..." />;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!user) {
|
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="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">
|
<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">
|
<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>
|
</h1>
|
||||||
<p className="text-gray-400">Enterprise collaboration & hiring</p>
|
<p className="text-gray-400">Enterprise solutions for your business</p>
|
||||||
<Button
|
<Button
|
||||||
onClick={() => navigate("/login")}
|
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"
|
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 activeContract = contracts.find(c => c.status === "active");
|
||||||
const totalSpent = contracts.reduce((sum: number, c: any) => sum + (c.total_amount || 0), 0);
|
const completedMilestones = activeContract?.milestones?.filter((m: any) => m.status === "completed").length || 0;
|
||||||
const activeContracts = contracts.filter((c: any) => c.status === "active");
|
const totalMilestones = activeContract?.milestones?.length || 0;
|
||||||
const pendingApplications = openOpportunities.reduce((sum: number, o: any) => sum + (o.application_count || 0), 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 (
|
return (
|
||||||
<Layout>
|
<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="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
||||||
<div className="space-y-2">
|
<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">
|
<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>
|
</h1>
|
||||||
<p className="text-gray-400 text-lg">
|
<p className="text-gray-400 text-lg">
|
||||||
Enterprise hiring & project management
|
Enterprise solutions, project status, and billing management
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
{/* Quick Stats */}
|
{/* 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">
|
<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">
|
<div className="flex items-center justify-between">
|
||||||
<p className="text-sm text-gray-400">Open Opportunities</p>
|
<div>
|
||||||
<FileText className="h-5 w-5 text-blue-500" />
|
<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>
|
</div>
|
||||||
<p className="text-3xl font-bold text-white">{openOpportunities.length}</p>
|
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Card className="bg-gradient-to-br from-cyan-950/40 to-cyan-900/20 border-cyan-500/20">
|
<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">
|
<div className="flex items-center justify-between">
|
||||||
<p className="text-sm text-gray-400">Applications</p>
|
<div>
|
||||||
<Users className="h-5 w-5 text-cyan-500" />
|
<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>
|
</div>
|
||||||
<p className="text-3xl font-bold text-white">{pendingApplications}</p>
|
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Card className="bg-gradient-to-br from-teal-950/40 to-teal-900/20 border-teal-500/20">
|
<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-6 space-y-2">
|
<CardContent className="p-4">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<p className="text-sm text-gray-400">Active Contracts</p>
|
<div>
|
||||||
<CheckCircle className="h-5 w-5 text-teal-500" />
|
<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>
|
</div>
|
||||||
<p className="text-3xl font-bold text-white">{activeContracts.length}</p>
|
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Card className="bg-gradient-to-br from-green-950/40 to-green-900/20 border-green-500/20">
|
<Card className="bg-gradient-to-br from-purple-950/40 to-purple-900/20 border-purple-500/20">
|
||||||
<CardContent className="p-6 space-y-2">
|
<CardContent className="p-4">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<p className="text-sm text-gray-400">Total Spent</p>
|
<div>
|
||||||
<DollarSign className="h-5 w-5 text-green-500" />
|
<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>
|
</div>
|
||||||
<p className="text-3xl font-bold text-white">
|
|
||||||
${totalSpent.toLocaleString('en-US', { maximumFractionDigits: 0 })}
|
|
||||||
</p>
|
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -183,217 +203,292 @@ export default function ClientHub() {
|
||||||
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
|
<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">
|
<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="overview">Overview</TabsTrigger>
|
||||||
<TabsTrigger value="opportunities">Opportunities</TabsTrigger>
|
<TabsTrigger value="project">Project Status</TabsTrigger>
|
||||||
<TabsTrigger value="contracts">Contracts</TabsTrigger>
|
<TabsTrigger value="invoices">Invoices & Billing</TabsTrigger>
|
||||||
<TabsTrigger value="support">Support</TabsTrigger>
|
<TabsTrigger value="team">My AeThex Team</TabsTrigger>
|
||||||
</TabsList>
|
</TabsList>
|
||||||
|
|
||||||
{/* Overview Tab */}
|
{/* Overview Tab */}
|
||||||
<TabsContent value="overview" className="space-y-6 animate-fade-in">
|
<TabsContent value="overview" className="space-y-6 animate-fade-in">
|
||||||
{/* Account Manager Card */}
|
{/* QuantumLeap Dashboard */}
|
||||||
<Card className="bg-gradient-to-br from-blue-950/40 to-blue-900/20 border-blue-500/30">
|
<Card className="bg-gradient-to-br from-blue-950/40 to-blue-900/20 border-blue-500/20">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle className="flex items-center gap-2">
|
<CardTitle>My QuantumLeap Dashboard</CardTitle>
|
||||||
<Users className="h-5 w-5 text-blue-500" />
|
<CardDescription>Live AI analytics and insights for your project</CardDescription>
|
||||||
Your AeThex Team
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="space-y-4">
|
<CardContent>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
<div className="aspect-video bg-black/50 rounded-lg border border-blue-500/20 flex items-center justify-center">
|
||||||
{/* Account Manager */}
|
<iframe
|
||||||
<div className="p-4 bg-black/30 rounded-lg border border-blue-500/10">
|
src="https://quantumleap.aethex.dev/embed"
|
||||||
<p className="text-xs text-gray-400 uppercase tracking-wider mb-3">Account Manager</p>
|
className="w-full h-full rounded-lg border-0"
|
||||||
<div className="flex items-center gap-3">
|
title="QuantumLeap Analytics"
|
||||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center">
|
sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
|
<p className="text-sm text-gray-400 mt-4">
|
||||||
|
Embedded QuantumLeap analytics dashboard. Real-time data about your project performance.
|
||||||
|
</p>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
{/* Recent Activity */}
|
{/* Active Contract Overview */}
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
{activeContract ? (
|
||||||
{/* 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 */}
|
|
||||||
<Card className="bg-gradient-to-br from-cyan-950/40 to-cyan-900/20 border-cyan-500/20">
|
<Card className="bg-gradient-to-br from-cyan-950/40 to-cyan-900/20 border-cyan-500/20">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle>Active Contracts</CardTitle>
|
<CardTitle>Project: {activeContract.title}</CardTitle>
|
||||||
<CardDescription>Your current projects</CardDescription>
|
<CardDescription>Main engagement overview</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent className="space-y-4">
|
||||||
{contracts.length === 0 ? (
|
<div className="grid grid-cols-3 gap-4">
|
||||||
<div className="text-center py-8 space-y-4">
|
<div className="space-y-1">
|
||||||
<AlertCircle className="h-12 w-12 mx-auto text-gray-500 opacity-50" />
|
<p className="text-xs text-gray-400 uppercase">Total Value</p>
|
||||||
<p className="text-gray-400">No active contracts</p>
|
<p className="text-2xl font-bold text-white">${(activeContract.total_value / 1000).toFixed(0)}k</p>
|
||||||
</div>
|
</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">
|
<div className="space-y-3">
|
||||||
{contracts.slice(0, 3).map((contract: any) => (
|
<h4 className="font-semibold text-white">Phases & Milestones</h4>
|
||||||
<div key={contract.id} className="p-3 bg-black/30 rounded-lg border border-cyan-500/10 hover:border-cyan-500/30 transition">
|
{activeContract.milestones?.map((milestone: any, idx: number) => (
|
||||||
<div className="flex items-start justify-between gap-2 mb-2">
|
<div key={milestone.id} className="space-y-2">
|
||||||
<p className="font-semibold text-white text-sm">{contract.title}</p>
|
<div className="flex items-center justify-between">
|
||||||
<Badge className="text-xs bg-green-600/50 text-green-100">{contract.status}</Badge>
|
<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>
|
</div>
|
||||||
<p className="text-xs text-gray-400">${contract.total_amount?.toLocaleString()}</p>
|
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</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>
|
</div>
|
||||||
)}
|
)}
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|
||||||
{/* Contracts Tab */}
|
{/* Invoices & Billing Tab */}
|
||||||
<TabsContent value="contracts" className="space-y-4 animate-fade-in">
|
<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">
|
<Card className="bg-gradient-to-br from-cyan-950/40 to-cyan-900/20 border-cyan-500/20">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle>Contracts & Invoices</CardTitle>
|
<CardTitle>Invoices & Billing</CardTitle>
|
||||||
<CardDescription>Payment history and status</CardDescription>
|
<CardDescription>Secure portal to manage all invoices and payments</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent className="space-y-6">
|
||||||
{contracts.length === 0 ? (
|
{/* 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">
|
<div className="text-center py-12">
|
||||||
<FileText className="h-12 w-12 mx-auto text-gray-500 opacity-50 mb-4" />
|
<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>
|
||||||
) : (
|
) : (
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
{contracts.map((contract: any) => (
|
{invoices.map((invoice: any) => (
|
||||||
<div key={contract.id} className="p-4 bg-black/30 rounded-lg border border-cyan-500/10 space-y-3">
|
<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 gap-4">
|
<div className="flex items-start justify-between">
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<h4 className="font-semibold text-white">{contract.title}</h4>
|
<h4 className="font-semibold text-white">{invoice.invoice_number}</h4>
|
||||||
<p className="text-sm text-gray-400">Contract Type: {contract.contract_type}</p>
|
<p className="text-sm text-gray-400">{invoice.description}</p>
|
||||||
</div>
|
</div>
|
||||||
<Badge className="bg-green-600/50 text-green-100">{contract.status}</Badge>
|
<div className="text-right">
|
||||||
</div>
|
<p className="text-lg font-semibold text-white">${invoice.amount?.toLocaleString()}</p>
|
||||||
<div className="grid grid-cols-3 gap-2 text-xs">
|
<Badge className={
|
||||||
<div>
|
invoice.status === "paid"
|
||||||
<p className="text-gray-400">Total Amount</p>
|
? "bg-green-500/20 border-green-500/30 text-green-300"
|
||||||
<p className="font-semibold text-white">${contract.total_amount?.toLocaleString()}</p>
|
: invoice.status === "overdue"
|
||||||
</div>
|
? "bg-red-500/20 border-red-500/30 text-red-300"
|
||||||
<div>
|
: "bg-yellow-500/20 border-yellow-500/30 text-yellow-300"
|
||||||
<p className="text-gray-400">Your Cost</p>
|
}>
|
||||||
<p className="font-semibold text-white">${(contract.total_amount - (contract.aethex_commission_amount || 0))?.toLocaleString()}</p>
|
{invoice.status}
|
||||||
</div>
|
</Badge>
|
||||||
<div>
|
|
||||||
<p className="text-gray-400">Creator Payout</p>
|
|
||||||
<p className="font-semibold text-white">${contract.creator_payout_amount?.toLocaleString()}</p>
|
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -402,61 +497,131 @@ export default function ClientHub() {
|
||||||
</Card>
|
</Card>
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|
||||||
{/* Support Tab */}
|
{/* My AeThex Team Tab */}
|
||||||
<TabsContent value="support" className="space-y-4 animate-fade-in">
|
<TabsContent value="team" 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">
|
<Card className="bg-gradient-to-br from-purple-950/40 to-purple-900/20 border-purple-500/20">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle>Support & Resources</CardTitle>
|
<CardTitle>Your Dedicated AeThex Team</CardTitle>
|
||||||
|
<CardDescription>White-glove service with personalized support</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="space-y-3">
|
<CardContent>
|
||||||
<Button
|
<div className="space-y-6">
|
||||||
variant="outline"
|
{/* Account Manager */}
|
||||||
className="w-full justify-start border-blue-500/30 text-blue-300 hover:bg-blue-500/10 h-auto py-3"
|
{accountManager ? (
|
||||||
>
|
<div className="p-6 bg-black/30 rounded-lg border border-blue-500/20 space-y-4">
|
||||||
<MessageSquare className="h-4 w-4 mr-3" />
|
<div className="flex items-start gap-4">
|
||||||
<div className="text-left">
|
<img
|
||||||
<div className="font-semibold">Chat Support</div>
|
src={accountManager.avatar_url || "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop"}
|
||||||
<div className="text-xs text-gray-400">Talk to our support team</div>
|
alt={accountManager.full_name}
|
||||||
</div>
|
className="w-16 h-16 rounded-full border-2 border-blue-500/40 object-cover"
|
||||||
</Button>
|
/>
|
||||||
|
<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
|
{/* Solutions Architect */}
|
||||||
variant="outline"
|
{solutionsArchitect ? (
|
||||||
className="w-full justify-start border-blue-500/30 text-blue-300 hover:bg-blue-500/10 h-auto py-3"
|
<div className="p-6 bg-black/30 rounded-lg border border-purple-500/20 space-y-4">
|
||||||
>
|
<div className="flex items-start gap-4">
|
||||||
<Phone className="h-4 w-4 mr-3" />
|
<img
|
||||||
<div className="text-left">
|
src={solutionsArchitect.avatar_url || "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop"}
|
||||||
<div className="font-semibold">Schedule a Call</div>
|
alt={solutionsArchitect.full_name}
|
||||||
<div className="text-xs text-gray-400">Book time with your account manager</div>
|
className="w-16 h-16 rounded-full border-2 border-purple-500/40 object-cover"
|
||||||
</div>
|
/>
|
||||||
</Button>
|
<div className="flex-1">
|
||||||
|
<Badge className="bg-purple-600/50 text-purple-100 mb-2">Solutions Architect</Badge>
|
||||||
<Button
|
<h3 className="text-lg font-semibold text-white">{solutionsArchitect.full_name}</h3>
|
||||||
variant="outline"
|
<p className="text-sm text-gray-400 mb-2">{solutionsArchitect.title}</p>
|
||||||
className="w-full justify-start border-blue-500/30 text-blue-300 hover:bg-blue-500/10 h-auto py-3"
|
<p className="text-sm text-gray-300 mb-4">{solutionsArchitect.bio}</p>
|
||||||
>
|
<div className="flex gap-2">
|
||||||
<FileText className="h-4 w-4 mr-3" />
|
<Button size="sm" variant="outline" className="border-purple-500/30 text-purple-300 hover:bg-purple-500/10">
|
||||||
<div className="text-left">
|
<MessageSquare className="h-4 w-4 mr-2" />
|
||||||
<div className="font-semibold">Documentation</div>
|
Message
|
||||||
<div className="text-xs text-gray-400">Learn how to use the platform</div>
|
</Button>
|
||||||
</div>
|
<Button size="sm" variant="outline" className="border-purple-500/30 text-purple-300 hover:bg-purple-500/10">
|
||||||
</Button>
|
<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>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
{/* Request New SOW */}
|
{/* Quick Support Card */}
|
||||||
<Card className="bg-gradient-to-br from-cyan-950/40 to-cyan-900/20 border-cyan-500/30">
|
<Card className="bg-gradient-to-br from-cyan-950/40 to-cyan-900/20 border-cyan-500/20">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle>Request New Scope</CardTitle>
|
<CardTitle>Need Support?</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent className="space-y-3">
|
||||||
<p className="text-gray-300 mb-4">
|
<Button className="w-full bg-cyan-600 hover:bg-cyan-700">
|
||||||
Need a new Statement of Work (SOW) or to modify an existing contract? Contact your account manager.
|
<MessageSquare className="h-4 w-4 mr-2" />
|
||||||
</p>
|
Open Support Ticket
|
||||||
<Button
|
</Button>
|
||||||
className="w-full bg-gradient-to-r from-cyan-600 to-teal-600 hover:from-cyan-700 hover:to-teal-700"
|
<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" />
|
||||||
Request New SOW
|
Schedule Support Call
|
||||||
</Button>
|
</Button>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue