mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-20 11:51:14 -05:00
469 lines
17 KiB
TypeScript
469 lines
17 KiB
TypeScript
import { useState, useEffect, lazy, Suspense } from 'react';
|
|
import { useParams, useNavigate } from 'react-router-dom';
|
|
import { Header } from '@/components/layout/Header';
|
|
import { trackPageView } from '@/lib/viewTracking';
|
|
import { getBannerUrls } from '@/lib/cloudflareImageUtils';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import { Dialog, DialogContent } from '@/components/ui/dialog';
|
|
import { AdminFormSkeleton } from '@/components/loading/PageSkeletons';
|
|
import { ArrowLeft, MapPin, Star, Globe, Calendar, Edit, Building2, Gauge } from 'lucide-react';
|
|
import { Company, Park } from '@/types/database';
|
|
import { supabase } from '@/lib/supabaseClient';
|
|
import { PropertyOwnerPhotoGallery } from '@/components/companies/PropertyOwnerPhotoGallery';
|
|
import { ParkCard } from '@/components/parks/ParkCard';
|
|
import { handleNonCriticalError } from '@/lib/errorHandler';
|
|
|
|
// Lazy load admin form
|
|
const PropertyOwnerForm = lazy(() => import('@/components/admin/PropertyOwnerForm').then(m => ({ default: m.PropertyOwnerForm })));
|
|
import { useAuth } from '@/hooks/useAuth';
|
|
import { useUserRole } from '@/hooks/useUserRole';
|
|
import { toast } from '@/hooks/use-toast';
|
|
import { getErrorMessage } from '@/lib/errorHandler';
|
|
import { submitCompanyUpdate } from '@/lib/companyHelpers';
|
|
import { VersionIndicator } from '@/components/versioning/VersionIndicator';
|
|
import { EntityHistoryTabs } from '@/components/history/EntityHistoryTabs';
|
|
import { useAuthModal } from '@/hooks/useAuthModal';
|
|
import { useDocumentTitle } from '@/hooks/useDocumentTitle';
|
|
import { useOpenGraph } from '@/hooks/useOpenGraph';
|
|
|
|
export default function PropertyOwnerDetail() {
|
|
const { slug } = useParams<{ slug: string }>();
|
|
const navigate = useNavigate();
|
|
const [owner, setOwner] = useState<Company | null>(null);
|
|
const [parks, setParks] = useState<Park[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [parksLoading, setParksLoading] = useState(true);
|
|
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
|
|
const [totalParks, setTotalParks] = useState<number>(0);
|
|
const [operatingRides, setOperatingRides] = useState<number>(0);
|
|
const [statsLoading, setStatsLoading] = useState(true);
|
|
const [totalPhotos, setTotalPhotos] = useState<number>(0);
|
|
const { user } = useAuth();
|
|
const { isModerator } = useUserRole();
|
|
const { requireAuth } = useAuthModal();
|
|
|
|
// Update document title when owner changes
|
|
useDocumentTitle(owner?.name || 'Property Owner Details');
|
|
|
|
// Update Open Graph meta tags
|
|
useOpenGraph({
|
|
title: owner?.name || '',
|
|
description: owner?.description || (owner ? `${owner.name} - Property Owner${owner.headquarters_location ? ` based in ${owner.headquarters_location}` : ''}` : ''),
|
|
imageUrl: owner?.banner_image_url ?? undefined,
|
|
imageId: owner?.banner_image_id ?? undefined,
|
|
type: 'profile',
|
|
enabled: !!owner
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (slug) {
|
|
fetchOwnerData();
|
|
}
|
|
}, [slug]);
|
|
|
|
// Track page view when property owner is loaded
|
|
useEffect(() => {
|
|
if (owner?.id) {
|
|
trackPageView('company', owner.id);
|
|
}
|
|
}, [owner?.id]);
|
|
|
|
const fetchOwnerData = async () => {
|
|
try {
|
|
const { data, error } = await supabase
|
|
.from('companies')
|
|
.select('*')
|
|
.eq('slug', slug || '')
|
|
.eq('company_type', 'property_owner')
|
|
.maybeSingle();
|
|
|
|
if (error) throw error;
|
|
setOwner(data);
|
|
|
|
// Fetch parks owned by this property owner
|
|
if (data) {
|
|
fetchParks(data.id);
|
|
fetchStatistics(data.id);
|
|
fetchPhotoCount(data.id);
|
|
}
|
|
} catch (error) {
|
|
handleNonCriticalError(error, { action: 'Fetch Property Owner', metadata: { slug } });
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const fetchParks = async (ownerId: string) => {
|
|
try {
|
|
const { data, error } = await supabase
|
|
.from('parks')
|
|
.select(`
|
|
*,
|
|
location:locations(*)
|
|
`)
|
|
.eq('property_owner_id', ownerId)
|
|
.order('name')
|
|
.limit(6);
|
|
|
|
if (error) throw error;
|
|
setParks(data || []);
|
|
} catch (error) {
|
|
handleNonCriticalError(error, { action: 'Fetch Owner Parks', metadata: { ownerId } });
|
|
} finally {
|
|
setParksLoading(false);
|
|
}
|
|
};
|
|
|
|
const fetchStatistics = async (ownerId: string) => {
|
|
try {
|
|
// Get total parks count
|
|
const { count: parksCount, error: parksError } = await supabase
|
|
.from('parks')
|
|
.select('id', { count: 'exact', head: true })
|
|
.eq('property_owner_id', ownerId);
|
|
|
|
if (parksError) throw parksError;
|
|
setTotalParks(parksCount || 0);
|
|
|
|
// Get operating rides count across all owned parks
|
|
const { data: ridesData, error: ridesError } = await supabase
|
|
.from('rides')
|
|
.select('id, parks!inner(property_owner_id)')
|
|
.eq('parks.property_owner_id', ownerId)
|
|
.eq('status', 'operating');
|
|
|
|
if (ridesError) throw ridesError;
|
|
setOperatingRides(ridesData?.length || 0);
|
|
} catch (error) {
|
|
handleNonCriticalError(error, { action: 'Fetch Owner Statistics', metadata: { ownerId } });
|
|
} finally {
|
|
setStatsLoading(false);
|
|
}
|
|
};
|
|
|
|
const fetchPhotoCount = async (ownerId: string) => {
|
|
try {
|
|
const { count, error } = await supabase
|
|
.from('photos')
|
|
.select('id', { count: 'exact', head: true })
|
|
.eq('entity_type', 'property_owner')
|
|
.eq('entity_id', ownerId);
|
|
|
|
if (error) throw error;
|
|
setTotalPhotos(count || 0);
|
|
} catch (error) {
|
|
handleNonCriticalError(error, { action: 'Fetch Owner Photo Count', metadata: { ownerId } });
|
|
setTotalPhotos(0);
|
|
}
|
|
};
|
|
|
|
const handleEditSubmit = async (data: any) => {
|
|
try {
|
|
await submitCompanyUpdate(
|
|
owner!.id,
|
|
data,
|
|
user!.id
|
|
);
|
|
|
|
toast({
|
|
title: "Edit Submitted",
|
|
description: "Your edit has been submitted for review."
|
|
});
|
|
|
|
setIsEditModalOpen(false);
|
|
} catch (error) {
|
|
const errorMsg = getErrorMessage(error);
|
|
toast({
|
|
title: "Error",
|
|
description: errorMsg || "Failed to submit edit.",
|
|
variant: "destructive"
|
|
});
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
<Header />
|
|
<div className="container mx-auto px-4 py-8">
|
|
<div className="animate-pulse space-y-6">
|
|
<div className="h-64 bg-muted rounded-lg"></div>
|
|
<div className="h-8 bg-muted rounded w-1/2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!owner) {
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
<Header />
|
|
<div className="container mx-auto px-4 py-8">
|
|
<div className="text-center py-12">
|
|
<h1 className="text-2xl font-bold mb-4">Property Owner Not Found</h1>
|
|
<Button onClick={() => navigate('/owners')}>
|
|
<ArrowLeft className="w-4 h-4 mr-2" />
|
|
Back to Property Owners
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
<Header />
|
|
|
|
<main className="container mx-auto px-4 py-8 max-w-7xl">
|
|
{/* Back Button and Edit Button */}
|
|
<div className="flex items-center justify-between mb-6">
|
|
<Button variant="ghost" onClick={() => navigate('/owners')}>
|
|
<ArrowLeft className="w-4 h-4 mr-2" />
|
|
Back to Property Owners
|
|
</Button>
|
|
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => requireAuth(() => setIsEditModalOpen(true), "Sign in to edit this property owner")}
|
|
>
|
|
<Edit className="w-4 h-4 mr-2" />
|
|
Edit Property Owner
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Hero Section */}
|
|
<div className="relative mb-8">
|
|
<div className="aspect-[21/9] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 rounded-lg overflow-hidden relative">
|
|
{(owner.banner_image_url || owner.banner_image_id) ? (
|
|
<picture>
|
|
<source
|
|
media="(max-width: 768px)"
|
|
srcSet={getBannerUrls(owner.banner_image_id ?? undefined).mobile || owner.banner_image_url || undefined}
|
|
/>
|
|
<img
|
|
src={getBannerUrls(owner.banner_image_id ?? undefined).desktop || owner.banner_image_url || undefined}
|
|
alt={owner.name}
|
|
className="w-full h-full object-cover"
|
|
loading="eager"
|
|
/>
|
|
</picture>
|
|
) : owner.logo_url ? (
|
|
<div className="flex items-center justify-center h-full bg-background/90">
|
|
<img
|
|
src={owner.logo_url}
|
|
alt={owner.name}
|
|
className="max-h-48 object-contain"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center justify-center h-full">
|
|
<Building2 className="w-24 h-24 opacity-50" />
|
|
</div>
|
|
)}
|
|
|
|
<div className="absolute bottom-0 left-0 right-0 p-8 bg-gradient-to-t from-black/60 to-transparent">
|
|
<div className="flex items-end justify-between">
|
|
<div>
|
|
<Badge variant="outline" className="bg-black/20 text-white border-white/20 mb-2">
|
|
Property Owner
|
|
</Badge>
|
|
<h1 className="text-4xl md:text-6xl font-bold text-white mb-2">
|
|
{owner.name}
|
|
</h1>
|
|
{owner.headquarters_location && (
|
|
<div className="flex items-center text-white/90 text-lg">
|
|
<MapPin className="w-5 h-5 mr-2" />
|
|
{owner.headquarters_location}
|
|
</div>
|
|
)}
|
|
<div className="mt-3">
|
|
<VersionIndicator
|
|
entityType="company"
|
|
entityId={owner.id}
|
|
entityName={owner.name}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{(owner.average_rating ?? 0) > 0 && (
|
|
<div className="bg-black/30 backdrop-blur-md rounded-lg p-6 text-center">
|
|
<div className="flex items-center gap-2 text-white mb-2">
|
|
<Star className="w-6 h-6 fill-yellow-400 text-yellow-400" />
|
|
<span className="text-3xl font-bold">
|
|
{(owner.average_rating ?? 0).toFixed(1)}
|
|
</span>
|
|
</div>
|
|
<div className="text-white/90 text-sm">
|
|
{owner.review_count} {owner.review_count === 1 ? "review" : "reviews"}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Company Info */}
|
|
<div className="flex flex-wrap justify-center gap-4 mb-8">
|
|
{!statsLoading && totalParks > 0 && (
|
|
<Card>
|
|
<CardContent className="p-4 text-center">
|
|
<Building2 className="w-6 h-6 text-primary mx-auto mb-2" />
|
|
<div className="text-2xl font-bold">{totalParks}</div>
|
|
<div className="text-sm text-muted-foreground">
|
|
{totalParks === 1 ? 'Park Owned' : 'Parks Owned'}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{!statsLoading && operatingRides > 0 && (
|
|
<Card>
|
|
<CardContent className="p-4 text-center">
|
|
<Gauge className="w-6 h-6 text-accent mx-auto mb-2" />
|
|
<div className="text-2xl font-bold">{operatingRides}</div>
|
|
<div className="text-sm text-muted-foreground">
|
|
Operating {operatingRides === 1 ? 'Ride' : 'Rides'}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{owner.founded_year && (
|
|
<Card>
|
|
<CardContent className="p-4 text-center">
|
|
<Calendar className="w-6 h-6 text-primary mx-auto mb-2" />
|
|
<div className="text-2xl font-bold">{owner.founded_year}</div>
|
|
<div className="text-sm text-muted-foreground">Founded</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{owner.website_url && (
|
|
<Card>
|
|
<CardContent className="p-4 text-center">
|
|
<Globe className="w-6 h-6 text-primary mx-auto mb-2" />
|
|
<a
|
|
href={owner.website_url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-sm text-primary hover:underline break-all"
|
|
>
|
|
Visit Website
|
|
</a>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<Tabs defaultValue="overview" className="w-full">
|
|
<TabsList className="grid w-full grid-cols-2 md:grid-cols-4">
|
|
<TabsTrigger value="overview">Overview</TabsTrigger>
|
|
<TabsTrigger value="parks">
|
|
Parks {!statsLoading && totalParks > 0 && `(${totalParks})`}
|
|
</TabsTrigger>
|
|
<TabsTrigger value="photos">
|
|
Photos {!statsLoading && totalPhotos > 0 && `(${totalPhotos})`}
|
|
</TabsTrigger>
|
|
<TabsTrigger value="history">History</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="overview" className="space-y-6">
|
|
{owner.description && (
|
|
<Card>
|
|
<CardContent className="p-6">
|
|
<h2 className="text-2xl font-bold mb-4">About</h2>
|
|
<p className="text-muted-foreground whitespace-pre-wrap">
|
|
{owner.description}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</TabsContent>
|
|
|
|
<TabsContent value="parks">
|
|
<Card>
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className="text-2xl font-bold">Parks Owned</h2>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => navigate(`/owners/${owner.slug}/parks`)}
|
|
>
|
|
View All Parks
|
|
</Button>
|
|
</div>
|
|
|
|
{parksLoading ? (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{[1, 2, 3].map((i) => (
|
|
<div key={i} className="h-64 bg-muted rounded-lg animate-pulse" />
|
|
))}
|
|
</div>
|
|
) : parks.length > 0 ? (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
|
|
{parks.map((park) => (
|
|
<ParkCard key={park.id} park={park} />
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-12 text-muted-foreground">
|
|
<Building2 className="w-12 h-12 mx-auto mb-4 opacity-50" />
|
|
<p>No parks found for {owner.name}</p>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="photos">
|
|
<PropertyOwnerPhotoGallery
|
|
propertyOwnerId={owner.id}
|
|
propertyOwnerName={owner.name}
|
|
/>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="history" className="mt-6">
|
|
<EntityHistoryTabs
|
|
entityType="company"
|
|
entityId={owner.id}
|
|
entityName={owner.name}
|
|
/>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</main>
|
|
|
|
{/* Edit Modal */}
|
|
<Dialog open={isEditModalOpen} onOpenChange={setIsEditModalOpen}>
|
|
<DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
|
|
<Suspense fallback={<AdminFormSkeleton />}>
|
|
<PropertyOwnerForm
|
|
initialData={{
|
|
id: owner.id,
|
|
name: owner.name,
|
|
slug: owner.slug,
|
|
description: owner.description ?? undefined,
|
|
company_type: 'property_owner',
|
|
person_type: (owner.person_type || 'company') as 'company' | 'individual' | 'firm' | 'organization',
|
|
website_url: owner.website_url ?? undefined,
|
|
founded_year: owner.founded_year ?? undefined,
|
|
headquarters_location: owner.headquarters_location ?? undefined,
|
|
banner_image_url: owner.banner_image_url ?? undefined,
|
|
card_image_url: owner.card_image_url ?? undefined
|
|
}}
|
|
onSubmit={handleEditSubmit}
|
|
onCancel={() => setIsEditModalOpen(false)}
|
|
/>
|
|
</Suspense>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|