AeThex-Corporation/aethex-forge
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Create CORP Client Hub landing page

Browse source 
cgen-bba3ae86a0774846bdc466d386c519e9
This commit is contained in:
Builder.io 2025-11-12 04:53:02 +00:00
parent 6ea62e629d
commit cd629d7db4
1 changed files with 377 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

377
client/pages/hub/ClientHub.tsx Normal file
View file

@ -0,0 +1,377 @@
import { useState, useEffect } from "react";
import Layout from "@/components/Layout";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { useNavigate } from "react-router-dom";
import { useAuth } from "@/contexts/AuthContext";
import {
FileText,
Briefcase,
Clock,
AlertCircle,
TrendingUp,
BarChart3,
Settings,
LogOut,
} from "lucide-react";
import { Badge } from "@/components/ui/badge";
export default function ClientHub() {
const navigate = useNavigate();
const { user, signOut } = useAuth();
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
// Simulate loading
const timer = setTimeout(() => {
setIsLoading(false);
}, 500);
return () => clearTimeout(timer);
}, []);
if (!user) {
return (
<Layout>
<div className="min-h-screen bg-black text-white flex items-center justify-center">
<Card className="bg-slate-900 border-slate-700 w-full max-w-md">
<CardHeader>
<CardTitle>Client Portal Access Required</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<p className="text-slate-300">
You must be signed in to access the Client Hub.
</p>
<div className="flex gap-2">
<Button
onClick={() => navigate("/login")}
className="flex-1 bg-blue-600 hover:bg-blue-700"
>
Sign In
</Button>
<Button
variant="outline"
onClick={() => navigate("/corp")}
className="flex-1"
>
Back to Corp
</Button>
</div>
</CardContent>
</Card>
</div>
</Layout>
);
}
// Mock data for demonstration
const stats = [
{
label: "Active Projects",
value: "3",
icon: Briefcase,
color: "bg-blue-500/10 text-blue-400",
},
{
label: "Pending Invoices",
value: "$24,500",
icon: FileText,
color: "bg-amber-500/10 text-amber-400",
},
{
label: "Active Contracts",
value: "5",
icon: FileText,
color: "bg-green-500/10 text-green-400",
},
{
label: "Support Tickets",
value: "2",
icon: AlertCircle,
color: "bg-red-500/10 text-red-400",
},
];
const recentProjects = [
{
id: 1,
name: "Roblox Game Development",
status: "In Progress",
progress: 65,
dueDate: "2025-02-28",
team: ["Alex Chen", "Jordan Smith"],
},
{
id: 2,
name: "AI Integration Project",
status: "In Progress",
progress: 45,
dueDate: "2025-03-15",
team: ["Taylor Brown", "Casey Johnson"],
},
{
id: 3,
name: "Mobile App Launch",
status: "On Hold",
progress: 30,
dueDate: "2025-04-01",
team: ["Morgan Davis"],
},
];
const menuItems = [
{
icon: BarChart3,
label: "Dashboard",
path: "/hub/client/dashboard",
description: "Overview of all projects",
},
{
icon: Briefcase,
label: "Projects",
path: "/hub/client/projects",
description: "View and manage projects",
},
{
icon: FileText,
label: "Invoices",
path: "/hub/client/invoices",
description: "Track invoices and payments",
},
{
icon: FileText,
label: "Contracts",
path: "/hub/client/contracts",
description: "Review contracts and agreements",
},
{
icon: TrendingUp,
label: "Reports",
path: "/hub/client/reports",
description: "Project reports and analytics",
},
{
icon: Settings,
label: "Settings",
path: "/hub/client/settings",
description: "Manage account preferences",
},
];
return (
<Layout>
<div className="relative min-h-screen bg-black text-white overflow-hidden pb-12">
{/* Background */}
<div className="pointer-events-none absolute inset-0 opacity-[0.12] [background-image:radial-gradient(circle_at_top,#3b82f6_0,rgba(0,0,0,0.45)_55%,rgba(0,0,0,0.9)_100%)]" />
<div className="pointer-events-none absolute inset-0 bg-[linear-gradient(transparent_0,transparent_calc(100%-1px),rgba(59,130,246,0.05)_calc(100%-1px))] bg-[length:100%_32px]" />
<div className="pointer-events-none absolute top-20 left-10 w-72 h-72 bg-blue-500/20 rounded-full blur-3xl animate-blob" />
<div className="pointer-events-none absolute bottom-20 right-10 w-72 h-72 bg-cyan-600/10 rounded-full blur-3xl animate-blob animation-delay-2000" />
<main className="relative z-10">
{/* Header */}
<section className="border-b border-slate-800 py-8">
<div className="container mx-auto max-w-7xl px-4">
<div className="flex items-center justify-between mb-2">
<h1 className="text-4xl font-bold text-blue-300">
Client Portal
</h1>
<Button
variant="outline"
size="sm"
onClick={() => {
signOut();
navigate("/");
}}
className="border-slate-600 text-slate-300"
>
<LogOut className="h-4 w-4 mr-2" />
Sign Out
</Button>
</div>
<p className="text-slate-300">
Welcome, {user?.email || "Client"}. Manage your projects,
invoices, and agreements.
</p>
</div>
</section>
{/* Quick Stats */}
<section className="py-12 border-b border-slate-800">
<div className="container mx-auto max-w-7xl px-4">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
{stats.map((stat) => {
const Icon = stat.icon;
return (
<Card
key={stat.label}
className="bg-slate-800/30 border-slate-700 hover:border-slate-600 transition"
>
<CardContent className="p-6">
<div className="flex items-start justify-between">
<div>
<p className="text-sm text-slate-400 mb-1">
{stat.label}
</p>
<p className="text-2xl font-bold text-white">
{stat.value}
</p>
</div>
<div className={`p-3 rounded-lg ${stat.color}`}>
<Icon className="h-5 w-5" />
</div>
</div>
</CardContent>
</Card>
);
})}
</div>
</div>
</section>
{/* Main Navigation Grid */}
<section className="py-12">
<div className="container mx-auto max-w-7xl px-4">
<h2 className="text-2xl font-bold mb-6">Quick Access</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{menuItems.map((item) => {
const Icon = item.icon;
return (
<Card
key={item.label}
className="bg-slate-800/30 border-slate-700 hover:border-blue-500/50 hover:bg-slate-800/50 transition cursor-pointer"
onClick={() => navigate(item.path)}
>
<CardContent className="p-6">
<div className="flex items-start gap-4">
<div className="p-3 bg-blue-500/10 rounded-lg">
<Icon className="h-6 w-6 text-blue-400" />
</div>
<div className="flex-1">
<h3 className="font-semibold text-white mb-1">
{item.label}
</h3>
<p className="text-sm text-slate-400">
{item.description}
</p>
</div>
</div>
</CardContent>
</Card>
);
})}
</div>
</div>
</section>
{/* Recent Projects */}
<section className="py-12">
<div className="container mx-auto max-w-7xl px-4">
<div className="flex items-center justify-between mb-6">
<h2 className="text-2xl font-bold">Recent Projects</h2>
<Button
variant="outline"
size="sm"
onClick={() => navigate("/hub/client/projects")}
>
View All →
</Button>
</div>
<div className="space-y-4">
{recentProjects.map((project) => (
<Card
key={project.id}
className="bg-slate-800/30 border-slate-700 hover:border-slate-600 transition"
>
<CardContent className="p-6">
<div className="flex items-start justify-between mb-4">
<div className="flex-1">
<h3 className="font-semibold text-white mb-2">
{project.name}
</h3>
<div className="flex items-center gap-3">
<Badge
className={
project.status === "In Progress"
? "bg-blue-500/20 text-blue-300"
: "bg-amber-500/20 text-amber-300"
}
>
{project.status}
</Badge>
<div className="flex items-center gap-1 text-sm text-slate-400">
<Clock className="h-4 w-4" />
Due {project.dueDate}
</div>
</div>
</div>
</div>
{/* Progress Bar */}
<div className="mb-4">
<div className="flex items-center justify-between mb-2">
<span className="text-sm text-slate-400">
Progress
</span>
<span className="text-sm font-semibold text-white">
{project.progress}%
</span>
</div>
<div className="w-full bg-slate-700/50 rounded-full h-2">
<div
className="bg-blue-500 h-2 rounded-full transition-all"
style={{ width: `${project.progress}%` }}
/>
</div>
</div>
{/* Team */}
<div className="flex items-center justify-between">
<div className="flex gap-2">
{project.team.map((member) => (
<div
key={member}
className="text-xs bg-slate-700/50 text-slate-300 px-2 py-1 rounded"
>
{member}
</div>
))}
</div>
<Button
variant="ghost"
size="sm"
onClick={() => navigate(`/hub/client/projects/${project.id}`)}
>
View Details →
</Button>
</div>
</CardContent>
</Card>
))}
</div>
</div>
</section>
{/* Support Section */}
<section className="py-12 border-t border-slate-800">
<div className="container mx-auto max-w-7xl px-4">
<Card className="bg-slate-800/30 border-slate-700">
<CardHeader>
<CardTitle>Need Help?</CardTitle>
</CardHeader>
<CardContent>
<p className="text-slate-300 mb-4">
Contact our support team for assistance with your projects,
invoices, or any questions about your contracts.
</p>
<div className="flex gap-3">
<Button variant="outline">Email Support</Button>
<Button variant="outline">Schedule Call</Button>
</div>
</CardContent>
</Card>
</div>
</section>
</main>
</div>
</Layout>
);
}