61fd5664cf
Adjust the layout of the Admin Dashboard page in client/src/pages/AdminDashboard.tsx to include the description next to the logo and ensure the footer is always fixed. 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/gVirbWH
412 lines
18 KiB
TypeScript
412 lines
18 KiB
TypeScript
import { useQuery } from "@tanstack/react-query";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { useAuth } from "@/hooks/useAuth";
|
|
import { useEffect, useState } from "react";
|
|
import { useToast } from "@/hooks/use-toast";
|
|
import { isUnauthorizedError } from "@/lib/authUtils";
|
|
import { Search, Settings, ArrowUpDown } from "lucide-react";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import type { MediaOutlet } from "@shared/schema";
|
|
import MediaOutletManagement from "@/components/MediaOutletManagement";
|
|
|
|
export default function AdminDashboard() {
|
|
const { user, isLoading } = useAuth();
|
|
const { toast } = useToast();
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
const [selectedOutlet, setSelectedOutlet] = useState<MediaOutlet | null>(null);
|
|
const [managingOutlet, setManagingOutlet] = useState<MediaOutlet | null>(null);
|
|
const [sortBy, setSortBy] = useState<"alphabetical" | "traffic">("alphabetical");
|
|
|
|
// Redirect if not authenticated or not admin/superadmin
|
|
useEffect(() => {
|
|
if (!isLoading && (!user || (user.role !== 'admin' && 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: mediaOutlets = [], isLoading: outletsLoading } = useQuery<MediaOutlet[]>({
|
|
queryKey: ["/api/media-outlets"],
|
|
queryFn: async () => {
|
|
const res = await fetch("/api/media-outlets", {
|
|
credentials: "include",
|
|
});
|
|
if (!res.ok) {
|
|
throw new Error(`${res.status}: ${res.statusText}`);
|
|
}
|
|
return res.json();
|
|
},
|
|
});
|
|
|
|
// Filter and sort outlets based on search term and sort option
|
|
const filteredOutlets = mediaOutlets
|
|
.filter(outlet =>
|
|
outlet.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
(outlet.description && outlet.description.toLowerCase().includes(searchTerm.toLowerCase()))
|
|
)
|
|
.sort((a, b) => {
|
|
if (sortBy === "alphabetical") {
|
|
return a.name.localeCompare(b.name);
|
|
} else {
|
|
// Sort by traffic score (descending - highest traffic first)
|
|
return (b.trafficScore || 0) - (a.trafficScore || 0);
|
|
}
|
|
});
|
|
|
|
// Group outlets by category and sort
|
|
const getOutletsByCategory = (category: string) => {
|
|
const filtered = filteredOutlets.filter(outlet =>
|
|
outlet.category.toLowerCase() === category.toLowerCase()
|
|
);
|
|
|
|
return filtered.sort((a, b) => {
|
|
if (sortBy === "alphabetical") {
|
|
return a.name.localeCompare(b.name);
|
|
} else {
|
|
// Sort by traffic score (descending - highest traffic first)
|
|
return (b.trafficScore || 0) - (a.trafficScore || 0);
|
|
}
|
|
});
|
|
};
|
|
|
|
const handleLogout = () => {
|
|
window.location.href = "/api/logout";
|
|
};
|
|
|
|
if (isLoading || !user || (user.role !== 'admin' && 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>
|
|
);
|
|
}
|
|
|
|
// If managing an outlet, show MediaOutletManagement
|
|
if (managingOutlet) {
|
|
return (
|
|
<MediaOutletManagement
|
|
outlet={managingOutlet}
|
|
onBack={() => setManagingOutlet(null)}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
{/* Header */}
|
|
<header className="bg-white border-b border-gray-200 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-4">
|
|
<a href="/" className="cursor-pointer" data-testid="logo-link">
|
|
<img
|
|
src="/attached_assets/logo_black_1759162717640.png"
|
|
alt="SAPIENS"
|
|
className="h-6 w-auto hover:opacity-80 transition-opacity"
|
|
data-testid="logo-sapiens"
|
|
/>
|
|
</a>
|
|
<div className="border-l border-gray-300 h-6"></div>
|
|
<div>
|
|
<h1 className="text-lg font-bold text-gray-900">Admin Dashboard</h1>
|
|
<p className="text-xs text-gray-600">Search and select media outlets to manage</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-4">
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
|
|
<Input
|
|
type="text"
|
|
placeholder="Search media outlets..."
|
|
className="w-80 pl-10 bg-gray-50 border-gray-200"
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
data-testid="input-admin-search"
|
|
/>
|
|
</div>
|
|
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
data-testid="button-settings"
|
|
>
|
|
<Settings className="h-4 w-4" />
|
|
</Button>
|
|
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={handleLogout}
|
|
data-testid="button-logout"
|
|
>
|
|
Logout
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="max-w-7xl mx-auto px-4 py-4">
|
|
{outletsLoading ? (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
|
{Array.from({ length: 12 }).map((_, i) => (
|
|
<Card key={i} className="animate-pulse">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="w-12 h-12 bg-gray-200 rounded-full"></div>
|
|
<div className="flex-1">
|
|
<div className="h-4 bg-gray-200 rounded mb-2"></div>
|
|
<div className="h-3 bg-gray-200 rounded w-2/3"></div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
{/* People Section */}
|
|
<div data-testid="admin-section-people">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<h2 className="text-xl font-bold text-gray-900">
|
|
People
|
|
<span className="text-gray-400 text-base ml-2">({getOutletsByCategory("People").length})</span>
|
|
</h2>
|
|
<button
|
|
onClick={() => setSortBy(sortBy === "alphabetical" ? "traffic" : "alphabetical")}
|
|
className="p-1 rounded hover:bg-gray-100"
|
|
title={`Sort by ${sortBy === "alphabetical" ? "traffic" : "alphabetical"}`}
|
|
data-testid="people-sort-toggle"
|
|
>
|
|
<ArrowUpDown className="h-4 w-4 text-gray-500" />
|
|
</button>
|
|
</div>
|
|
<div className="space-y-2">
|
|
{getOutletsByCategory("People").map((outlet) => (
|
|
<Card
|
|
key={outlet.id}
|
|
className="hover:shadow-md transition-shadow cursor-pointer bg-white"
|
|
onClick={() => setSelectedOutlet(outlet)}
|
|
data-testid={`admin-card-outlet-${outlet.id}`}
|
|
>
|
|
<CardContent className="p-2">
|
|
<div className="flex items-center space-x-2">
|
|
<div className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center overflow-hidden">
|
|
{outlet.imageUrl ? (
|
|
<img
|
|
src={outlet.imageUrl}
|
|
alt={outlet.name}
|
|
className="w-full h-full object-cover"
|
|
style={{objectPosition: 'center top'}}
|
|
/>
|
|
) : (
|
|
<div className="w-6 h-6 bg-gray-300 rounded-full flex items-center justify-center">
|
|
<span className="text-gray-600 text-sm font-medium">
|
|
{outlet.name.charAt(0)}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="font-medium text-gray-900 truncate">
|
|
{outlet.name}
|
|
</h3>
|
|
<p className="text-sm text-gray-500 truncate">
|
|
{outlet.description || "Media Outlet"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Topics Section */}
|
|
<div data-testid="admin-section-topics">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<h2 className="text-xl font-bold text-gray-900">
|
|
Topics
|
|
<span className="text-gray-400 text-base ml-2">({getOutletsByCategory("Topics").length})</span>
|
|
</h2>
|
|
<button
|
|
onClick={() => setSortBy(sortBy === "alphabetical" ? "traffic" : "alphabetical")}
|
|
className="p-1 rounded hover:bg-gray-100"
|
|
title={`Sort by ${sortBy === "alphabetical" ? "traffic" : "alphabetical"}`}
|
|
data-testid="topics-sort-toggle"
|
|
>
|
|
<ArrowUpDown className="h-4 w-4 text-gray-500" />
|
|
</button>
|
|
</div>
|
|
<div className="space-y-2">
|
|
{getOutletsByCategory("Topics").map((outlet) => (
|
|
<Card
|
|
key={outlet.id}
|
|
className="hover:shadow-md transition-shadow cursor-pointer bg-white"
|
|
onClick={() => setSelectedOutlet(outlet)}
|
|
data-testid={`admin-card-outlet-${outlet.id}`}
|
|
>
|
|
<CardContent className="p-2">
|
|
<div className="flex items-center space-x-2">
|
|
<div className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center overflow-hidden">
|
|
{outlet.imageUrl ? (
|
|
<img
|
|
src={outlet.imageUrl}
|
|
alt={outlet.name}
|
|
className="w-full h-full object-cover"
|
|
style={{objectPosition: 'center top'}}
|
|
/>
|
|
) : (
|
|
<div className="w-6 h-6 bg-gray-300 rounded-full flex items-center justify-center">
|
|
<span className="text-gray-600 text-sm font-medium">
|
|
{outlet.name.charAt(0)}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="font-medium text-gray-900 truncate">
|
|
{outlet.name}
|
|
</h3>
|
|
<p className="text-sm text-gray-500 truncate">
|
|
{outlet.description || "Media Outlet"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Companies Section */}
|
|
<div data-testid="admin-section-companies">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<h2 className="text-xl font-bold text-gray-900">
|
|
Companies
|
|
<span className="text-gray-400 text-base ml-2">({getOutletsByCategory("Companies").length})</span>
|
|
</h2>
|
|
<button
|
|
onClick={() => setSortBy(sortBy === "alphabetical" ? "traffic" : "alphabetical")}
|
|
className="p-1 rounded hover:bg-gray-100"
|
|
title={`Sort by ${sortBy === "alphabetical" ? "traffic" : "alphabetical"}`}
|
|
data-testid="companies-sort-toggle"
|
|
>
|
|
<ArrowUpDown className="h-4 w-4 text-gray-500" />
|
|
</button>
|
|
</div>
|
|
<div className="space-y-2">
|
|
{getOutletsByCategory("Companies").map((outlet) => (
|
|
<Card
|
|
key={outlet.id}
|
|
className="hover:shadow-md transition-shadow cursor-pointer bg-white"
|
|
onClick={() => setSelectedOutlet(outlet)}
|
|
data-testid={`admin-card-outlet-${outlet.id}`}
|
|
>
|
|
<CardContent className="p-2">
|
|
<div className="flex items-center space-x-2">
|
|
<div className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center overflow-hidden">
|
|
{outlet.imageUrl ? (
|
|
<img
|
|
src={outlet.imageUrl}
|
|
alt={outlet.name}
|
|
className="w-full h-full object-cover"
|
|
style={{objectPosition: 'center top'}}
|
|
/>
|
|
) : (
|
|
<div className="w-6 h-6 bg-gray-300 rounded-full flex items-center justify-center">
|
|
<span className="text-gray-600 text-sm font-medium">
|
|
{outlet.name.charAt(0)}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="font-medium text-gray-900 truncate">
|
|
{outlet.name}
|
|
</h3>
|
|
<p className="text-sm text-gray-500 truncate">
|
|
{outlet.description || "Media Outlet"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{filteredOutlets.length === 0 && searchTerm && (
|
|
<div className="text-center py-12">
|
|
<div className="text-gray-400 text-lg mb-2">No results found</div>
|
|
<div className="text-gray-500 text-sm">Try a different search term</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{/* Selected Outlet Modal/Preview */}
|
|
{selectedOutlet && (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div className="bg-white rounded-lg p-6 max-w-md w-full mx-4">
|
|
<div className="flex items-center space-x-4 mb-4">
|
|
{selectedOutlet.imageUrl ? (
|
|
<img
|
|
src={selectedOutlet.imageUrl}
|
|
alt={selectedOutlet.name}
|
|
className="w-16 h-16 rounded-full object-cover"
|
|
/>
|
|
) : (
|
|
<div className="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center">
|
|
<span className="text-gray-600 text-lg font-medium">
|
|
{selectedOutlet.name.charAt(0)}
|
|
</span>
|
|
</div>
|
|
)}
|
|
<div>
|
|
<h2 className="text-xl font-bold text-gray-900">{selectedOutlet.name}</h2>
|
|
<p className="text-sm text-gray-500">{selectedOutlet.description}</p>
|
|
<span className="inline-block px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full mt-1">
|
|
{selectedOutlet.category}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex space-x-3">
|
|
<Button
|
|
className="flex-1"
|
|
onClick={() => {
|
|
setManagingOutlet(selectedOutlet);
|
|
setSelectedOutlet(null);
|
|
}}
|
|
data-testid="button-manage-outlet"
|
|
>
|
|
Manage
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setSelectedOutlet(null)}
|
|
data-testid="button-cancel"
|
|
>
|
|
Cancel
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|