mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-28 06:47:03 -05:00
Clarify preview usage scope
This commit is contained in:
gpt-engineer-app[bot]
340
src/components/moderation/displays/RichRideDisplay.tsx
Normal file
340
src/components/moderation/displays/RichRideDisplay.tsx
Normal file
@@ -0,0 +1,340 @@
|
||||
import { Train, Gauge, Ruler, Zap, Calendar, Building, User, ExternalLink, AlertCircle, TrendingUp } from 'lucide-react';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import type { RideSubmissionData } from '@/types/submission-data';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { supabase } from '@/lib/supabaseClient';
|
||||
|
||||
interface RichRideDisplayProps {
|
||||
data: RideSubmissionData;
|
||||
actionType: 'create' | 'edit' | 'delete';
|
||||
showAllFields?: boolean;
|
||||
}
|
||||
|
||||
export function RichRideDisplay({ data, actionType, showAllFields = true }: RichRideDisplayProps) {
|
||||
const [park, setPark] = useState<string | null>(null);
|
||||
const [manufacturer, setManufacturer] = useState<string | null>(null);
|
||||
const [designer, setDesigner] = useState<string | null>(null);
|
||||
const [model, setModel] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchRelatedData = async () => {
|
||||
// Fetch park
|
||||
if (data.park_id) {
|
||||
const { data: parkData } = await supabase
|
||||
.from('parks')
|
||||
.select('name')
|
||||
.eq('id', data.park_id)
|
||||
.single();
|
||||
setPark(parkData?.name || null);
|
||||
}
|
||||
|
||||
// Fetch manufacturer
|
||||
if (data.manufacturer_id) {
|
||||
const { data: mfgData } = await supabase
|
||||
.from('companies')
|
||||
.select('name')
|
||||
.eq('id', data.manufacturer_id)
|
||||
.single();
|
||||
setManufacturer(mfgData?.name || null);
|
||||
}
|
||||
|
||||
// Fetch designer
|
||||
if (data.designer_id) {
|
||||
const { data: designerData } = await supabase
|
||||
.from('companies')
|
||||
.select('name')
|
||||
.eq('id', data.designer_id)
|
||||
.single();
|
||||
setDesigner(designerData?.name || null);
|
||||
}
|
||||
|
||||
// Fetch model
|
||||
if (data.ride_model_id) {
|
||||
const { data: modelData } = await supabase
|
||||
.from('ride_models')
|
||||
.select('name')
|
||||
.eq('id', data.ride_model_id)
|
||||
.single();
|
||||
setModel(modelData?.name || null);
|
||||
}
|
||||
};
|
||||
|
||||
fetchRelatedData();
|
||||
}, [data.park_id, data.manufacturer_id, data.designer_id, data.ride_model_id]);
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status.toLowerCase()) {
|
||||
case 'operating': return 'bg-green-500';
|
||||
case 'closed': return 'bg-red-500';
|
||||
case 'under_construction': return 'bg-blue-500';
|
||||
case 'sbno': return 'bg-orange-500';
|
||||
default: return 'bg-gray-500';
|
||||
}
|
||||
};
|
||||
|
||||
// Format metrics for display
|
||||
const heightDisplay = data.max_height_meters
|
||||
? `${data.max_height_meters.toFixed(1)} m`
|
||||
: null;
|
||||
const speedDisplay = data.max_speed_kmh
|
||||
? `${data.max_speed_kmh.toFixed(1)} km/h`
|
||||
: null;
|
||||
const lengthDisplay = data.length_meters
|
||||
? `${data.length_meters.toFixed(1)} m`
|
||||
: null;
|
||||
const dropDisplay = data.drop_height_meters
|
||||
? `${data.drop_height_meters.toFixed(1)} m`
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Header Section */}
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="p-2 rounded-lg bg-primary/10 text-primary">
|
||||
<Train className="h-5 w-5" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="text-xl font-bold text-foreground truncate">{data.name}</h3>
|
||||
{park && (
|
||||
<div className="text-sm text-muted-foreground mt-0.5">at {park}</div>
|
||||
)}
|
||||
<div className="flex items-center gap-2 mt-1 flex-wrap">
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{data.category?.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
|
||||
</Badge>
|
||||
{data.ride_sub_type && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{data.ride_sub_type.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
|
||||
</Badge>
|
||||
)}
|
||||
<Badge className={`${getStatusColor(data.status)} text-white text-xs`}>
|
||||
{data.status?.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
|
||||
</Badge>
|
||||
{actionType === 'create' && (
|
||||
<Badge className="bg-green-600 text-white text-xs">New Ride</Badge>
|
||||
)}
|
||||
{actionType === 'edit' && (
|
||||
<Badge className="bg-amber-600 text-white text-xs">Edit</Badge>
|
||||
)}
|
||||
{actionType === 'delete' && (
|
||||
<Badge variant="destructive" className="text-xs">Delete</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Statistics Grid */}
|
||||
{(heightDisplay || speedDisplay || lengthDisplay || dropDisplay || data.duration_seconds || data.inversions) && (
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||||
{heightDisplay && (
|
||||
<div className="bg-muted/50 rounded-lg p-3">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<TrendingUp className="h-4 w-4 text-blue-500" />
|
||||
<span className="text-xs text-muted-foreground">Height</span>
|
||||
</div>
|
||||
<div className="text-lg font-bold">{heightDisplay}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{speedDisplay && (
|
||||
<div className="bg-muted/50 rounded-lg p-3">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Zap className="h-4 w-4 text-yellow-500" />
|
||||
<span className="text-xs text-muted-foreground">Speed</span>
|
||||
</div>
|
||||
<div className="text-lg font-bold">{speedDisplay}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{lengthDisplay && (
|
||||
<div className="bg-muted/50 rounded-lg p-3">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Ruler className="h-4 w-4 text-green-500" />
|
||||
<span className="text-xs text-muted-foreground">Length</span>
|
||||
</div>
|
||||
<div className="text-lg font-bold">{lengthDisplay}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{dropDisplay && (
|
||||
<div className="bg-muted/50 rounded-lg p-3">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<TrendingUp className="h-4 w-4 text-purple-500" />
|
||||
<span className="text-xs text-muted-foreground">Drop</span>
|
||||
</div>
|
||||
<div className="text-lg font-bold">{dropDisplay}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.duration_seconds && (
|
||||
<div className="bg-muted/50 rounded-lg p-3">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Gauge className="h-4 w-4 text-orange-500" />
|
||||
<span className="text-xs text-muted-foreground">Duration</span>
|
||||
</div>
|
||||
<div className="text-lg font-bold">{Math.floor(data.duration_seconds / 60)}:{(data.duration_seconds % 60).toString().padStart(2, '0')}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.inversions !== null && data.inversions !== undefined && (
|
||||
<div className="bg-muted/50 rounded-lg p-3">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Train className="h-4 w-4 text-red-500" />
|
||||
<span className="text-xs text-muted-foreground">Inversions</span>
|
||||
</div>
|
||||
<div className="text-lg font-bold">{data.inversions}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Companies */}
|
||||
{(manufacturer || designer || model) && (
|
||||
<div className="bg-muted/50 rounded-lg p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Building className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-sm font-semibold">Companies & Model</span>
|
||||
</div>
|
||||
<div className="text-sm space-y-1 ml-6">
|
||||
{manufacturer && (
|
||||
<div>
|
||||
<span className="text-muted-foreground">Manufacturer:</span>{' '}
|
||||
<span className="font-medium">{manufacturer}</span>
|
||||
</div>
|
||||
)}
|
||||
{designer && (
|
||||
<div>
|
||||
<span className="text-muted-foreground">Designer:</span>{' '}
|
||||
<span className="font-medium">{designer}</span>
|
||||
</div>
|
||||
)}
|
||||
{model && (
|
||||
<div>
|
||||
<span className="text-muted-foreground">Model:</span>{' '}
|
||||
<span className="font-medium">{model}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Dates */}
|
||||
{(data.opening_date || data.closing_date) && (
|
||||
<div className="bg-muted/50 rounded-lg p-3">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Calendar className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-sm font-semibold">Dates</span>
|
||||
</div>
|
||||
<div className="text-sm space-y-1 ml-6">
|
||||
{data.opening_date && (
|
||||
<div>
|
||||
<span className="text-muted-foreground">Opened:</span>{' '}
|
||||
<span className="font-medium">{new Date(data.opening_date).toLocaleDateString()}</span>
|
||||
{data.opening_date_precision && data.opening_date_precision !== 'day' && (
|
||||
<span className="text-xs text-muted-foreground ml-1">({data.opening_date_precision})</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{data.closing_date && (
|
||||
<div>
|
||||
<span className="text-muted-foreground">Closed:</span>{' '}
|
||||
<span className="font-medium">{new Date(data.closing_date).toLocaleDateString()}</span>
|
||||
{data.closing_date_precision && data.closing_date_precision !== 'day' && (
|
||||
<span className="text-xs text-muted-foreground ml-1">({data.closing_date_precision})</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Description */}
|
||||
{data.description && (
|
||||
<div className="bg-muted/50 rounded-lg p-4">
|
||||
<div className="text-sm font-semibold mb-2">Description</div>
|
||||
<div className="text-sm text-muted-foreground leading-relaxed">
|
||||
{data.description}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Additional Details */}
|
||||
{(data.capacity_per_hour || data.max_g_force || data.height_requirement || data.age_requirement) && (
|
||||
<div className="bg-muted/50 rounded-lg p-4">
|
||||
<div className="text-sm font-semibold mb-2">Additional Details</div>
|
||||
<div className="grid grid-cols-2 gap-2 text-sm ml-2">
|
||||
{data.capacity_per_hour && (
|
||||
<div><span className="text-muted-foreground">Capacity/Hour:</span> <span className="font-medium">{data.capacity_per_hour}</span></div>
|
||||
)}
|
||||
{data.max_g_force && (
|
||||
<div><span className="text-muted-foreground">Max G-Force:</span> <span className="font-medium">{data.max_g_force}g</span></div>
|
||||
)}
|
||||
{data.height_requirement && (
|
||||
<div><span className="text-muted-foreground">Height Req:</span> <span className="font-medium">{data.height_requirement} cm</span></div>
|
||||
)}
|
||||
{data.age_requirement && (
|
||||
<div><span className="text-muted-foreground">Age Req:</span> <span className="font-medium">{data.age_requirement}+</span></div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Source */}
|
||||
{data.source_url && (
|
||||
<a
|
||||
href={data.source_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:underline"
|
||||
>
|
||||
Source
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
</a>
|
||||
)}
|
||||
|
||||
{/* Submission Notes */}
|
||||
{data.submission_notes && (
|
||||
<div className="bg-amber-50 dark:bg-amber-950 rounded-lg p-3 border border-amber-200 dark:border-amber-800">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<AlertCircle className="h-4 w-4 text-amber-600 dark:text-amber-400" />
|
||||
<span className="text-sm font-semibold text-amber-900 dark:text-amber-100">Submitter Notes</span>
|
||||
</div>
|
||||
<div className="text-sm text-amber-800 dark:text-amber-200 ml-6">
|
||||
{data.submission_notes}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Images Preview */}
|
||||
{(data.banner_image_url || data.card_image_url) && (
|
||||
<div className="space-y-2">
|
||||
<Separator />
|
||||
<div className="text-sm font-semibold">Images</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{data.banner_image_url && (
|
||||
<div className="space-y-1">
|
||||
<img
|
||||
src={data.banner_image_url}
|
||||
alt="Banner"
|
||||
className="w-full h-32 object-cover rounded border"
|
||||
/>
|
||||
<div className="text-xs text-center text-muted-foreground">Banner</div>
|
||||
</div>
|
||||
)}
|
||||
{data.card_image_url && (
|
||||
<div className="space-y-1">
|
||||
<img
|
||||
src={data.card_image_url}
|
||||
alt="Card"
|
||||
className="w-full h-32 object-cover rounded border"
|
||||
/>
|
||||
<div className="text-xs text-center text-muted-foreground">Card</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user