Add a comprehensive report page for media outlets

Introduce a new report page accessible from media outlet details, displaying comprehensive content via HTML and PPTX attachments.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 0fb68265-c270-4198-9584-3d9be9bddb41
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/0fb68265-c270-4198-9584-3d9be9bddb41/XHpsebf
This commit is contained in:
kimjaehyeon0101
2025-09-30 05:00:38 +00:00
parent e997b5895c
commit 9c3099e962
4 changed files with 106 additions and 2 deletions

View File

@ -13,6 +13,7 @@ import SuperAdminDashboard from "@/pages/SuperAdminDashboard";
import Auctions from "@/pages/Auctions";
import AuctionGuide from "@/pages/AuctionGuide";
import MediaOutletAuction from "@/pages/MediaOutletAuction";
import Report from "@/pages/Report";
import NotFound from "@/pages/not-found";
function Router() {
@ -21,6 +22,7 @@ function Router() {
return (
<Switch>
<Route path="/" component={isAuthenticated ? Home : Landing} />
<Route path="/media/:slug/report" component={Report} />
<Route path="/media/:slug/auction" component={MediaOutletAuction} />
<Route path="/media/:slug" component={MediaOutlet} />
<Route path="/articles/:slug" component={Article} />

View File

@ -99,7 +99,7 @@ export default function MainContent() {
return (
<div className="flex flex-col min-h-screen bg-gray-50">
<div className="flex-1 max-w-7xl mx-auto px-4 py-4 w-full">
<div className="flex-1 max-w-7xl mx-auto px-4 py-4 pb-8 w-full">
{isLoading ? (
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{categories.map((category) => (

View File

@ -7,7 +7,7 @@ import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Textarea } from "@/components/ui/textarea";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
import { Gavel, Clock, TrendingUp, Search, Settings, User, LogOut, Grid, List, Edit } from "lucide-react";
import { Gavel, Clock, TrendingUp, Search, Settings, User, LogOut, Grid, List, Edit, Info } from "lucide-react";
import { useAuth } from "@/hooks/useAuth";
import { useToast } from "@/hooks/use-toast";
import { queryClient, apiRequest } from "@/lib/queryClient";
@ -362,6 +362,15 @@ export default function MediaOutlet() {
<div className="flex-1">
<div className="flex items-center space-x-2 mb-2">
<h1 className="text-2xl font-bold">{outlet.name}</h1>
<Button
variant="ghost"
size="sm"
className="h-8 w-8 p-0 rounded-full hover:bg-gray-100"
onClick={() => setLocation(`/media/${params?.slug}/report`)}
data-testid="button-report"
>
<Info className="h-5 w-5 text-gray-600" />
</Button>
<Badge variant="secondary" className="capitalize">
{outlet.category}
</Badge>

View File

@ -0,0 +1,93 @@
import { useRoute, Link } from "wouter";
import { Button } from "@/components/ui/button";
import { ArrowLeft, Download, FileText, Presentation } from "lucide-react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Card, CardContent } from "@/components/ui/card";
import Footer from "@/components/Footer";
export default function Report() {
const [, params] = useRoute("/media/:slug/report");
const handleDownloadPPT = () => {
const link = document.createElement('a');
link.href = '/attached_assets/chayan asli slides_1759208079159.pptx';
link.download = 'chayan_asli_slides.pptx';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
return (
<div className="flex flex-col min-h-screen bg-gray-50">
{/* Header */}
<header className="bg-white border-b border-gray-200 sticky top-0 z-10">
<div className="max-w-7xl mx-auto px-4 py-4">
<div className="flex items-center justify-between">
<Link href={`/media/${params?.slug}`}>
<Button variant="ghost" size="sm" data-testid="button-back">
<ArrowLeft className="h-4 w-4 mr-2" />
Back to Media Outlet
</Button>
</Link>
<h1 className="text-2xl font-bold text-gray-900">Comprehensive Report</h1>
<div className="w-32"></div>
</div>
</div>
</header>
{/* Main Content */}
<main className="flex-1 max-w-7xl mx-auto px-4 py-8 w-full">
<Tabs defaultValue="report" className="w-full">
<TabsList className="grid w-full max-w-md mx-auto grid-cols-2 mb-8">
<TabsTrigger value="report" data-testid="tab-report">
<FileText className="h-4 w-4 mr-2" />
Report
</TabsTrigger>
<TabsTrigger value="slides" data-testid="tab-slides">
<Presentation className="h-4 w-4 mr-2" />
Slides
</TabsTrigger>
</TabsList>
<TabsContent value="report">
<Card className="bg-white">
<CardContent className="p-0">
<iframe
src="/attached_assets/chayan asli report_1759208054055.html"
className="w-full border-none"
style={{ minHeight: '100vh', height: 'auto' }}
title="Comprehensive Report"
data-testid="iframe-report"
/>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="slides">
<Card className="bg-white">
<CardContent className="p-12 text-center">
<Presentation className="h-24 w-24 mx-auto mb-6 text-gray-400" />
<h2 className="text-2xl font-bold text-gray-900 mb-4">
Presentation Slides
</h2>
<p className="text-gray-600 mb-8 max-w-md mx-auto">
Download the comprehensive PowerPoint presentation with detailed slides about Chayan Asli's profile, achievements, and professional journey.
</p>
<Button
onClick={handleDownloadPPT}
size="lg"
data-testid="button-download-ppt"
>
<Download className="h-5 w-5 mr-2" />
Download PowerPoint Slides
</Button>
</CardContent>
</Card>
</TabsContent>
</Tabs>
</main>
<Footer />
</div>
);
}