Create Staff internal docs & API keys page
cgen-0b6b7a894685433a863ece4f87f932d6
This commit is contained in:
Builder.io
parent
c85bd04971
commit
10485c230a
1 changed files with 155 additions and 0 deletions
155
client/pages/staff/StaffDocs.tsx
Normal file
155
client/pages/staff/StaffDocs.tsx
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
import { useEffect } from "react";
|
||||
import Layout from "@/components/Layout";
|
||||
import { useAuth } from "@/contexts/AuthContext";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { FileText, Key, Database, Code2, ExternalLink } from "lucide-react";
|
||||
|
||||
export default function StaffDocs() {
|
||||
const { user, loading } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
if (!loading && !user) {
|
||||
navigate("/staff/login");
|
||||
}
|
||||
}, [user, loading, navigate]);
|
||||
|
||||
if (loading) return <Layout><div className="container py-20">Loading...</div></Layout>;
|
||||
|
||||
const docs = [
|
||||
{
|
||||
icon: FileText,
|
||||
title: "Getting Started",
|
||||
description: "Onboarding guide and platform overview",
|
||||
link: "#",
|
||||
},
|
||||
{
|
||||
icon: Code2,
|
||||
title: "API Reference",
|
||||
description: "Complete API documentation and endpoints",
|
||||
link: "#",
|
||||
},
|
||||
{
|
||||
icon: Database,
|
||||
title: "Database Schema",
|
||||
description: "Database structure and relationships",
|
||||
link: "#",
|
||||
},
|
||||
{
|
||||
icon: Key,
|
||||
title: "Authentication",
|
||||
description: "OAuth, tokens, and security guidelines",
|
||||
link: "#",
|
||||
},
|
||||
];
|
||||
|
||||
const apiKeys = [
|
||||
{ name: "Public API Key", key: "pk_aethex_...", status: "active" },
|
||||
{ name: "Secret API Key", key: "sk_aethex_...", status: "active" },
|
||||
{ name: "Webhook Secret", key: "whk_aethex_...", status: "active" },
|
||||
];
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
|
||||
<div className="container mx-auto px-4 py-12">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-4xl font-bold text-white mb-2">Documentation & API</h1>
|
||||
<p className="text-slate-400">Internal docs, API keys, and credentials</p>
|
||||
</div>
|
||||
|
||||
{/* Documentation */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-2xl font-bold text-white mb-6">Documentation</h2>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{docs.map((doc, idx) => {
|
||||
const IconComponent = doc.icon;
|
||||
return (
|
||||
<Card
|
||||
key={idx}
|
||||
className="border-slate-700/50 bg-slate-900/50 backdrop-blur hover:border-slate-600/50 transition-colors cursor-pointer"
|
||||
>
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="p-2 rounded bg-blue-500/20">
|
||||
<IconComponent className="h-5 w-5 text-blue-400" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-white">{doc.title}</CardTitle>
|
||||
<CardDescription className="text-slate-400">
|
||||
{doc.description}
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button variant="ghost" className="text-blue-400 hover:text-blue-300 p-0">
|
||||
Read Docs <ExternalLink className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* API Keys */}
|
||||
<div className="mb-12">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-2xl font-bold text-white">API Keys</h2>
|
||||
<Badge className="bg-yellow-500/20 text-yellow-300 border-yellow-500/50">
|
||||
Keep secure
|
||||
</Badge>
|
||||
</div>
|
||||
<Card className="border-slate-700/50 bg-slate-900/50 backdrop-blur">
|
||||
<CardContent className="p-6">
|
||||
<div className="space-y-4">
|
||||
{apiKeys.map((key, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex items-center justify-between p-4 rounded border border-slate-700/50 bg-slate-800/30"
|
||||
>
|
||||
<div>
|
||||
<p className="text-white font-medium">{key.name}</p>
|
||||
<p className="text-slate-400 text-sm font-mono">{key.key}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Badge className="bg-green-500/20 text-green-300 border-green-500/50 capitalize">
|
||||
{key.status}
|
||||
</Badge>
|
||||
<Button variant="ghost" size="sm" className="text-blue-400 hover:text-blue-300">
|
||||
Copy
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Button className="w-full mt-6 bg-blue-600 hover:bg-blue-700">
|
||||
Generate New Key
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Security Notice */}
|
||||
<Card className="border-red-500/30 bg-red-500/10 backdrop-blur">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-red-300">🔐 Security Notice</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="text-red-200/80 space-y-2">
|
||||
<p>• Never share API keys in public channels or repositories</p>
|
||||
<p>• Rotate keys regularly for security</p>
|
||||
<p>• Use secrets management for production deployments</p>
|
||||
<p>• Report compromised keys immediately</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue