Add dispute evidence preview component and normalization logic

app/(dashboard)/activity-timeline-demo/page.tsx

@@ -363,7 +363,7 @@ export default function MyPage() {
                   </tr>
                   <tr>
                     <td className="py-3 px-4 text-gray-700">onLoadMore</td>
-                    <td className="py-3 px-4 text-gray-700">{"() => void"}</td>
+                    <td className="py-3 px-4 text-gray-700">{'() => void'}</td>
                     <td className="py-3 px-4 text-gray-500">undefined</td>
                     <td className="py-3 px-4 text-gray-600">Callback when user clicks load more</td>
                   </tr>

app/(dashboard)/disputes/page.tsx

@@ -3,6 +3,7 @@
 import { useState } from "react"
 import { AlertTriangle, CheckCircle, Filter, Search } from "lucide-react"
 import { DisputePanel } from "@/components/disputes/DisputePanel"
+import { DisputeEvidencePreview } from "@/components/disputes/DisputeEvidencePreview"
 import { mockDisputesByState } from "@/components/disputes/mock-data"
 import type { DisputeData, DisputeState } from "@/types/disputes"
 import { Button } from "@/components/ui/button"
@@ -25,21 +26,21 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { Label } from "@/components/ui/label"
 import { Textarea } from "@/components/ui/textarea"
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
-import { ExternalLink } from "@/components/ExternalLink"
 
-// Type for local disputes mock data
-interface LocalDispute {
-  id: string
-  eventId: string
-  eventTitle: string
-  category: string
-  submittedBy: string
-  submittedDate: string
-  reason: string
-  status: string
-  priority: string
-  evidence: string
-}
+type DisputePriority = "high" | "medium" | "low";
+
+type PendingDispute = {
+  id: string;
+  eventId: string;
+  eventTitle: string;
+  category: string;
+  submittedBy: string;
+  submittedDate: string;
+  reason: string;
+  status: string;
+  priority: DisputePriority;
+  evidence: string;
+};
 
 // Mock data for disputes
 const disputes = [
@@ -123,7 +124,7 @@ export default function DisputesPage() {
   const [searchQuery, setSearchQuery] = useState("")
   const [statusFilter, setStatusFilter] = useState("all")
   const [priorityFilter, setPriorityFilter] = useState("all")
-  const [selectedDispute, setSelectedDispute] = useState<LocalDispute | null>(null)
+  const [selectedDispute, setSelectedDispute] = useState<PendingDispute | null>(null)
   const [resolution, setResolution] = useState("")
   const [resolutionNotes, setResolutionNotes] = useState("")
   const [selectedDisputeData, setSelectedDisputeData] = useState<DisputeData>(mockDisputesByState.none)
@@ -141,7 +142,7 @@ export default function DisputesPage() {
     return matchesSearch && matchesStatus && matchesPriority
   })
 
-  const getPriorityBadge = (priority: string) => {
+  const getPriorityBadge = (priority: DisputePriority | string) => {
     switch (priority) {
       case "high":
         return <Badge className="bg-red-500">High</Badge>
@@ -155,9 +156,11 @@ export default function DisputesPage() {
   }
 
   const handleResolve = () => {
+    if (!selectedDispute) return;
+
     // In a real app, you would send this data to your API
     console.log({
-      disputeId: selectedDispute?.id,
+      disputeId: selectedDispute.id,
       resolution,
       notes: resolutionNotes,
     })
@@ -275,13 +278,7 @@ export default function DisputesPage() {
 
                               <div className="space-y-2">
                                 <Label>Evidence</Label>
-                                <div className="flex items-center gap-2">
-                                  <Button variant="outline" size="sm" asChild>
-                                    <ExternalLink href={selectedDispute.evidence}>
-                                      View Evidence
-                                    </ExternalLink>
-                                  </Button>
-                                </div>
+                                <DisputeEvidencePreview evidence={selectedDispute.evidence} />
                               </div>
 
                               <div className="space-y-2">

app/(dashboard)/events/new/page.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import React, { useState } from "react"
+import { useState } from "react"
 import { useRouter } from "next/navigation"
 import { CalendarIcon, Plus, Trash2 } from "lucide-react"
 import { Button } from "@/components/ui/button"
@@ -20,7 +20,7 @@ export default function NewEventPage() {
   const [title, setTitle] = useState("")
   const [description, setDescription] = useState("")
   const [category, setCategory] = useState("")
-  const [deadline, setDeadline] = useState<Date | undefined>(undefined)
+  const [deadline, setDeadline] = useState<Date | null>(null)
   const [options, setOptions] = useState([{ text: "", probability: "" }])
   const [newOption, setNewOption] = useState("")
   const [isPublic, setIsPublic] = useState(true)
@@ -39,7 +39,7 @@ export default function NewEventPage() {
     setOptions(updatedOptions)
   }
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
     // In a real app, you would send this data to your API
     console.log({
@@ -64,20 +64,86 @@ export default function NewEventPage() {
 
       <form onSubmit={handleSubmit} className="space-y-8">
         <div className="grid gap-6 md:grid-cols-2">
-          {/* Row 1 Left: Title */}
-          <div className="space-y-2 md:col-start-1 md:row-start-1">
-            <Label htmlFor="title">Event Title</Label>
-            <Input
-              id="title"
-              placeholder="Enter event title"
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-              required
-            />
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="title">Event Title</Label>
+              <Input
+                id="title"
+                placeholder="Enter event title"
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+                required
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="description">Description</Label>
+              <Textarea
+                id="description"
+                placeholder="Describe the prediction event"
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                className="min-h-[120px]"
+                required
+              />
+            </div>
+
+            <div className="grid gap-4 md:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="category">Category</Label>
+                <Select value={category} onValueChange={setCategory} required>
+                  <SelectTrigger id="category">
+                    <SelectValue placeholder="Select category" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="Sports">Sports</SelectItem>
+                    <SelectItem value="Finance">Finance</SelectItem>
+                    <SelectItem value="Entertainment">Entertainment</SelectItem>
+                    <SelectItem value="Politics">Politics</SelectItem>
+                    <SelectItem value="Technology">Technology</SelectItem>
+                    <SelectItem value="Other">Other</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="deadline">Deadline</Label>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <Button variant="outline" className="w-full justify-start text-left font-normal" id="deadline">
+                      <CalendarIcon className="mr-2 h-4 w-4" />
+                      {deadline ? format(deadline, "PPP") : "Select deadline"}
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-auto p-0">
+                    <Calendar mode="single" selected={deadline ?? undefined} onSelect={(date) => setDeadline(date ?? null)} initialFocus />
+                  </PopoverContent>
+                </Popover>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="visibility">Event Visibility</Label>
+                <Switch id="visibility" checked={isPublic} onCheckedChange={setIsPublic} />
+              </div>
+              <p className="text-sm text-muted-foreground">
+                {isPublic ? "Public - Visible to all users" : "Private - Visible to selected users only"}
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="featured">Featured Event</Label>
+                <Switch id="featured" checked={featuredEvent} onCheckedChange={setFeaturedEvent} />
+              </div>
+              <p className="text-sm text-muted-foreground">
+                Featured events appear on the homepage and receive more visibility
+              </p>
+            </div>
           </div>
 
-          {/* Row 1 Right: Outcomes (spans multiple rows) */}
-          <div className="space-y-4 md:col-start-2 md:row-start-1 md:row-span-6">
+          <div className="space-y-4">
             <div>
               <Label>Prediction Options</Label>
               <p className="text-sm text-muted-foreground mb-4">Add the possible outcomes for this prediction event</p>
@@ -148,79 +214,9 @@ export default function NewEventPage() {
               </div>
             </div>
           </div>
-
-          {/* Row 2 Left: Description */}
-          <div className="space-y-2 md:col-start-1 md:row-start-2">
-            <Label htmlFor="description">Description</Label>
-            <Textarea
-              id="description"
-              placeholder="Describe the prediction event"
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              className="min-h-[120px]"
-              required
-            />
-          </div>
-
-          {/* Row 3 Left: Category and Deadline */}
-          <div className="grid gap-4 md:grid-cols-2 md:col-start-1 md:row-start-3">
-            <div className="space-y-2">
-              <Label htmlFor="category">Category</Label>
-              <Select value={category} onValueChange={setCategory} required>
-                <SelectTrigger id="category">
-                  <SelectValue placeholder="Select category" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="Sports">Sports</SelectItem>
-                  <SelectItem value="Finance">Finance</SelectItem>
-                  <SelectItem value="Entertainment">Entertainment</SelectItem>
-                  <SelectItem value="Politics">Politics</SelectItem>
-                  <SelectItem value="Technology">Technology</SelectItem>
-                  <SelectItem value="Other">Other</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="deadline">Deadline</Label>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <Button variant="outline" className="w-full justify-start text-left font-normal" id="deadline">
-                    <CalendarIcon className="mr-2 h-4 w-4" />
-                    {deadline ? format(deadline, "PPP") : "Select deadline"}
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent className="w-auto p-0">
-                  <Calendar mode="single" selected={deadline} onSelect={setDeadline} initialFocus />
-                </PopoverContent>
-              </Popover>
-            </div>
-          </div>
-
-          {/* Row 4 Left: Visibility */}
-          <div className="space-y-2 md:col-start-1 md:row-start-4">
-            <div className="flex items-center justify-between">
-              <Label htmlFor="visibility">Event Visibility</Label>
-              <Switch id="visibility" checked={isPublic} onCheckedChange={setIsPublic} />
-            </div>
-            <p className="text-sm text-muted-foreground">
-              {isPublic ? "Public - Visible to all users" : "Private - Visible to selected users only"}
-            </p>
-          </div>
-
-          {/* Row 5 Left: Featured */}
-          <div className="space-y-2 md:col-start-1 md:row-start-5">
-            <div className="flex items-center justify-between">
-              <Label htmlFor="featured">Featured Event</Label>
-              <Switch id="featured" checked={featuredEvent} onCheckedChange={setFeaturedEvent} />
-            </div>
-            <p className="text-sm text-muted-foreground">
-              Featured events appear on the homepage and receive more visibility
-            </p>
-          </div>
         </div>
 
-        <div className="flex items-center justify-end gap-4 mt-8">
+        <div className="flex items-center justify-end gap-4">
           <Button type="button" variant="outline" onClick={() => router.push("/events")}>
             Cancel
           </Button>