Add core UI components and layout for media platform
Initializes the client-side application with fundamental UI components, including navigation, cards for articles and auctions, and various elements for user interaction and display. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/bVdKIaU
This commit is contained in:
kimjaehyeon0101
331
client/src/pages/SuperAdminDashboard.tsx
Normal file
331
client/src/pages/SuperAdminDashboard.tsx
Normal file
@ -0,0 +1,331 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { useAuth } from "@/hooks/useAuth";
|
||||
import { useEffect } from "react";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { isUnauthorizedError } from "@/lib/authUtils";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import { queryClient } from "@/lib/queryClient";
|
||||
import { apiRequest } from "@/lib/queryClient";
|
||||
import type { MediaOutletRequest } from "@shared/schema";
|
||||
|
||||
export default function SuperAdminDashboard() {
|
||||
const { user, isLoading } = useAuth();
|
||||
const { toast } = useToast();
|
||||
|
||||
// Redirect if not authenticated or not superadmin
|
||||
useEffect(() => {
|
||||
if (!isLoading && (!user || user.role !== 'superadmin')) {
|
||||
toast({
|
||||
title: "Unauthorized",
|
||||
description: "You don't have permission to access this page.",
|
||||
variant: "destructive",
|
||||
});
|
||||
setTimeout(() => {
|
||||
window.location.href = "/";
|
||||
}, 500);
|
||||
}
|
||||
}, [isLoading, user, toast]);
|
||||
|
||||
const { data: analytics, isLoading: analyticsLoading, error: analyticsError } = useQuery({
|
||||
queryKey: ["/api/analytics"],
|
||||
retry: false,
|
||||
});
|
||||
|
||||
const { data: requests = [], isLoading: requestsLoading, error: requestsError } = useQuery<MediaOutletRequest[]>({
|
||||
queryKey: ["/api/media-outlet-requests"],
|
||||
retry: false,
|
||||
});
|
||||
|
||||
// Handle analytics errors
|
||||
useEffect(() => {
|
||||
if (analyticsError && isUnauthorizedError(analyticsError as Error)) {
|
||||
toast({
|
||||
title: "Unauthorized",
|
||||
description: "You are logged out. Logging in again...",
|
||||
variant: "destructive",
|
||||
});
|
||||
setTimeout(() => {
|
||||
window.location.href = "/api/login";
|
||||
}, 500);
|
||||
}
|
||||
}, [analyticsError, toast]);
|
||||
|
||||
// Handle requests errors
|
||||
useEffect(() => {
|
||||
if (requestsError && isUnauthorizedError(requestsError as Error)) {
|
||||
toast({
|
||||
title: "Unauthorized",
|
||||
description: "You are logged out. Logging in again...",
|
||||
variant: "destructive",
|
||||
});
|
||||
setTimeout(() => {
|
||||
window.location.href = "/api/login";
|
||||
}, 500);
|
||||
}
|
||||
}, [requestsError, toast]);
|
||||
|
||||
const updateRequestMutation = useMutation({
|
||||
mutationFn: async ({ id, status }: { id: string; status: string }) => {
|
||||
await apiRequest("PATCH", `/api/media-outlet-requests/${id}`, { status });
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["/api/media-outlet-requests"] });
|
||||
toast({
|
||||
title: "Success",
|
||||
description: "Request status updated successfully.",
|
||||
});
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
if (isUnauthorizedError(error)) {
|
||||
toast({
|
||||
title: "Unauthorized",
|
||||
description: "You are logged out. Logging in again...",
|
||||
variant: "destructive",
|
||||
});
|
||||
setTimeout(() => {
|
||||
window.location.href = "/api/login";
|
||||
}, 500);
|
||||
return;
|
||||
}
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Failed to update request status.",
|
||||
variant: "destructive"
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const handleLogout = () => {
|
||||
window.location.href = "/api/logout";
|
||||
};
|
||||
|
||||
const handleRequestAction = (id: string, status: string) => {
|
||||
updateRequestMutation.mutate({ id, status });
|
||||
};
|
||||
|
||||
if (isLoading || !user || user.role !== 'superadmin') {
|
||||
return (
|
||||
<div className="min-h-screen bg-background flex items-center justify-center">
|
||||
<div className="animate-spin rounded-full h-32 w-32 border-b-2 border-primary"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
{/* Header */}
|
||||
<header className="bg-card border-b border-border sticky top-0 z-50">
|
||||
<div className="max-w-7xl mx-auto px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center text-primary-foreground font-bold text-lg">
|
||||
S
|
||||
</div>
|
||||
<span className="text-2xl font-bold tracking-tight">SAPIENS</span>
|
||||
<span className="text-sm text-muted-foreground">• Super Admin Dashboard</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button variant="ghost" onClick={() => window.location.href = "/"}>
|
||||
Home
|
||||
</Button>
|
||||
<Button variant="outline" onClick={handleLogout}>
|
||||
Logout
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-7xl mx-auto px-6 py-8">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Super Admin Dashboard</h1>
|
||||
<p className="text-muted-foreground">Comprehensive platform analytics and management</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Analytics Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
{analyticsLoading ? (
|
||||
Array.from({ length: 4 }).map((_, i) => (
|
||||
<Card key={i}>
|
||||
<CardContent className="p-6 animate-pulse">
|
||||
<div className="h-16 bg-muted rounded"></div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))
|
||||
) : (
|
||||
<>
|
||||
<Card data-testid="card-total-articles">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-muted-foreground">Total Articles</h3>
|
||||
<p className="text-2xl font-bold">{(analytics as any)?.totalArticles || 0}</p>
|
||||
</div>
|
||||
<i className="fas fa-newspaper text-primary text-xl"></i>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card data-testid="card-active-predictions">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-muted-foreground">Active Predictions</h3>
|
||||
<p className="text-2xl font-bold">{(analytics as any)?.activePredictions || 0}</p>
|
||||
</div>
|
||||
<i className="fas fa-chart-line text-chart-2 text-xl"></i>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card data-testid="card-live-auctions">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-muted-foreground">Live Auctions</h3>
|
||||
<p className="text-2xl font-bold">{(analytics as any)?.liveAuctions || 0}</p>
|
||||
</div>
|
||||
<i className="fas fa-gavel text-chart-1 text-xl"></i>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card data-testid="card-revenue">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-muted-foreground">Total Revenue</h3>
|
||||
<p className="text-2xl font-bold">${((analytics as any)?.totalRevenue || 0).toLocaleString()}</p>
|
||||
</div>
|
||||
<i className="fas fa-dollar-sign text-chart-4 text-xl"></i>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Platform Analytics */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">User Engagement</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-muted-foreground">Daily Active Users</span>
|
||||
<span className="font-semibold">1,247</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-muted-foreground">Avg. Session Duration</span>
|
||||
<span className="font-semibold">12m 34s</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-muted-foreground">Bounce Rate</span>
|
||||
<span className="font-semibold">32%</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-muted-foreground">Page Views</span>
|
||||
<span className="font-semibold">15,632</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">Market Performance</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-muted-foreground">Total Prediction Volume</span>
|
||||
<span className="font-semibold">$892K</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-muted-foreground">Auction Participation</span>
|
||||
<span className="font-semibold">78%</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-muted-foreground">Avg. Bid Amount</span>
|
||||
<span className="font-semibold">$2,150</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-muted-foreground">Quality Score Avg.</span>
|
||||
<span className="font-semibold">82/100</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Media Outlet Requests */}
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">Media Outlet Requests</h3>
|
||||
{requestsLoading ? (
|
||||
<div className="space-y-3">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<div key={i} className="h-16 bg-muted rounded animate-pulse"></div>
|
||||
))}
|
||||
</div>
|
||||
) : (requests as MediaOutletRequest[]).length === 0 ? (
|
||||
<div className="text-center py-8 text-muted-foreground">
|
||||
<i className="fas fa-inbox text-3xl mb-4"></i>
|
||||
<p>No pending requests</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{requests.filter(r => r.status === 'pending').map((request) => (
|
||||
<div
|
||||
key={request.id}
|
||||
className="flex items-center justify-between p-4 border border-border rounded-lg"
|
||||
data-testid={`request-${request.id}`}
|
||||
>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-3 mb-2">
|
||||
<p className="font-medium">{request.name}</p>
|
||||
<Badge variant="outline" className="capitalize">
|
||||
{request.category}
|
||||
</Badge>
|
||||
<Badge variant="secondary">
|
||||
{request.status}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mb-1">{request.description}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Submitted {request.createdAt ? new Date(request.createdAt).toLocaleDateString() : 'Unknown'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex space-x-2">
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => handleRequestAction(request.id, 'approved')}
|
||||
disabled={updateRequestMutation.isPending}
|
||||
data-testid={`button-approve-${request.id}`}
|
||||
>
|
||||
Approve
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => handleRequestAction(request.id, 'rejected')}
|
||||
disabled={updateRequestMutation.isPending}
|
||||
data-testid={`button-reject-${request.id}`}
|
||||
>
|
||||
Reject
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user