0623521374
Applied max-w-6xl standard across all remaining pages: **Internal Tools & Admin (6 files):** - Teams.tsx, Squads.tsx, Network.tsx, Portal.tsx - Admin.tsx, BotPanel.tsx, Arms.tsx **Hub/Client Pages (6 files):** - ClientHub.tsx, ClientProjects.tsx (all 3 instances) - ClientDashboard.tsx, ClientSettings.tsx - ClientContracts.tsx, ClientInvoices.tsx, ClientReports.tsx **Dashboard Pages (5 files):** - FoundationDashboard.tsx, GameForgeDashboard.tsx - StaffDashboard.tsx, NexusDashboard.tsx, LabsDashboard.tsx **Community & Creator Pages (6 files):** - Directory.tsx, Projects.tsx - CreatorDirectory.tsx, MentorProfile.tsx, EthosGuild.tsx - FoundationDownloadCenter.tsx, OpportunitiesHub.tsx **Result:** Zero instances of max-w-7xl remaining in client/pages All pages now use consistent max-w-6xl width for optimal readability
472 lines
19 KiB
TypeScript
472 lines
19 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import Layout from "@/components/Layout";
|
|
import { Button } from "@/components/ui/button";
|
|
import { useAuth } from "@/contexts/AuthContext";
|
|
import { useArmTheme } from "@/contexts/ArmThemeContext";
|
|
import { supabase } from "@/lib/supabase";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import LoadingScreen from "@/components/LoadingScreen";
|
|
import {
|
|
Shield,
|
|
Target,
|
|
DollarSign,
|
|
FileText,
|
|
Users,
|
|
Link as LinkIcon,
|
|
Calendar,
|
|
Book,
|
|
AlertCircle,
|
|
Search,
|
|
ExternalLink,
|
|
} from "lucide-react";
|
|
import { DirectoryWidget } from "@/components/DirectoryWidget";
|
|
|
|
const API_BASE = import.meta.env.VITE_API_BASE || "";
|
|
|
|
export default function StaffDashboard() {
|
|
const navigate = useNavigate();
|
|
const { user, loading: authLoading } = useAuth();
|
|
const { theme } = useArmTheme();
|
|
const [activeTab, setActiveTab] = useState("overview");
|
|
const [staffMember, setStaffMember] = useState<any>(null);
|
|
const [okrs, setOkrs] = useState<any[]>([]);
|
|
const [invoices, setInvoices] = useState<any[]>([]);
|
|
const [directory, setDirectory] = useState<any[]>([]);
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
if (!authLoading && user) {
|
|
loadDashboardData();
|
|
}
|
|
}, [user, authLoading]);
|
|
|
|
const loadDashboardData = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const {
|
|
data: { session },
|
|
} = await supabase.auth.getSession();
|
|
const token = session?.access_token;
|
|
if (!token) throw new Error("No auth token");
|
|
|
|
try {
|
|
const memberRes = await fetch(`${API_BASE}/api/staff/me`, {
|
|
headers: { Authorization: `Bearer ${token}` },
|
|
});
|
|
if (
|
|
memberRes.ok &&
|
|
memberRes.headers.get("content-type")?.includes("application/json")
|
|
) {
|
|
const data = await memberRes.json();
|
|
setStaffMember(data);
|
|
}
|
|
} catch (err) {
|
|
// Silently ignore API errors
|
|
}
|
|
|
|
try {
|
|
const okrRes = await fetch(`${API_BASE}/api/staff/okrs`, {
|
|
headers: { Authorization: `Bearer ${token}` },
|
|
});
|
|
if (
|
|
okrRes.ok &&
|
|
okrRes.headers.get("content-type")?.includes("application/json")
|
|
) {
|
|
const data = await okrRes.json();
|
|
setOkrs(Array.isArray(data) ? data : []);
|
|
}
|
|
} catch (err) {
|
|
// Silently ignore API errors
|
|
}
|
|
|
|
try {
|
|
const invRes = await fetch(`${API_BASE}/api/staff/invoices`, {
|
|
headers: { Authorization: `Bearer ${token}` },
|
|
});
|
|
if (
|
|
invRes.ok &&
|
|
invRes.headers.get("content-type")?.includes("application/json")
|
|
) {
|
|
const data = await invRes.json();
|
|
setInvoices(Array.isArray(data) ? data : []);
|
|
}
|
|
} catch (err) {
|
|
// Silently ignore API errors
|
|
}
|
|
|
|
try {
|
|
const dirRes = await fetch(`${API_BASE}/api/staff/directory`, {
|
|
headers: { Authorization: `Bearer ${token}` },
|
|
});
|
|
if (
|
|
dirRes.ok &&
|
|
dirRes.headers.get("content-type")?.includes("application/json")
|
|
) {
|
|
const data = await dirRes.json();
|
|
setDirectory(Array.isArray(data) ? data : []);
|
|
}
|
|
} catch (err) {
|
|
// Silently ignore API errors
|
|
}
|
|
} catch (error) {
|
|
// Silently ignore errors
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const isEmployee = staffMember?.employment_type === "employee";
|
|
const isContractor = staffMember?.employment_type === "contractor";
|
|
const filteredDirectory = directory.filter(
|
|
(member) =>
|
|
member.full_name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
member.role?.toLowerCase().includes(searchQuery.toLowerCase()),
|
|
);
|
|
|
|
if (authLoading || loading) {
|
|
return <LoadingScreen message="Loading STAFF Portal..." />;
|
|
}
|
|
|
|
if (!user) {
|
|
return (
|
|
<Layout>
|
|
<div className="min-h-screen bg-gradient-to-b from-black via-purple-950/30 to-black flex items-center justify-center px-4">
|
|
<div className="max-w-md text-center space-y-6">
|
|
<h1 className="text-4xl font-bold bg-gradient-to-r from-purple-300 to-pink-300 bg-clip-text text-transparent">
|
|
STAFF Portal
|
|
</h1>
|
|
<p className="text-gray-400">Employee & Contractor Hub</p>
|
|
<Button
|
|
onClick={() => navigate("/login")}
|
|
className="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-lg py-6"
|
|
>
|
|
Sign In
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Layout>
|
|
<div
|
|
className={`min-h-screen bg-gradient-to-b from-black to-black py-8 ${theme.fontClass}`}
|
|
style={{ backgroundImage: theme.wallpaperPattern }}
|
|
>
|
|
<div className="container mx-auto px-4 max-w-6xl space-y-8">
|
|
{/* Header */}
|
|
<div className="space-y-4 animate-slide-down">
|
|
<h1
|
|
className={`text-5xl md:text-6xl font-bold bg-gradient-to-r ${theme.accentColor} bg-clip-text text-transparent`}
|
|
>
|
|
STAFF Portal
|
|
</h1>
|
|
<p className="text-gray-400 text-lg">
|
|
Employee & Contractor Management | Professional Utility Purple
|
|
</p>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<Tabs
|
|
value={activeTab}
|
|
onValueChange={setActiveTab}
|
|
className="w-full"
|
|
>
|
|
<TabsList
|
|
className="grid w-full grid-cols-5 bg-purple-950/30 border border-purple-500/20 p-1"
|
|
style={{ fontFamily: theme.fontFamily }}
|
|
>
|
|
<TabsTrigger value="overview">Overview</TabsTrigger>
|
|
{isEmployee && <TabsTrigger value="okrs">OKRs</TabsTrigger>}
|
|
{isEmployee && (
|
|
<TabsTrigger value="benefits">Pay & Benefits</TabsTrigger>
|
|
)}
|
|
{isContractor && (
|
|
<TabsTrigger value="invoices">Invoices</TabsTrigger>
|
|
)}
|
|
<TabsTrigger value="directory">Directory</TabsTrigger>
|
|
</TabsList>
|
|
|
|
{/* Overview Tab */}
|
|
<TabsContent value="overview" className="space-y-6 animate-fade-in">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<Card className="bg-gradient-to-br from-purple-950/40 to-purple-900/20 border-purple-500/20">
|
|
<CardContent className="p-6 space-y-2">
|
|
<p className="text-sm text-gray-400">Employment Type</p>
|
|
<p className="text-2xl font-bold text-white capitalize">
|
|
{staffMember?.employment_type || "—"}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="bg-gradient-to-br from-pink-950/40 to-pink-900/20 border-pink-500/20">
|
|
<CardContent className="p-6 space-y-2">
|
|
<p className="text-sm text-gray-400">Department</p>
|
|
<p className="text-2xl font-bold text-white">
|
|
{staffMember?.department || "—"}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="bg-gradient-to-br from-blue-950/40 to-blue-900/20 border-blue-500/20">
|
|
<CardContent className="p-6 space-y-2">
|
|
<p className="text-sm text-gray-400">Start Date</p>
|
|
<p className="text-2xl font-bold text-white">
|
|
{staffMember?.start_date
|
|
? new Date(staffMember.start_date).toLocaleDateString()
|
|
: "—"}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Quick Links */}
|
|
<Card className="bg-gradient-to-br from-purple-950/40 to-purple-900/20 border-purple-500/20">
|
|
<CardHeader>
|
|
<CardTitle style={{ fontFamily: theme.fontFamily }}>
|
|
Quick Actions
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="grid grid-cols-1 md:grid-cols-3 gap-3">
|
|
<Button
|
|
onClick={() => navigate("/staff/expenses")}
|
|
variant="outline"
|
|
className="border-purple-500/30 text-purple-300 hover:bg-purple-500/10 justify-start"
|
|
style={{ fontFamily: theme.fontFamily }}
|
|
>
|
|
<FileText className="h-4 w-4 mr-2" />
|
|
File an Expense (SOP-302)
|
|
</Button>
|
|
<Button
|
|
onClick={() => navigate("/staff/pto")}
|
|
variant="outline"
|
|
className="border-purple-500/30 text-purple-300 hover:bg-purple-500/10 justify-start"
|
|
style={{ fontFamily: theme.fontFamily }}
|
|
>
|
|
<Calendar className="h-4 w-4 mr-2" />
|
|
Request PTO (KND-300)
|
|
</Button>
|
|
<Button
|
|
onClick={() => navigate("/staff/docs")}
|
|
variant="outline"
|
|
className="border-purple-500/30 text-purple-300 hover:bg-purple-500/10 justify-start"
|
|
style={{ fontFamily: theme.fontFamily }}
|
|
>
|
|
<Book className="h-4 w-4 mr-2" />
|
|
Internal Doc Hub
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
{/* OKRs Tab - Employee Only */}
|
|
{isEmployee && (
|
|
<TabsContent value="okrs" className="space-y-4 animate-fade-in">
|
|
<Card className="bg-gradient-to-br from-purple-950/40 to-purple-900/20 border-purple-500/20">
|
|
<CardHeader>
|
|
<CardTitle>My OKRs</CardTitle>
|
|
<CardDescription>
|
|
Quarterly Objectives & Key Results
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{okrs.length === 0 ? (
|
|
<div className="text-center py-12">
|
|
<Target className="h-12 w-12 mx-auto text-gray-500 opacity-50 mb-4" />
|
|
<p className="text-gray-400">
|
|
No OKRs set for this quarter
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{okrs.map((okr: any) => (
|
|
<div
|
|
key={okr.id}
|
|
className="p-4 bg-black/30 rounded-lg border border-purple-500/10 space-y-3"
|
|
>
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="flex-1">
|
|
<h4 className="font-semibold text-white">
|
|
{okr.objective}
|
|
</h4>
|
|
<p className="text-sm text-gray-400 mt-1">
|
|
{okr.description}
|
|
</p>
|
|
</div>
|
|
<Badge
|
|
className={
|
|
okr.status === "achieved"
|
|
? "bg-green-600/50 text-green-100"
|
|
: "bg-blue-600/50 text-blue-100"
|
|
}
|
|
>
|
|
{okr.status}
|
|
</Badge>
|
|
</div>
|
|
<div className="space-y-2">
|
|
{okr.key_results?.map((kr: any) => (
|
|
<div
|
|
key={kr.id}
|
|
className="flex items-start gap-3 text-sm"
|
|
>
|
|
<span className="text-purple-400 mt-1">
|
|
•
|
|
</span>
|
|
<div className="flex-1">
|
|
<p className="text-white">{kr.title}</p>
|
|
<div className="flex justify-between text-xs text-gray-400 mt-1">
|
|
<span>Progress</span>
|
|
<span>{kr.progress}%</span>
|
|
</div>
|
|
<div className="w-full bg-black/50 rounded-full h-2 mt-1">
|
|
<div
|
|
className="bg-purple-500 h-2 rounded-full"
|
|
style={{ width: `${kr.progress}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
)}
|
|
|
|
{/* Pay & Benefits Tab - Employee Only */}
|
|
{isEmployee && (
|
|
<TabsContent
|
|
value="benefits"
|
|
className="space-y-4 animate-fade-in"
|
|
>
|
|
<Card className="bg-gradient-to-br from-purple-950/40 to-purple-900/20 border-purple-500/20">
|
|
<CardHeader>
|
|
<CardTitle>Pay & Benefits</CardTitle>
|
|
<CardDescription>
|
|
Payroll and compensation information
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="p-4 bg-black/30 rounded-lg border border-purple-500/20 space-y-2">
|
|
<p className="text-sm text-gray-400">Base Salary</p>
|
|
<p className="text-3xl font-bold text-white">
|
|
${staffMember?.salary?.toLocaleString() || "—"}
|
|
</p>
|
|
</div>
|
|
<Button className="w-full bg-purple-600 hover:bg-purple-700">
|
|
<ExternalLink className="h-4 w-4 mr-2" />
|
|
Open Rippling (Payroll System)
|
|
</Button>
|
|
<p className="text-xs text-gray-400">
|
|
View your paystubs, tax documents, and benefits in the
|
|
Rippling employee portal.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
)}
|
|
|
|
{/* Invoices Tab - Contractor Only */}
|
|
{isContractor && (
|
|
<TabsContent
|
|
value="invoices"
|
|
className="space-y-4 animate-fade-in"
|
|
>
|
|
<Card className="bg-gradient-to-br from-purple-950/40 to-purple-900/20 border-purple-500/20">
|
|
<CardHeader>
|
|
<CardTitle>My Invoices</CardTitle>
|
|
<CardDescription>
|
|
SOP-301: Contractor Invoice Portal
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{invoices.length === 0 ? (
|
|
<div className="text-center py-12">
|
|
<FileText className="h-12 w-12 mx-auto text-gray-500 opacity-50 mb-4" />
|
|
<p className="text-gray-400">No invoices submitted</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{invoices.map((invoice: any) => (
|
|
<div
|
|
key={invoice.id}
|
|
className="p-4 bg-black/30 rounded-lg border border-purple-500/10 space-y-3"
|
|
>
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="flex-1">
|
|
<p className="font-semibold text-white">
|
|
{invoice.invoice_number}
|
|
</p>
|
|
<p className="text-xs text-gray-400 mt-1">
|
|
{new Date(invoice.date).toLocaleDateString()}
|
|
</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="font-semibold text-white">
|
|
${invoice.amount?.toLocaleString()}
|
|
</p>
|
|
<Badge
|
|
className={
|
|
invoice.status === "paid"
|
|
? "bg-green-600/50 text-green-100"
|
|
: invoice.status === "pending"
|
|
? "bg-yellow-600/50 text-yellow-100"
|
|
: "bg-blue-600/50 text-blue-100"
|
|
}
|
|
>
|
|
{invoice.status}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
)}
|
|
|
|
{/* Directory Tab */}
|
|
<TabsContent
|
|
value="directory"
|
|
className="space-y-4 animate-fade-in"
|
|
>
|
|
<DirectoryWidget
|
|
members={directory.map((m: any) => ({
|
|
id: m.id,
|
|
name: m.full_name,
|
|
role: m.role || "Team Member",
|
|
department: m.department,
|
|
email: m.email,
|
|
phone: m.phone,
|
|
location: m.location,
|
|
avatar_url: m.avatar_url,
|
|
employment_type:
|
|
m.employment_type === "employee"
|
|
? "employee"
|
|
: "contractor",
|
|
}))}
|
|
title="Internal Directory"
|
|
description="Find employees and contractors"
|
|
/>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|