AeThex-Corporation/aethex-forge
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Create Staff internal collaboration page

Browse source 
cgen-faa92222a91047fdbe00290a28284303
This commit is contained in:
Builder.io 2025-11-10 04:48:14 +00:00
parent 98b8cd6972
commit 0481b90681
1 changed files with 224 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

224
client/pages/staff/StaffChat.tsx Normal file
View file

@ -0,0 +1,224 @@
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 { MessageSquare, Users, Hash, Lock, Plus } from "lucide-react";
const channels = [
{
name: "announcements",
description: "Company announcements and updates",
type: "public",
members: 45,
},
{
name: "engineering",
description: "Engineering team discussions",
type: "private",
members: 12,
},
{
name: "product",
description: "Product and feature discussions",
type: "public",
members: 28,
},
{
name: "design",
description: "Design and UX team",
type: "private",
members: 8,
},
{
name: "random",
description: "Off-topic and casual chat",
type: "public",
members: 42,
},
];
const directMessages = [
{ name: "Sarah Johnson", role: "CEO", status: "online" },
{ name: "Mike Chen", role: "CTO", status: "online" },
{ name: "Emma Davis", role: "Product Lead", status: "away" },
{ name: "Alex Kim", role: "Designer", status: "offline" },
];
export default function StaffChat() {
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>;
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">Team Chat</h1>
<p className="text-slate-400">Internal collaboration and team discussions</p>
</div>
<div className="grid md:grid-cols-3 gap-8">
{/* Sidebar */}
<div className="space-y-6">
{/* Channels */}
<div>
<div className="flex items-center justify-between mb-4">
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
<Hash className="h-5 w-5 text-slate-400" />
Channels
</h2>
<Button
variant="ghost"
size="sm"
className="text-slate-400 hover:text-white p-0"
>
<Plus className="h-4 w-4" />
</Button>
</div>
<div className="space-y-2">
{channels.map((channel) => (
<Button
key={channel.name}
variant="ghost"
className="w-full justify-start text-slate-300 hover:text-white hover:bg-slate-700/50"
>
<Hash className="h-4 w-4 mr-2" />
{channel.name}
</Button>
))}
</div>
</div>
{/* DMs */}
<div>
<div className="flex items-center justify-between mb-4">
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
<MessageSquare className="h-5 w-5 text-slate-400" />
Direct Messages
</h2>
<Button
variant="ghost"
size="sm"
className="text-slate-400 hover:text-white p-0"
>
<Plus className="h-4 w-4" />
</Button>
</div>
<div className="space-y-2">
{directMessages.map((dm) => (
<Button
key={dm.name}
variant="ghost"
className="w-full justify-start text-slate-300 hover:text-white hover:bg-slate-700/50"
>
<div className="flex items-center gap-2 w-full">
<div className="w-2 h-2 rounded-full bg-slate-400" />
<span className="truncate">{dm.name}</span>
</div>
</Button>
))}
</div>
</div>
</div>
{/* Main Chat Area */}
<div className="md:col-span-2 space-y-6">
{/* Channel Info */}
<Card className="border-slate-700/50 bg-slate-900/50 backdrop-blur">
<CardHeader>
<div className="flex items-start justify-between">
<div>
<CardTitle className="flex items-center gap-2 text-white">
<Hash className="h-5 w-5" />
announcements
</CardTitle>
<CardDescription className="text-slate-400">
Company announcements and updates
</CardDescription>
</div>
<Badge className="bg-green-500/20 text-green-300 border-green-500/50">
45 members
</Badge>
</div>
</CardHeader>
</Card>
{/* Messages Area */}
<Card className="border-slate-700/50 bg-slate-900/50 backdrop-blur h-96 flex flex-col">
<CardContent className="flex-1 overflow-y-auto p-6 space-y-4">
<div className="flex gap-3">
<div className="w-10 h-10 rounded-full bg-blue-500/20 flex-shrink-0" />
<div>
<p className="text-sm text-white font-medium">Sarah Johnson</p>
<p className="text-slate-300 text-sm mt-1">
Welcome to the internal team chat! This is where we collaborate and share updates.
</p>
<p className="text-xs text-slate-500 mt-2">10:30 AM</p>
</div>
</div>
<div className="flex gap-3">
<div className="w-10 h-10 rounded-full bg-purple-500/20 flex-shrink-0" />
<div>
<p className="text-sm text-white font-medium">Mike Chen</p>
<p className="text-slate-300 text-sm mt-1">
Great! Looking forward to building amazing things together.
</p>
<p className="text-xs text-slate-500 mt-2">10:35 AM</p>
</div>
</div>
</CardContent>
<div className="border-t border-slate-700/50 p-4">
<div className="flex gap-2">
<input
type="text"
placeholder="Type a message..."
className="flex-1 px-4 py-2 rounded bg-slate-800 border border-slate-700 text-white placeholder-slate-500 focus:outline-none focus:border-purple-500"
/>
<Button className="bg-purple-600 hover:bg-purple-700">Send</Button>
</div>
</div>
</Card>
{/* Info */}
<Card className="border-blue-500/30 bg-blue-500/10 backdrop-blur">
<CardHeader>
<CardTitle className="text-blue-300 flex items-center gap-2">
<Users className="h-5 w-5" />
Team Chat Coming Soon
</CardTitle>
</CardHeader>
<CardContent className="text-blue-200/80 space-y-2">
<p>
• Full-featured internal messaging platform
</p>
<p>
• Channels for teams and projects
</p>
<p>
• Direct messages and group chats
</p>
<p>
• File sharing and integrations
</p>
</CardContent>
</Card>
</div>
</div>
</div>
</div>
</Layout>
);
}