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