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

client/src/App.tsx

@@ -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} />

client/src/components/MainContent.tsx

@@ -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) => (

client/src/pages/MediaOutlet.tsx

@@ -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>

client/src/pages/Report.tsx

@@ -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>
+  );
+}