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
218
client/src/pages/AdminDashboard.tsx
Normal file
218
client/src/pages/AdminDashboard.tsx
Normal file
@ -0,0 +1,218 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { useAuth } from "@/hooks/useAuth";
|
||||
import { useEffect } from "react";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { isUnauthorizedError } from "@/lib/authUtils";
|
||||
|
||||
export default function AdminDashboard() {
|
||||
const { user, isLoading } = useAuth();
|
||||
const { toast } = useToast();
|
||||
|
||||
// Redirect if not authenticated or not admin
|
||||
useEffect(() => {
|
||||
if (!isLoading && (!user || user.role !== 'admin')) {
|
||||
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,
|
||||
});
|
||||
|
||||
// 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]);
|
||||
|
||||
const handleLogout = () => {
|
||||
window.location.href = "/api/logout";
|
||||
};
|
||||
|
||||
if (isLoading || !user || user.role !== 'admin') {
|
||||
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">• 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">Admin Dashboard</h1>
|
||||
<p className="text-muted-foreground">Manage media outlets and content</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">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>
|
||||
|
||||
{/* Admin Actions */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">Content Management</h3>
|
||||
<div className="space-y-3">
|
||||
<Button
|
||||
className="w-full justify-start"
|
||||
variant="outline"
|
||||
data-testid="button-create-editorial"
|
||||
>
|
||||
<i className="fas fa-plus mr-3 text-primary"></i>
|
||||
Create Featured Editorial
|
||||
</Button>
|
||||
<Button
|
||||
className="w-full justify-start"
|
||||
variant="outline"
|
||||
data-testid="button-pin-comments"
|
||||
>
|
||||
<i className="fas fa-thumbtack mr-3 text-chart-2"></i>
|
||||
Pin Comments
|
||||
</Button>
|
||||
<Button
|
||||
className="w-full justify-start"
|
||||
variant="outline"
|
||||
data-testid="button-manage-predictions"
|
||||
>
|
||||
<i className="fas fa-chart-bar mr-3 text-chart-1"></i>
|
||||
Manage Prediction Markets
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">Quick Actions</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between p-3 border border-border rounded-lg">
|
||||
<div>
|
||||
<p className="font-medium">Featured Article Priority</p>
|
||||
<p className="text-sm text-muted-foreground">Manage article visibility</p>
|
||||
</div>
|
||||
<Button size="sm" data-testid="button-manage-featured">
|
||||
Manage
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center justify-between p-3 border border-border rounded-lg">
|
||||
<div>
|
||||
<p className="font-medium">Auction Controls</p>
|
||||
<p className="text-sm text-muted-foreground">Monitor active auctions</p>
|
||||
</div>
|
||||
<Button size="sm" data-testid="button-view-auctions">
|
||||
<a href="/auctions">View</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
163
client/src/pages/Article.tsx
Normal file
163
client/src/pages/Article.tsx
Normal file
@ -0,0 +1,163 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useRoute } from "wouter";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import PredictionMarketCard from "@/components/PredictionMarketCard";
|
||||
import type { Article, PredictionMarket } from "@shared/schema";
|
||||
|
||||
export default function Article() {
|
||||
const [, params] = useRoute("/articles/:slug");
|
||||
|
||||
const { data: article, isLoading: articleLoading } = useQuery<Article>({
|
||||
queryKey: ["/api/articles", params?.slug],
|
||||
enabled: !!params?.slug
|
||||
});
|
||||
|
||||
const { data: predictionMarkets = [], isLoading: marketsLoading } = useQuery<PredictionMarket[]>({
|
||||
queryKey: ["/api/prediction-markets", { articleId: article?.id }],
|
||||
enabled: !!article?.id
|
||||
});
|
||||
|
||||
if (articleLoading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<div className="max-w-4xl mx-auto px-6 py-8">
|
||||
<div className="animate-pulse">
|
||||
<div className="h-8 bg-muted rounded w-2/3 mb-4"></div>
|
||||
<div className="h-64 bg-muted rounded mb-6"></div>
|
||||
<div className="space-y-4">
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<div key={i} className="h-4 bg-muted rounded"></div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!article) {
|
||||
return (
|
||||
<div className="min-h-screen bg-background flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h1 className="text-2xl font-bold mb-2">Article Not Found</h1>
|
||||
<p className="text-muted-foreground mb-4">The article you're looking for doesn't exist.</p>
|
||||
<Button onClick={() => window.history.back()}>Go Back</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const formatDate = (date: string | Date) => {
|
||||
const d = new Date(date);
|
||||
const now = new Date();
|
||||
const diffTime = Math.abs(now.getTime() - d.getTime());
|
||||
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
||||
|
||||
if (diffDays === 1) return "1 day ago";
|
||||
if (diffDays < 7) return `${diffDays} days ago`;
|
||||
return d.toLocaleDateString();
|
||||
};
|
||||
|
||||
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>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button variant="ghost" onClick={() => window.history.back()}>
|
||||
← Back
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => window.location.href = "/"}>
|
||||
Home
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-4xl mx-auto px-6 py-8">
|
||||
{/* Article Header */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center space-x-4 mb-6">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&w=48&h=48&fit=crop&crop=face"
|
||||
alt="Author"
|
||||
className="w-12 h-12 rounded-full object-cover"
|
||||
/>
|
||||
<div>
|
||||
<h2 className="text-xl font-bold">Alex Karp</h2>
|
||||
<p className="text-sm text-muted-foreground">CEO of Palantir</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Article Content */}
|
||||
<article>
|
||||
{article.imageUrl && (
|
||||
<img
|
||||
src={article.imageUrl}
|
||||
alt={article.title}
|
||||
className="w-full h-64 object-cover rounded-lg mb-6"
|
||||
/>
|
||||
)}
|
||||
|
||||
<h1 className="text-3xl font-bold mb-4">{article.title}</h1>
|
||||
|
||||
<div className="flex items-center space-x-4 mb-6 text-sm text-muted-foreground">
|
||||
<span>{formatDate(article.publishedAt!)}</span>
|
||||
<span>•</span>
|
||||
{article.tags?.map((tag) => (
|
||||
<Badge key={tag} variant="secondary">
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="prose prose-lg max-w-none text-foreground mb-8">
|
||||
{article.excerpt && (
|
||||
<p className="text-lg text-muted-foreground mb-6 font-medium">
|
||||
{article.excerpt}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="whitespace-pre-wrap">
|
||||
{article.content}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{/* Related Prediction Markets */}
|
||||
{predictionMarkets.length > 0 && (
|
||||
<div className="mt-12 border-t border-border pt-8">
|
||||
<h3 className="text-xl font-bold mb-6">Related Prediction Markets</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
{predictionMarkets.slice(0, 3).map((market) => (
|
||||
<PredictionMarketCard key={market.id} market={market} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{predictionMarkets.length > 3 && (
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full mt-6"
|
||||
data-testid="button-view-all-predictions"
|
||||
>
|
||||
View All Related Predictions
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
412
client/src/pages/Auctions.tsx
Normal file
412
client/src/pages/Auctions.tsx
Normal file
@ -0,0 +1,412 @@
|
||||
import { useState } from "react";
|
||||
import { useQuery, useMutation } from "@tanstack/react-query";
|
||||
import { queryClient } from "@/lib/queryClient";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||
import { useAuth } from "@/hooks/useAuth";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { apiRequest } from "@/lib/queryClient";
|
||||
import { isUnauthorizedError } from "@/lib/authUtils";
|
||||
import AuctionCard from "@/components/AuctionCard";
|
||||
import type { Auction, MediaOutlet } from "@shared/schema";
|
||||
|
||||
export default function Auctions() {
|
||||
const { user, isAuthenticated } = useAuth();
|
||||
const { toast } = useToast();
|
||||
const [showBidModal, setShowBidModal] = useState(false);
|
||||
const [selectedAuction, setSelectedAuction] = useState<Auction | null>(null);
|
||||
const [bidForm, setBidForm] = useState({
|
||||
amount: "",
|
||||
qualityScore: ""
|
||||
});
|
||||
|
||||
const { data: auctions = [], isLoading: auctionsLoading } = useQuery<Auction[]>({
|
||||
queryKey: ["/api/auctions"],
|
||||
});
|
||||
|
||||
const { data: mediaOutlets = [] } = useQuery<MediaOutlet[]>({
|
||||
queryKey: ["/api/media-outlets"],
|
||||
});
|
||||
|
||||
const bidMutation = useMutation({
|
||||
mutationFn: async (data: { auctionId: string; amount: string; qualityScore: number }) => {
|
||||
await apiRequest("POST", `/api/auctions/${data.auctionId}/bid`, {
|
||||
amount: data.amount,
|
||||
qualityScore: data.qualityScore
|
||||
});
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["/api/auctions"] });
|
||||
toast({
|
||||
title: "Success",
|
||||
description: "Your bid has been placed successfully.",
|
||||
});
|
||||
setShowBidModal(false);
|
||||
setBidForm({ amount: "", qualityScore: "" });
|
||||
},
|
||||
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 place bid. Please try again.",
|
||||
variant: "destructive"
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const handleBidClick = (auction: Auction) => {
|
||||
if (!isAuthenticated) {
|
||||
toast({
|
||||
title: "Login Required",
|
||||
description: "Please log in to place a bid.",
|
||||
variant: "destructive"
|
||||
});
|
||||
setTimeout(() => {
|
||||
window.location.href = "/api/login";
|
||||
}, 1000);
|
||||
return;
|
||||
}
|
||||
setSelectedAuction(auction);
|
||||
setShowBidModal(true);
|
||||
};
|
||||
|
||||
const handleBidSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!selectedAuction) return;
|
||||
|
||||
const amount = parseFloat(bidForm.amount);
|
||||
const qualityScore = parseInt(bidForm.qualityScore);
|
||||
const currentBid = parseFloat(selectedAuction.currentBid || "0");
|
||||
|
||||
if (amount <= currentBid) {
|
||||
toast({
|
||||
title: "Invalid Bid",
|
||||
description: `Bid must be higher than current bid of $${currentBid}`,
|
||||
variant: "destructive"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (qualityScore < 1 || qualityScore > 100) {
|
||||
toast({
|
||||
title: "Invalid Quality Score",
|
||||
description: "Quality score must be between 1 and 100",
|
||||
variant: "destructive"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
bidMutation.mutate({
|
||||
auctionId: selectedAuction.id,
|
||||
amount: bidForm.amount,
|
||||
qualityScore
|
||||
});
|
||||
};
|
||||
|
||||
const getMediaOutletName = (mediaOutletId: string) => {
|
||||
const outlet = mediaOutlets.find(o => o.id === mediaOutletId);
|
||||
return outlet?.name || "Unknown Outlet";
|
||||
};
|
||||
|
||||
const formatPrice = (price: string) => {
|
||||
const num = parseFloat(price);
|
||||
return `$${num.toLocaleString()}`;
|
||||
};
|
||||
|
||||
const getTimeRemaining = (endDate: string | Date) => {
|
||||
const end = new Date(endDate);
|
||||
const now = new Date();
|
||||
const diff = end.getTime() - now.getTime();
|
||||
|
||||
if (diff <= 0) return "Ended";
|
||||
|
||||
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
||||
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
|
||||
|
||||
if (days > 0) return `${days}d ${hours}h`;
|
||||
if (hours > 0) return `${hours}h ${minutes}m`;
|
||||
return `${minutes}m`;
|
||||
};
|
||||
|
||||
const getStatusBadge = (auction: Auction) => {
|
||||
const timeRemaining = getTimeRemaining(auction.endDate);
|
||||
if (timeRemaining === "Ended") return { text: "Ended", variant: "secondary" as const };
|
||||
|
||||
const end = new Date(auction.endDate);
|
||||
const now = new Date();
|
||||
const hoursLeft = (end.getTime() - now.getTime()) / (1000 * 60 * 60);
|
||||
|
||||
if (hoursLeft <= 3) return { text: "Ending Soon", variant: "destructive" as const };
|
||||
return { text: "Active", variant: "default" as const };
|
||||
};
|
||||
|
||||
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-8">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<nav className="hidden md:flex space-x-6">
|
||||
<a href="/" className="text-muted-foreground hover:text-foreground transition-colors">Home</a>
|
||||
<a href="/auctions" className="text-foreground hover:text-primary transition-colors">Auctions</a>
|
||||
<a href="#" className="text-muted-foreground hover:text-foreground transition-colors">Predictions</a>
|
||||
{(user?.role === 'admin' || user?.role === 'superadmin') && (
|
||||
<a href={user.role === 'admin' ? '/admin' : '/superadmin'} className="text-muted-foreground hover:text-foreground transition-colors">
|
||||
Dashboard
|
||||
</a>
|
||||
)}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search auctions..."
|
||||
className="w-64"
|
||||
data-testid="input-search"
|
||||
/>
|
||||
<i className="fas fa-search absolute right-3 top-2.5 text-muted-foreground"></i>
|
||||
</div>
|
||||
|
||||
{isAuthenticated ? (
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-sm text-muted-foreground">Welcome, {user?.firstName || 'User'}</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => window.location.href = "/api/logout"}
|
||||
>
|
||||
Logout
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Button onClick={() => window.location.href = "/api/login"}>
|
||||
Login
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-7xl mx-auto px-6 py-8">
|
||||
{/* Page Header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold mb-4">Media Outlet Auctions</h1>
|
||||
<p className="text-lg text-muted-foreground mb-6">
|
||||
Bid for exclusive editorial rights and content management privileges.
|
||||
Based on competitive bidding similar to advertising platforms, combining bid amount with quality scores.
|
||||
</p>
|
||||
|
||||
{/* Auction Explanation */}
|
||||
<Card className="mb-6">
|
||||
<CardContent className="p-6">
|
||||
<h3 className="text-lg font-semibold mb-3">How Auctions Work</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
|
||||
<div>
|
||||
<h4 className="font-medium text-primary mb-2">Bid Amount</h4>
|
||||
<p className="text-muted-foreground">Your maximum willingness to pay for editorial control, similar to keyword bidding in advertising.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-chart-2 mb-2">Quality Score</h4>
|
||||
<p className="text-muted-foreground">Platform assessment of your content quality, engagement history, and editorial standards.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-chart-1 mb-2">Final Ranking</h4>
|
||||
<p className="text-muted-foreground">Combination of bid amount and quality score determines winning position and actual cost.</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Auctions Grid */}
|
||||
{auctionsLoading ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<Card key={i}>
|
||||
<CardContent className="p-6 animate-pulse">
|
||||
<div className="h-20 bg-muted rounded mb-4"></div>
|
||||
<div className="space-y-3">
|
||||
<div className="h-4 bg-muted rounded"></div>
|
||||
<div className="h-4 bg-muted rounded"></div>
|
||||
<div className="h-4 bg-muted rounded"></div>
|
||||
</div>
|
||||
<div className="h-10 bg-muted rounded mt-4"></div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
) : auctions.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="p-12 text-center">
|
||||
<i className="fas fa-gavel text-4xl text-muted-foreground mb-4"></i>
|
||||
<h3 className="text-xl font-semibold mb-2">No Active Auctions</h3>
|
||||
<p className="text-muted-foreground">
|
||||
There are currently no active media outlet auctions. Check back later for new opportunities!
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{auctions.map((auction) => {
|
||||
const status = getStatusBadge(auction);
|
||||
return (
|
||||
<Card key={auction.id} data-testid={`card-auction-${auction.id}`}>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg line-clamp-1">{auction.title}</h3>
|
||||
<p className="text-sm text-muted-foreground mb-1">
|
||||
{getMediaOutletName(auction.mediaOutletId)}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground line-clamp-2">{auction.description}</p>
|
||||
</div>
|
||||
<Badge variant={status.variant}>{status.text}</Badge>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 mb-4">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-muted-foreground">Current Bid:</span>
|
||||
<span className="font-semibold">{formatPrice(auction.currentBid || "0")}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-muted-foreground">Quality Score:</span>
|
||||
<span className="font-semibold text-chart-2">{auction.qualityScore || 0}/100</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-muted-foreground">Duration:</span>
|
||||
<span className="font-semibold">{auction.duration || 30} days</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-muted-foreground">Time Remaining:</span>
|
||||
<span className={`font-semibold ${status.variant === 'destructive' ? 'text-destructive' : ''}`}>
|
||||
{getTimeRemaining(auction.endDate)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className="w-full"
|
||||
onClick={() => handleBidClick(auction)}
|
||||
disabled={getTimeRemaining(auction.endDate) === "Ended"}
|
||||
data-testid={`button-bid-${auction.id}`}
|
||||
>
|
||||
{getTimeRemaining(auction.endDate) === "Ended" ? "Auction Ended" : "Place Bid"}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
|
||||
{/* Bid Modal */}
|
||||
<Dialog open={showBidModal} onOpenChange={setShowBidModal}>
|
||||
<DialogContent data-testid="modal-bid">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Place Bid</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{selectedAuction && (
|
||||
<div className="space-y-4">
|
||||
<div className="bg-muted rounded-lg p-4">
|
||||
<h4 className="font-semibold mb-2">{selectedAuction.title}</h4>
|
||||
<p className="text-sm text-muted-foreground mb-3">{selectedAuction.description}</p>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span>Current Bid:</span>
|
||||
<span className="font-semibold">{formatPrice(selectedAuction.currentBid || "0")}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleBidSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Bid Amount ($)</label>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.01"
|
||||
min={parseFloat(selectedAuction.currentBid || "0") + 1}
|
||||
value={bidForm.amount}
|
||||
onChange={(e) => setBidForm(prev => ({ ...prev, amount: e.target.value }))}
|
||||
placeholder={`Minimum: $${(parseFloat(selectedAuction.currentBid || "0") + 1).toFixed(2)}`}
|
||||
required
|
||||
data-testid="input-bid-amount"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Must be higher than current bid
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Quality Score (1-100)</label>
|
||||
<Input
|
||||
type="number"
|
||||
min="1"
|
||||
max="100"
|
||||
value={bidForm.qualityScore}
|
||||
onChange={(e) => setBidForm(prev => ({ ...prev, qualityScore: e.target.value }))}
|
||||
placeholder="Your self-assessed quality score"
|
||||
required
|
||||
data-testid="input-quality-score"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Based on your content quality, engagement, and editorial standards
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-accent/50 rounded-lg p-3 text-sm">
|
||||
<h5 className="font-medium mb-1">Bidding Formula</h5>
|
||||
<p className="text-muted-foreground">
|
||||
Your ranking = (Bid Amount × Quality Score) / 100. Higher scores win at lower costs.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-2">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={bidMutation.isPending}
|
||||
data-testid="button-submit-bid"
|
||||
>
|
||||
{bidMutation.isPending ? "Placing Bid..." : "Place Bid"}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => setShowBidModal(false)}
|
||||
data-testid="button-cancel-bid"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
162
client/src/pages/Home.tsx
Normal file
162
client/src/pages/Home.tsx
Normal file
@ -0,0 +1,162 @@
|
||||
import { useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { useAuth } from "@/hooks/useAuth";
|
||||
import CategoryTabs from "@/components/CategoryTabs";
|
||||
import MediaOutletCard from "@/components/MediaOutletCard";
|
||||
import AuctionCard from "@/components/AuctionCard";
|
||||
import type { MediaOutlet, Auction } from "@shared/schema";
|
||||
|
||||
export default function Home() {
|
||||
const { user } = useAuth();
|
||||
const [selectedCategory, setSelectedCategory] = useState("people");
|
||||
|
||||
const { data: mediaOutlets = [], isLoading: outletsLoading } = useQuery<MediaOutlet[]>({
|
||||
queryKey: ["/api/media-outlets", selectedCategory],
|
||||
});
|
||||
|
||||
const { data: auctions = [], isLoading: auctionsLoading } = useQuery<Auction[]>({
|
||||
queryKey: ["/api/auctions"],
|
||||
});
|
||||
|
||||
const handleLogout = () => {
|
||||
window.location.href = "/api/logout";
|
||||
};
|
||||
|
||||
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-8">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<nav className="hidden md:flex space-x-6">
|
||||
<a href="/" className="text-foreground hover:text-primary transition-colors">Home</a>
|
||||
<a href="/auctions" className="text-muted-foreground hover:text-foreground transition-colors">Auctions</a>
|
||||
<a href="#" className="text-muted-foreground hover:text-foreground transition-colors">Predictions</a>
|
||||
{(user?.role === 'admin' || user?.role === 'superadmin') && (
|
||||
<a href={user.role === 'admin' ? '/admin' : '/superadmin'} className="text-muted-foreground hover:text-foreground transition-colors">
|
||||
Dashboard
|
||||
</a>
|
||||
)}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search media outlets, topics..."
|
||||
className="w-64"
|
||||
data-testid="input-search"
|
||||
/>
|
||||
<i className="fas fa-search absolute right-3 top-2.5 text-muted-foreground"></i>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-sm text-muted-foreground">Welcome, {user?.firstName || 'User'}</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleLogout}
|
||||
data-testid="button-logout"
|
||||
>
|
||||
Logout
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-7xl mx-auto px-6 py-8">
|
||||
{/* Hero Section */}
|
||||
<div className="gradient-bg rounded-2xl p-8 mb-8 text-white">
|
||||
<div className="max-w-3xl">
|
||||
<h1 className="text-4xl font-bold mb-4">Media Intelligence & Prediction Markets</h1>
|
||||
<p className="text-xl opacity-90 mb-6">Access premium media outlets across People, Topics, and Companies. Participate in prediction markets and bid for exclusive editorial rights.</p>
|
||||
<div className="flex space-x-4">
|
||||
<Button className="bg-white text-primary hover:bg-opacity-90" data-testid="button-explore">
|
||||
Explore Media Outlets
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="border-white text-white hover:bg-white hover:text-primary"
|
||||
data-testid="button-auctions"
|
||||
>
|
||||
<a href="/auctions">View Active Auctions</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Category Tabs */}
|
||||
<CategoryTabs
|
||||
selectedCategory={selectedCategory}
|
||||
onCategoryChange={setSelectedCategory}
|
||||
/>
|
||||
|
||||
{/* Media Outlets Grid */}
|
||||
<div className="mb-12">
|
||||
{outletsLoading ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||
{Array.from({ length: 8 }).map((_, i) => (
|
||||
<div key={i} className="bg-card border border-border rounded-xl p-6 animate-pulse">
|
||||
<div className="h-12 bg-muted rounded mb-4"></div>
|
||||
<div className="h-4 bg-muted rounded mb-2"></div>
|
||||
<div className="h-4 bg-muted rounded w-2/3"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||
{mediaOutlets.map((outlet) => (
|
||||
<MediaOutletCard key={outlet.id} outlet={outlet} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Current Auctions Section */}
|
||||
<div className="mt-12">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-2xl font-bold">Active Media Outlet Auctions</h2>
|
||||
<Button variant="ghost" className="text-primary hover:text-primary/80 font-semibold">
|
||||
<a href="/auctions">View All Auctions</a>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{auctionsLoading ? (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{Array.from({ length: 2 }).map((_, i) => (
|
||||
<div key={i} className="bg-card border border-border rounded-xl p-6 animate-pulse">
|
||||
<div className="h-6 bg-muted rounded mb-4"></div>
|
||||
<div className="space-y-3">
|
||||
<div className="h-4 bg-muted rounded"></div>
|
||||
<div className="h-4 bg-muted rounded"></div>
|
||||
<div className="h-4 bg-muted rounded"></div>
|
||||
</div>
|
||||
<div className="h-10 bg-muted rounded mt-4"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{auctions.slice(0, 2).map((auction) => (
|
||||
<AuctionCard key={auction.id} auction={auction} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
227
client/src/pages/Landing.tsx
Normal file
227
client/src/pages/Landing.tsx
Normal file
@ -0,0 +1,227 @@
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { apiRequest } from "@/lib/queryClient";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
|
||||
export default function Landing() {
|
||||
const [showLoginModal, setShowLoginModal] = useState(false);
|
||||
const [showRequestModal, setShowRequestModal] = useState(false);
|
||||
const [requestForm, setRequestForm] = useState({
|
||||
name: "",
|
||||
category: "people",
|
||||
description: ""
|
||||
});
|
||||
const { toast } = useToast();
|
||||
|
||||
const requestMutation = useMutation({
|
||||
mutationFn: async (data: typeof requestForm) => {
|
||||
await apiRequest("POST", "/api/media-outlet-requests", data);
|
||||
},
|
||||
onSuccess: () => {
|
||||
toast({
|
||||
title: "Success",
|
||||
description: "Your media outlet request has been submitted for review.",
|
||||
});
|
||||
setShowRequestModal(false);
|
||||
setRequestForm({ name: "", category: "people", description: "" });
|
||||
},
|
||||
onError: () => {
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Failed to submit request. Please try again.",
|
||||
variant: "destructive"
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const handleLogin = () => {
|
||||
window.location.href = "/api/login";
|
||||
};
|
||||
|
||||
const handleRequestSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
requestMutation.mutate(requestForm);
|
||||
};
|
||||
|
||||
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>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search media outlets, topics..."
|
||||
className="w-64"
|
||||
data-testid="input-search"
|
||||
/>
|
||||
<i className="fas fa-search absolute right-3 top-2.5 text-muted-foreground"></i>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleLogin}
|
||||
data-testid="button-login"
|
||||
>
|
||||
Login
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={() => setShowRequestModal(true)}
|
||||
data-testid="button-request-outlet"
|
||||
>
|
||||
Request Media Outlet
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Hero Section */}
|
||||
<div className="gradient-bg rounded-2xl p-8 mb-8 text-white mx-6 mt-8">
|
||||
<div className="max-w-3xl">
|
||||
<h1 className="text-4xl font-bold mb-4">Media Intelligence & Prediction Markets</h1>
|
||||
<p className="text-xl opacity-90 mb-6">Access premium media outlets across People, Topics, and Companies. Participate in prediction markets and bid for exclusive editorial rights.</p>
|
||||
<div className="flex space-x-4">
|
||||
<Button
|
||||
className="bg-white text-primary hover:bg-opacity-90"
|
||||
onClick={handleLogin}
|
||||
data-testid="button-explore"
|
||||
>
|
||||
Explore Media Outlets
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="border-white text-white hover:bg-white hover:text-primary"
|
||||
onClick={handleLogin}
|
||||
data-testid="button-auctions"
|
||||
>
|
||||
View Active Auctions
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Features Section */}
|
||||
<div className="max-w-7xl mx-auto px-6 py-12">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-bold mb-4">Comprehensive Media Platform</h2>
|
||||
<p className="text-xl text-muted-foreground">Discover insights across three key categories</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<Card className="card-hover">
|
||||
<CardContent className="p-6">
|
||||
<div className="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center mb-4">
|
||||
<i className="fas fa-users text-primary text-xl"></i>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold mb-3">People</h3>
|
||||
<p className="text-muted-foreground mb-4">Follow insights from influential leaders across technology, finance, and politics.</p>
|
||||
<p className="text-sm text-primary font-semibold">24 Influential Figures</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="card-hover">
|
||||
<CardContent className="p-6">
|
||||
<div className="w-12 h-12 bg-chart-2/20 rounded-lg flex items-center justify-center mb-4">
|
||||
<i className="fas fa-hashtag text-chart-2 text-xl"></i>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold mb-3">Topics</h3>
|
||||
<p className="text-muted-foreground mb-4">Stay updated on trending subjects from crypto to AI, regulation to innovation.</p>
|
||||
<p className="text-sm text-chart-2 font-semibold">20 Key Topics</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="card-hover">
|
||||
<CardContent className="p-6">
|
||||
<div className="w-12 h-12 bg-chart-1/20 rounded-lg flex items-center justify-center mb-4">
|
||||
<i className="fas fa-building text-chart-1 text-xl"></i>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold mb-3">Companies</h3>
|
||||
<p className="text-muted-foreground mb-4">Track major corporations shaping the future of technology and finance.</p>
|
||||
<p className="text-sm text-chart-1 font-semibold">27 Leading Companies</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Request Modal */}
|
||||
<Dialog open={showRequestModal} onOpenChange={setShowRequestModal}>
|
||||
<DialogContent data-testid="modal-request">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Request New Media Outlet</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleRequestSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Name</label>
|
||||
<Input
|
||||
value={requestForm.name}
|
||||
onChange={(e) => setRequestForm(prev => ({ ...prev, name: e.target.value }))}
|
||||
placeholder="Enter outlet name"
|
||||
required
|
||||
data-testid="input-outlet-name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Category</label>
|
||||
<select
|
||||
value={requestForm.category}
|
||||
onChange={(e) => setRequestForm(prev => ({ ...prev, category: e.target.value }))}
|
||||
className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
data-testid="select-category"
|
||||
>
|
||||
<option value="people">People</option>
|
||||
<option value="topics">Topics</option>
|
||||
<option value="companies">Companies</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Description</label>
|
||||
<textarea
|
||||
value={requestForm.description}
|
||||
onChange={(e) => setRequestForm(prev => ({ ...prev, description: e.target.value }))}
|
||||
placeholder="Describe why this outlet should be added"
|
||||
className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
rows={3}
|
||||
data-testid="textarea-description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-2">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={requestMutation.isPending}
|
||||
data-testid="button-submit-request"
|
||||
>
|
||||
{requestMutation.isPending ? "Submitting..." : "Submit Request"}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => setShowRequestModal(false)}
|
||||
data-testid="button-cancel-request"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
176
client/src/pages/MediaOutlet.tsx
Normal file
176
client/src/pages/MediaOutlet.tsx
Normal file
@ -0,0 +1,176 @@
|
||||
import { useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useRoute } from "wouter";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import ArticleCard from "@/components/ArticleCard";
|
||||
import type { MediaOutlet, Article } from "@shared/schema";
|
||||
|
||||
export default function MediaOutlet() {
|
||||
const [, params] = useRoute("/media/:slug");
|
||||
const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
|
||||
|
||||
const { data: outlet, isLoading: outletLoading } = useQuery<MediaOutlet>({
|
||||
queryKey: ["/api/media-outlets", params?.slug],
|
||||
enabled: !!params?.slug
|
||||
});
|
||||
|
||||
const { data: articles = [], isLoading: articlesLoading } = useQuery<Article[]>({
|
||||
queryKey: ["/api/media-outlets", outlet?.id, "articles"],
|
||||
enabled: !!outlet?.id
|
||||
});
|
||||
|
||||
if (outletLoading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<div className="max-w-7xl mx-auto px-6 py-8">
|
||||
<div className="animate-pulse">
|
||||
<div className="h-8 bg-muted rounded w-1/3 mb-4"></div>
|
||||
<div className="h-4 bg-muted rounded w-2/3 mb-8"></div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<div key={i} className="h-64 bg-muted rounded-xl"></div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!outlet) {
|
||||
return (
|
||||
<div className="min-h-screen bg-background flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h1 className="text-2xl font-bold mb-2">Media Outlet Not Found</h1>
|
||||
<p className="text-muted-foreground mb-4">The media outlet you're looking for doesn't exist.</p>
|
||||
<Button onClick={() => window.history.back()}>Go Back</Button>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button variant="ghost" onClick={() => window.history.back()}>
|
||||
← Back
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => window.location.href = "/"}>
|
||||
Home
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-7xl mx-auto px-6 py-8">
|
||||
{/* Outlet Header */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-start space-x-6 mb-6">
|
||||
{outlet.imageUrl ? (
|
||||
<img
|
||||
src={outlet.imageUrl}
|
||||
alt={outlet.name}
|
||||
className="w-20 h-20 rounded-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-20 h-20 bg-primary/20 rounded-full flex items-center justify-center">
|
||||
<span className="text-primary font-bold text-2xl">
|
||||
{outlet.name.charAt(0)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex-1">
|
||||
<h1 className="text-3xl font-bold mb-2">{outlet.name}</h1>
|
||||
<p className="text-lg text-muted-foreground mb-4">{outlet.description}</p>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Badge variant="secondary" className="capitalize">
|
||||
{outlet.category}
|
||||
</Badge>
|
||||
{outlet.tags?.map((tag) => (
|
||||
<Badge key={tag} variant="outline">
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Articles Section */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-2xl font-bold">Latest Articles</h2>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant={viewMode === "grid" ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => setViewMode("grid")}
|
||||
data-testid="button-grid-view"
|
||||
>
|
||||
<i className="fas fa-th mr-2"></i>
|
||||
Grid
|
||||
</Button>
|
||||
<Button
|
||||
variant={viewMode === "list" ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => setViewMode("list")}
|
||||
data-testid="button-list-view"
|
||||
>
|
||||
<i className="fas fa-list mr-2"></i>
|
||||
List
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{articlesLoading ? (
|
||||
<div className={`grid gap-6 ${viewMode === "grid" ? "grid-cols-1 md:grid-cols-2 lg:grid-cols-3" : "grid-cols-1"}`}>
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<div key={i} className="bg-card border border-border rounded-xl p-6 animate-pulse">
|
||||
<div className="h-40 bg-muted rounded mb-4"></div>
|
||||
<div className="h-6 bg-muted rounded mb-2"></div>
|
||||
<div className="h-4 bg-muted rounded w-2/3"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : articles.length > 0 ? (
|
||||
<div className={`grid gap-6 ${viewMode === "grid" ? "grid-cols-1 md:grid-cols-2 lg:grid-cols-3" : "grid-cols-1"}`}>
|
||||
{articles.map((article) => (
|
||||
<ArticleCard
|
||||
key={article.id}
|
||||
article={article}
|
||||
outlet={outlet}
|
||||
viewMode={viewMode}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<Card>
|
||||
<CardContent className="p-12 text-center">
|
||||
<i className="fas fa-newspaper text-4xl text-muted-foreground mb-4"></i>
|
||||
<h3 className="text-xl font-semibold mb-2">No Articles Yet</h3>
|
||||
<p className="text-muted-foreground">
|
||||
This media outlet doesn't have any published articles yet. Check back later!
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
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>
|
||||
);
|
||||
}
|
||||
21
client/src/pages/not-found.tsx
Normal file
21
client/src/pages/not-found.tsx
Normal file
@ -0,0 +1,21 @@
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { AlertCircle } from "lucide-react";
|
||||
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<div className="min-h-screen w-full flex items-center justify-center bg-gray-50">
|
||||
<Card className="w-full max-w-md mx-4">
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex mb-4 gap-2">
|
||||
<AlertCircle className="h-8 w-8 text-red-500" />
|
||||
<h1 className="text-2xl font-bold text-gray-900">404 Page Not Found</h1>
|
||||
</div>
|
||||
|
||||
<p className="mt-4 text-sm text-gray-600">
|
||||
Did you forget to add the page to the router?
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user