From 3e84c0b88fdee13220fd64aa0527c261dce90294 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Tue, 11 Nov 2025 17:19:36 +0000
Subject: [PATCH] Create Staff Chat page for internal communication

cgen-7dd6e40b75974bc48a5159d937722f5e
---
 client/pages/StaffChat.tsx | 190 +++++++++++++++++++++++++++++++++++++
 1 file changed, 190 insertions(+)
 create mode 100644 client/pages/StaffChat.tsx

diff --git a/client/pages/StaffChat.tsx b/client/pages/StaffChat.tsx
new file mode 100644
index 00000000..3c83f909
--- /dev/null
+++ b/client/pages/StaffChat.tsx
@@ -0,0 +1,190 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import Layout from "@/components/Layout";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { MessageSquare, Send, ExternalLink, Hash, Lock } from "lucide-react";
+
+const CHANNELS = [
+  { id: 1, name: "general", type: "public", members: 12, unread: 3 },
+  { id: 2, name: "engineering", type: "public", members: 8, unread: 0 },
+  { id: 3, name: "operations", type: "public", members: 5, unread: 1 },
+  { id: 4, name: "announcements", type: "locked", members: 15, unread: 2 },
+];
+
+const MESSAGES = [
+  {
+    id: 1,
+    author: "John Founder",
+    content: "Welcome to the AeThex staff chat!",
+    timestamp: "10:30 AM",
+    isOwn: false,
+  },
+  {
+    id: 2,
+    author: "Sarah Dev",
+    content: "Great to have everyone here",
+    timestamp: "10:32 AM",
+    isOwn: false,
+  },
+  {
+    id: 3,
+    author: "You",
+    content: "Looking forward to collaborating",
+    timestamp: "10:35 AM",
+    isOwn: true,
+  },
+];
+
+export default function StaffChat() {
+  const navigate = useNavigate();
+  const [selectedChannel, setSelectedChannel] = useState(CHANNELS[0]);
+  const [message, setMessage] = useState("");
+
+  const handleSend = () => {
+    if (message.trim()) {
+      setMessage("");
+    }
+  };
+
+  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">
+          <div className="flex items-center justify-between mb-8">
+            <div>
+              <h1 className="text-4xl font-bold text-white mb-2">
+                Staff Chat
+              </h1>
+              <p className="text-gray-300 flex items-center gap-2">
+                <MessageSquare className="w-4 h-4" />
+                Internal team communication
+              </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>
+
+          <div className="grid grid-cols-1 lg:grid-cols-4 gap-6 h-[600px]">
+            {/* Channels Sidebar */}
+            <Card className="bg-slate-900/50 border-purple-500/20 lg:col-span-1">
+              <CardHeader>
+                <CardTitle className="text-lg">Channels</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-2">
+                {CHANNELS.map((channel) => (
+                  <button
+                    key={channel.id}
+                    onClick={() => setSelectedChannel(channel)}
+                    className={`w-full text-left px-4 py-3 rounded-lg transition-all ${
+                      selectedChannel.id === channel.id
+                        ? "bg-purple-600/30 border border-purple-500/50"
+                        : "hover:bg-purple-600/10 border border-transparent"
+                    }`}
+                  >
+                    <div className="flex items-center gap-2">
+                      {channel.type === "locked" ? (
+                        <Lock className="w-4 h-4 text-yellow-400" />
+                      ) : (
+                        <Hash className="w-4 h-4 text-gray-400" />
+                      )}
+                      <div className="flex-1">
+                        <p className="text-white font-medium">#{channel.name}</p>
+                        <p className="text-gray-400 text-xs">
+                          {channel.members} members
+                        </p>
+                      </div>
+                      {channel.unread > 0 && (
+                        <Badge className="bg-red-500/20 text-red-300">
+                          {channel.unread}
+                        </Badge>
+                      )}
+                    </div>
+                  </button>
+                ))}
+              </CardContent>
+            </Card>
+
+            {/* Chat Area */}
+            <Card className="bg-slate-900/50 border-purple-500/20 lg:col-span-3 flex flex-col">
+              {/* Channel Header */}
+              <CardHeader className="border-b border-purple-500/20">
+                <CardTitle className="text-lg flex items-center gap-2">
+                  {selectedChannel.type === "locked" ? (
+                    <Lock className="w-4 h-4 text-yellow-400" />
+                  ) : (
+                    <Hash className="w-4 h-4 text-gray-400" />
+                  )}
+                  {selectedChannel.name}
+                </CardTitle>
+              </CardHeader>
+
+              {/* Messages */}
+              <CardContent className="flex-1 overflow-y-auto py-6 space-y-4">
+                {MESSAGES.map((msg) => (
+                  <div
+                    key={msg.id}
+                    className={`flex ${msg.isOwn ? "justify-end" : "justify-start"}`}
+                  >
+                    <div
+                      className={`max-w-xs px-4 py-2 rounded-lg ${
+                        msg.isOwn
+                          ? "bg-purple-600/30 text-white"
+                          : "bg-slate-800/50 text-gray-300"
+                      }`}
+                    >
+                      {!msg.isOwn && (
+                        <p className="text-sm font-semibold text-gray-300">
+                          {msg.author}
+                        </p>
+                      )}
+                      <p className="text-sm">{msg.content}</p>
+                      <p className="text-xs text-gray-500 mt-1">
+                        {msg.timestamp}
+                      </p>
+                    </div>
+                  </div>
+                ))}
+              </CardContent>
+
+              {/* Input */}
+              <div className="border-t border-purple-500/20 p-4">
+                <div className="flex gap-2">
+                  <Input
+                    placeholder="Type a message..."
+                    value={message}
+                    onChange={(e) => setMessage(e.target.value)}
+                    onKeyPress={(e) =>
+                      e.key === "Enter" && handleSend()
+                    }
+                    className="bg-slate-800/50 border-purple-500/20 text-white placeholder:text-gray-500"
+                  />
+                  <Button
+                    onClick={handleSend}
+                    className="bg-purple-600 hover:bg-purple-700"
+                    disabled={!message.trim()}
+                  >
+                    <Send className="w-4 h-4" />
+                  </Button>
+                </div>
+              </div>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+}