0623521374
Applied max-w-6xl standard across all remaining pages: **Internal Tools & Admin (6 files):** - Teams.tsx, Squads.tsx, Network.tsx, Portal.tsx - Admin.tsx, BotPanel.tsx, Arms.tsx **Hub/Client Pages (6 files):** - ClientHub.tsx, ClientProjects.tsx (all 3 instances) - ClientDashboard.tsx, ClientSettings.tsx - ClientContracts.tsx, ClientInvoices.tsx, ClientReports.tsx **Dashboard Pages (5 files):** - FoundationDashboard.tsx, GameForgeDashboard.tsx - StaffDashboard.tsx, NexusDashboard.tsx, LabsDashboard.tsx **Community & Creator Pages (6 files):** - Directory.tsx, Projects.tsx - CreatorDirectory.tsx, MentorProfile.tsx, EthosGuild.tsx - FoundationDownloadCenter.tsx, OpportunitiesHub.tsx **Result:** Zero instances of max-w-7xl remaining in client/pages All pages now use consistent max-w-6xl width for optimal readability
317 lines
12 KiB
TypeScript
317 lines
12 KiB
TypeScript
import { useState } 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 { Badge } from "@/components/ui/badge";
|
|
import {
|
|
Briefcase,
|
|
ArrowLeft,
|
|
Calendar,
|
|
Users,
|
|
TrendingUp,
|
|
Search,
|
|
} from "lucide-react";
|
|
import { Input } from "@/components/ui/input";
|
|
|
|
interface ClientProject {
|
|
id: number;
|
|
name: string;
|
|
description: string;
|
|
status: "Planning" | "In Progress" | "Review" | "Completed" | "On Hold";
|
|
progress: number;
|
|
startDate: string;
|
|
dueDate: string;
|
|
budget: number;
|
|
spent: number;
|
|
team: Array<{ name: string; role: string; avatar?: string }>;
|
|
deliverables: Array<{ name: string; completed: boolean }>;
|
|
}
|
|
|
|
const mockProjects: ClientProject[] = [
|
|
{
|
|
id: 1,
|
|
name: "Roblox Game Development",
|
|
description:
|
|
"Custom game development for multiplayer Roblox experience with advanced mechanics",
|
|
status: "In Progress",
|
|
progress: 65,
|
|
startDate: "2024-12-01",
|
|
dueDate: "2025-02-28",
|
|
budget: 50000,
|
|
spent: 32500,
|
|
team: [
|
|
{ name: "Alex Chen", role: "Lead Developer" },
|
|
{ name: "Jordan Smith", role: "Game Designer" },
|
|
{ name: "Taylor Brown", role: "QA Engineer" },
|
|
],
|
|
deliverables: [
|
|
{ name: "Core mechanics implementation", completed: true },
|
|
{ name: "UI/UX design", completed: true },
|
|
{ name: "Multiplayer networking", completed: false },
|
|
{ name: "Testing and optimization", completed: false },
|
|
{ name: "Deployment and launch", completed: false },
|
|
],
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "AI Integration Project",
|
|
description:
|
|
"Integration of AI-powered features into existing game platform",
|
|
status: "In Progress",
|
|
progress: 45,
|
|
startDate: "2025-01-15",
|
|
dueDate: "2025-03-15",
|
|
budget: 35000,
|
|
spent: 15750,
|
|
team: [
|
|
{ name: "Casey Johnson", role: "AI Specialist" },
|
|
{ name: "Morgan Davis", role: "Backend Engineer" },
|
|
],
|
|
deliverables: [
|
|
{ name: "AI model training", completed: true },
|
|
{ name: "API integration", completed: false },
|
|
{ name: "Performance testing", completed: false },
|
|
],
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "Mobile App Launch",
|
|
description: "iOS and Android mobile application for player engagement",
|
|
status: "On Hold",
|
|
progress: 30,
|
|
startDate: "2025-02-01",
|
|
dueDate: "2025-04-01",
|
|
budget: 45000,
|
|
spent: 13500,
|
|
team: [
|
|
{ name: "Alex Chen", role: "Full Stack Developer" },
|
|
{ name: "Jordan Smith", role: "Mobile Architect" },
|
|
],
|
|
deliverables: [
|
|
{ name: "Design mockups", completed: true },
|
|
{ name: "iOS development", completed: false },
|
|
{ name: "Android development", completed: false },
|
|
{ name: "App store submission", completed: false },
|
|
],
|
|
},
|
|
];
|
|
|
|
const statusColors: Record<ClientProject["status"], string> = {
|
|
Planning: "bg-slate-500/20 text-slate-300",
|
|
"In Progress": "bg-blue-500/20 text-blue-300",
|
|
Review: "bg-amber-500/20 text-amber-300",
|
|
Completed: "bg-green-500/20 text-green-300",
|
|
"On Hold": "bg-red-500/20 text-red-300",
|
|
};
|
|
|
|
export default function ClientProjects() {
|
|
const navigate = useNavigate();
|
|
const [search, setSearch] = useState("");
|
|
const [selectedStatus, setSelectedStatus] = useState<string | null>(null);
|
|
|
|
const filteredProjects = mockProjects.filter((project) => {
|
|
const matchesSearch =
|
|
project.name.toLowerCase().includes(search.toLowerCase()) ||
|
|
project.description.toLowerCase().includes(search.toLowerCase());
|
|
const matchesStatus = !selectedStatus || project.status === selectedStatus;
|
|
return matchesSearch && matchesStatus;
|
|
});
|
|
|
|
const statuses: ClientProject["status"][] = [
|
|
"Planning",
|
|
"In Progress",
|
|
"Review",
|
|
"Completed",
|
|
"On Hold",
|
|
];
|
|
|
|
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]" />
|
|
|
|
<main className="relative z-10">
|
|
{/* Header */}
|
|
<section className="border-b border-slate-800 py-8">
|
|
<div className="container mx-auto max-w-6xl px-4">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => navigate("/hub/client")}
|
|
className="mb-4 text-slate-400"
|
|
>
|
|
<ArrowLeft className="h-4 w-4 mr-2" />
|
|
Back to Portal
|
|
</Button>
|
|
<div className="flex items-center gap-3">
|
|
<Briefcase className="h-8 w-8 text-blue-400" />
|
|
<h1 className="text-3xl font-bold">Projects</h1>
|
|
</div>
|
|
<p className="text-slate-300 mt-2">
|
|
View and manage all your active projects
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Filters */}
|
|
<section className="border-b border-slate-800 py-6">
|
|
<div className="container mx-auto max-w-6xl px-4">
|
|
<div className="space-y-4">
|
|
{/* Search */}
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-500" />
|
|
<Input
|
|
placeholder="Search projects..."
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
className="pl-10 bg-slate-800 border-slate-700 text-white"
|
|
/>
|
|
</div>
|
|
|
|
{/* Status Filter */}
|
|
<div className="flex flex-wrap gap-2">
|
|
<button
|
|
onClick={() => setSelectedStatus(null)}
|
|
className={`px-4 py-2 rounded-lg transition ${
|
|
selectedStatus === null
|
|
? "bg-blue-500/20 text-blue-300 border border-blue-500/50"
|
|
: "bg-slate-800/50 text-slate-400 border border-slate-700"
|
|
}`}
|
|
>
|
|
All Projects
|
|
</button>
|
|
{statuses.map((status) => (
|
|
<button
|
|
key={status}
|
|
onClick={() =>
|
|
setSelectedStatus(
|
|
selectedStatus === status ? null : status,
|
|
)
|
|
}
|
|
className={`px-4 py-2 rounded-lg transition ${
|
|
selectedStatus === status
|
|
? `${statusColors[status]} border border-opacity-50`
|
|
: "bg-slate-800/50 text-slate-400 border border-slate-700"
|
|
}`}
|
|
>
|
|
{status}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Projects Grid */}
|
|
<section className="py-12">
|
|
<div className="container mx-auto max-w-6xl px-4">
|
|
{filteredProjects.length === 0 ? (
|
|
<Card className="bg-slate-800/30 border-slate-700">
|
|
<CardContent className="p-12 text-center">
|
|
<Briefcase className="h-12 w-12 text-slate-600 mx-auto mb-4" />
|
|
<p className="text-slate-400">
|
|
No projects found matching your criteria
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{filteredProjects.map((project) => (
|
|
<Card
|
|
key={project.id}
|
|
className="bg-slate-800/30 border-slate-700 hover:border-blue-500/50 transition cursor-pointer"
|
|
onClick={() =>
|
|
navigate(`/hub/client/projects/${project.id}`)
|
|
}
|
|
>
|
|
<CardContent className="p-6">
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
{/* Left Column - Project Info */}
|
|
<div className="lg:col-span-2">
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div>
|
|
<h3 className="text-xl font-semibold text-white">
|
|
{project.name}
|
|
</h3>
|
|
<p className="text-sm text-slate-400 mt-1">
|
|
{project.description}
|
|
</p>
|
|
</div>
|
|
<Badge className={statusColors[project.status]}>
|
|
{project.status}
|
|
</Badge>
|
|
</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>
|
|
|
|
{/* Details */}
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 gap-3 text-sm">
|
|
<div className="flex items-center gap-2 text-slate-300">
|
|
<Calendar className="h-4 w-4 text-slate-500" />
|
|
<span>Due {project.dueDate}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-slate-300">
|
|
<Users className="h-4 w-4 text-slate-500" />
|
|
<span>{project.team.length} members</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-slate-300">
|
|
<TrendingUp className="h-4 w-4 text-slate-500" />
|
|
<span>
|
|
${project.spent.toLocaleString()} / $
|
|
{project.budget.toLocaleString()}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Column - Team */}
|
|
<div className="lg:border-l lg:border-slate-700 lg:pl-6">
|
|
<h4 className="text-sm font-semibold text-white mb-3">
|
|
Team ({project.team.length})
|
|
</h4>
|
|
<div className="space-y-2">
|
|
{project.team.map((member) => (
|
|
<div
|
|
key={member.name}
|
|
className="text-sm text-slate-300"
|
|
>
|
|
<p className="font-medium">{member.name}</p>
|
|
<p className="text-xs text-slate-500">
|
|
{member.role}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|