263 lines
11 KiB
TypeScript
263 lines
11 KiB
TypeScript
import { useEffect } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import Layout from "@/components/Layout";
|
|
import SEO from "@/components/SEO";
|
|
import { useAuth } from "@/contexts/AuthContext";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Lock, Users, FileText, Zap, Award, MessageSquare } from "lucide-react";
|
|
|
|
export default function Staff() {
|
|
const { user, loading } = useAuth();
|
|
const navigate = useNavigate();
|
|
|
|
useEffect(() => {
|
|
if (!loading && user) {
|
|
navigate("/staff/dashboard", { replace: true });
|
|
}
|
|
}, [user, loading, navigate]);
|
|
|
|
return (
|
|
<Layout>
|
|
<SEO
|
|
title="AeThex Staff"
|
|
description="Internal platform for AeThex employees and authorized contractors"
|
|
/>
|
|
|
|
<div className="min-h-screen bg-gradient-to-br from-slate-950 via-purple-950 to-slate-950 relative overflow-hidden">
|
|
{/* Animated background */}
|
|
<div className="absolute inset-0 opacity-30">
|
|
<div className="absolute top-20 left-10 w-96 h-96 bg-purple-600 rounded-full mix-blend-multiply filter blur-3xl animate-pulse" />
|
|
<div className="absolute bottom-20 right-10 w-96 h-96 bg-blue-600 rounded-full mix-blend-multiply filter blur-3xl animate-pulse" />
|
|
<div className="absolute top-1/2 left-1/2 w-96 h-96 bg-indigo-600 rounded-full mix-blend-multiply filter blur-3xl animate-pulse" />
|
|
</div>
|
|
|
|
<div className="relative">
|
|
{/* Hero Section */}
|
|
<div className="container mx-auto px-4 py-20 text-center">
|
|
<Badge className="mb-4 inline-block bg-purple-500/20 text-purple-300 border-purple-500/50">
|
|
Internal Platform
|
|
</Badge>
|
|
|
|
<h1 className="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent">
|
|
AeThex Staff
|
|
</h1>
|
|
|
|
<p className="text-xl text-purple-200/80 max-w-2xl mx-auto mb-12">
|
|
The internal hub for AeThex employees and authorized contractors.
|
|
Unified access to dashboards, tools, documentation, and
|
|
collaboration features.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<Button
|
|
size="lg"
|
|
onClick={() => navigate("/staff/login")}
|
|
className="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700"
|
|
>
|
|
<Lock className="mr-2 h-5 w-5" />
|
|
Staff Login
|
|
</Button>
|
|
<Button
|
|
size="lg"
|
|
variant="outline"
|
|
onClick={() => navigate("/dashboard")}
|
|
className="border-purple-500/50 text-purple-300 hover:bg-purple-500/10"
|
|
>
|
|
Back to AeThex
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Features Grid */}
|
|
<div className="container mx-auto px-4 py-20">
|
|
<h2 className="text-3xl font-bold text-center mb-12 text-purple-100">
|
|
Staff Tools & Features
|
|
</h2>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{/* Dashboard */}
|
|
<Card className="border-purple-500/30 bg-purple-950/30 backdrop-blur hover:border-purple-400/50 transition-colors">
|
|
<CardHeader>
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<div className="p-2 rounded bg-purple-500/20">
|
|
<Zap className="h-5 w-5 text-purple-400" />
|
|
</div>
|
|
<CardTitle className="text-purple-100">Dashboard</CardTitle>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<CardDescription className="text-purple-200/70">
|
|
Real-time operations metrics, service status, and quick
|
|
access to common tools.
|
|
</CardDescription>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Directory */}
|
|
<Card className="border-blue-500/30 bg-blue-950/30 backdrop-blur hover:border-blue-400/50 transition-colors">
|
|
<CardHeader>
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<div className="p-2 rounded bg-blue-500/20">
|
|
<Users className="h-5 w-5 text-blue-400" />
|
|
</div>
|
|
<CardTitle className="text-blue-100">Directory</CardTitle>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<CardDescription className="text-blue-200/70">
|
|
Browse team members, view profiles, and find contact
|
|
information.
|
|
</CardDescription>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Admin Tools */}
|
|
<Card className="border-indigo-500/30 bg-indigo-950/30 backdrop-blur hover:border-indigo-400/50 transition-colors">
|
|
<CardHeader>
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<div className="p-2 rounded bg-indigo-500/20">
|
|
<Lock className="h-5 w-5 text-indigo-400" />
|
|
</div>
|
|
<CardTitle className="text-indigo-100">
|
|
Admin Tools
|
|
</CardTitle>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<CardDescription className="text-indigo-200/70">
|
|
Manage users, roles, permissions, and platform
|
|
configuration.
|
|
</CardDescription>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Docs */}
|
|
<Card className="border-cyan-500/30 bg-cyan-950/30 backdrop-blur hover:border-cyan-400/50 transition-colors">
|
|
<CardHeader>
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<div className="p-2 rounded bg-cyan-500/20">
|
|
<FileText className="h-5 w-5 text-cyan-400" />
|
|
</div>
|
|
<CardTitle className="text-cyan-100">Docs & API</CardTitle>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<CardDescription className="text-cyan-200/70">
|
|
Internal documentation, API keys, credentials, and setup
|
|
guides.
|
|
</CardDescription>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Achievements */}
|
|
<Card className="border-amber-500/30 bg-amber-950/30 backdrop-blur hover:border-amber-400/50 transition-colors">
|
|
<CardHeader>
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<div className="p-2 rounded bg-amber-500/20">
|
|
<Award className="h-5 w-5 text-amber-400" />
|
|
</div>
|
|
<CardTitle className="text-amber-100">
|
|
Achievements
|
|
</CardTitle>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<CardDescription className="text-amber-200/70">
|
|
Track team accomplishments, milestones, and performance
|
|
metrics.
|
|
</CardDescription>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Collaboration */}
|
|
<Card className="border-rose-500/30 bg-rose-950/30 backdrop-blur hover:border-rose-400/50 transition-colors">
|
|
<CardHeader>
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<div className="p-2 rounded bg-rose-500/20">
|
|
<MessageSquare className="h-5 w-5 text-rose-400" />
|
|
</div>
|
|
<CardTitle className="text-rose-100">
|
|
Collaboration
|
|
</CardTitle>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<CardDescription className="text-rose-200/70">
|
|
Internal chat, team discussions, and project coordination.
|
|
</CardDescription>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Info Section */}
|
|
<div className="container mx-auto px-4 py-20 border-t border-purple-500/20">
|
|
<div className="grid md:grid-cols-2 gap-12">
|
|
<div>
|
|
<h3 className="text-2xl font-bold mb-4 text-purple-100">
|
|
Who Can Access?
|
|
</h3>
|
|
<ul className="space-y-3 text-purple-200/80">
|
|
<li className="flex gap-2">
|
|
<span className="text-purple-400">✓</span>
|
|
<span>AeThex employees (@aethex.dev)</span>
|
|
</li>
|
|
<li className="flex gap-2">
|
|
<span className="text-purple-400">✓</span>
|
|
<span>Authorized contractors (invited)</span>
|
|
</li>
|
|
<li className="flex gap-2">
|
|
<span className="text-purple-400">✓</span>
|
|
<span>Partners with special access</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="text-2xl font-bold mb-4 text-purple-100">
|
|
Getting Started
|
|
</h3>
|
|
<ol className="space-y-3 text-purple-200/80">
|
|
<li className="flex gap-2">
|
|
<span className="text-purple-400">1.</span>
|
|
<span>Click "Staff Login" to sign in with Google</span>
|
|
</li>
|
|
<li className="flex gap-2">
|
|
<span className="text-purple-400">2.</span>
|
|
<span>Use your @aethex.dev email address</span>
|
|
</li>
|
|
<li className="flex gap-2">
|
|
<span className="text-purple-400">3.</span>
|
|
<span>Access your personalized dashboard</span>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer CTA */}
|
|
<div className="container mx-auto px-4 py-12 text-center border-t border-purple-500/20">
|
|
<p className="text-purple-300 mb-6">
|
|
Not a staff member? Visit the public platform.
|
|
</p>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => navigate("/")}
|
|
className="border-purple-500/50 text-purple-300 hover:bg-purple-500/10"
|
|
>
|
|
Back to Main Site
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|