379 lines
13 KiB
TypeScript
379 lines
13 KiB
TypeScript
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>
|
|
);
|
|
}
|