From 402d761ea247fc27672a46c683d0bc2f0688daff Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Tue, 11 Nov 2025 17:19:50 +0000
Subject: [PATCH] Create Staff Docs page for internal documentation

cgen-9d1ba36f8e724777bf289382d1a39194
---
 client/pages/StaffDocs.tsx | 224 +++++++++++++++++++++++++++++++++++++
 1 file changed, 224 insertions(+)
 create mode 100644 client/pages/StaffDocs.tsx

diff --git a/client/pages/StaffDocs.tsx b/client/pages/StaffDocs.tsx
new file mode 100644
index 00000000..aee997e3
--- /dev/null
+++ b/client/pages/StaffDocs.tsx
@@ -0,0 +1,224 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import Layout from "@/components/Layout";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import {
+  FileText,
+  Key,
+  Shield,
+  AlertTriangle,
+  Copy,
+  ExternalLink,
+} from "lucide-react";
+
+const DOCS = [
+  {
+    id: 1,
+    title: "Getting Started",
+    description: "Onboarding guide for new staff members",
+    category: "Onboarding",
+    link: "/internal-docs",
+  },
+  {
+    id: 2,
+    title: "Code of Conduct",
+    description: "AeThex team values and expectations",
+    category: "Policy",
+    link: "/internal-docs/code-of-conduct",
+  },
+  {
+    id: 3,
+    title: "Communication Guidelines",
+    description: "How we communicate across the team",
+    category: "Process",
+    link: "/internal-docs/communication",
+  },
+  {
+    id: 4,
+    title: "Tech Stack",
+    description: "Tools and technologies we use",
+    category: "Technical",
+    link: "/internal-docs/tech-stack",
+  },
+];
+
+const API_CREDENTIALS = [
+  {
+    id: 1,
+    name: "Discord Bot Token",
+    value: "NTc4OTcx****...****",
+    description: "Bot authentication token for Discord integration",
+  },
+  {
+    id: 2,
+    name: "Supabase Service Role",
+    value: "eyJhbGc****...****",
+    description: "Admin access to Supabase database",
+  },
+  {
+    id: 3,
+    name: "API Key",
+    value: "aethex_sk_****...****",
+    description: "Main API authentication",
+  },
+];
+
+export default function StaffDocs() {
+  const navigate = useNavigate();
+  const [copiedId, setCopiedId] = useState<string | null>(null);
+
+  const handleCopy = (id: string, text: string) => {
+    navigator.clipboard.writeText(text);
+    setCopiedId(id);
+    setTimeout(() => setCopiedId(null), 2000);
+  };
+
+  return (
+    <Layout>
+      <div className="min-h-screen bg-gradient-to-br from-slate-950 via-purple-900/20 to-slate-950 py-12 px-4">
+        <div className="max-w-6xl mx-auto space-y-8">
+          {/* Header */}
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="text-4xl font-bold text-white mb-2">
+                Staff Documentation
+              </h1>
+              <p className="text-gray-300 flex items-center gap-2">
+                <FileText className="w-4 h-4" />
+                Internal resources and guides
+              </p>
+            </div>
+            <Button
+              onClick={() => navigate("/staff/dashboard")}
+              variant="outline"
+              className="border-purple-500/30 hover:bg-purple-500/10"
+            >
+              <ExternalLink className="w-4 h-4 mr-2" />
+              Back
+            </Button>
+          </div>
+
+          {/* Security Notice */}
+          <Alert className="border-red-500/30 bg-red-500/10">
+            <AlertTriangle className="h-4 w-4 text-red-600" />
+            <AlertDescription className="ml-2 text-red-600">
+              This section contains sensitive information. Do not share credentials
+              or secrets outside of this portal.
+            </AlertDescription>
+          </Alert>
+
+          {/* Documentation Grid */}
+          <div>
+            <h2 className="text-2xl font-bold text-white mb-4">Guides</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {DOCS.map((doc) => (
+                <Card
+                  key={doc.id}
+                  className="bg-slate-900/50 border-purple-500/20 hover:border-purple-500/50 transition-all cursor-pointer"
+                  onClick={() => navigate(doc.link)}
+                >
+                  <CardContent className="pt-6">
+                    <div className="flex items-start justify-between mb-3">
+                      <FileText className="w-5 h-5 text-purple-400" />
+                      <Badge variant="outline" className="border-purple-500/30">
+                        {doc.category}
+                      </Badge>
+                    </div>
+                    <h3 className="text-white font-bold mb-2">{doc.title}</h3>
+                    <p className="text-gray-400 text-sm">{doc.description}</p>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </div>
+
+          {/* API Credentials Section */}
+          <Card className="bg-slate-900/50 border-red-500/20">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2 text-red-400">
+                <Shield className="w-5 h-5" />
+                API Credentials
+              </CardTitle>
+              <p className="text-gray-400 text-sm mt-2">
+                Sensitive credentials are hidden. Click copy to reveal temporarily.
+              </p>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {API_CREDENTIALS.map((cred) => (
+                <div
+                  key={cred.id}
+                  className="bg-slate-800/50 rounded-lg p-4 border border-red-500/20"
+                >
+                  <div className="flex items-start justify-between mb-2">
+                    <div className="flex-1">
+                      <h4 className="text-white font-medium">{cred.name}</h4>
+                      <p className="text-gray-400 text-sm">{cred.description}</p>
+                    </div>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={() =>
+                        handleCopy(cred.id, cred.value)
+                      }
+                      className="text-purple-400 hover:text-purple-300"
+                    >
+                      {copiedId === cred.id ? (
+                        <span className="text-xs">Copied!</span>
+                      ) : (
+                        <>
+                          <Copy className="w-4 h-4" />
+                        </>
+                      )}
+                    </Button>
+                  </div>
+                  <p className="text-gray-500 text-sm font-mono">{cred.value}</p>
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+
+          {/* Quick Links */}
+          <Card className="bg-slate-900/50 border-purple-500/20">
+            <CardHeader>
+              <CardTitle>Quick Links</CardTitle>
+            </CardHeader>
+            <CardContent className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <Button
+                onClick={() => navigate("/internal-docs")}
+                variant="outline"
+                className="h-12 border-purple-500/30 hover:bg-purple-500/10"
+              >
+                <FileText className="w-4 h-4 mr-2" />
+                All Docs
+              </Button>
+              <Button
+                onClick={() => navigate("/staff/admin")}
+                variant="outline"
+                className="h-12 border-purple-500/30 hover:bg-purple-500/10"
+              >
+                <Key className="w-4 h-4 mr-2" />
+                API Management
+              </Button>
+              <Button
+                onClick={() => navigate("/admin")}
+                variant="outline"
+                className="h-12 border-purple-500/30 hover:bg-purple-500/10"
+              >
+                <Shield className="w-4 h-4 mr-2" />
+                Admin Panel
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </Layout>
+  );
+}