mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-25 03:51:13 -05:00
feat: Implement Phase 4 cleanup and polish
This commit is contained in:
gpt-engineer-app[bot]
@@ -26,20 +26,21 @@ import { trackPageView } from '@/lib/viewTracking';
|
||||
import { useAuthModal } from '@/hooks/useAuthModal';
|
||||
import { useDocumentTitle } from '@/hooks/useDocumentTitle';
|
||||
import { useOpenGraph } from '@/hooks/useOpenGraph';
|
||||
import { useCompanyDetail } from '@/hooks/companies/useCompanyDetail';
|
||||
import { useCompanyStatistics } from '@/hooks/companies/useCompanyStatistics';
|
||||
|
||||
export default function DesignerDetail() {
|
||||
const { slug } = useParams<{ slug: string }>();
|
||||
const navigate = useNavigate();
|
||||
const [designer, setDesigner] = useState<Company | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
|
||||
const [totalRides, setTotalRides] = useState<number>(0);
|
||||
const [totalPhotos, setTotalPhotos] = useState<number>(0);
|
||||
const [statsLoading, setStatsLoading] = useState(true);
|
||||
const { user } = useAuth();
|
||||
const { isModerator } = useUserRole();
|
||||
const { requireAuth } = useAuthModal();
|
||||
|
||||
// Use custom hooks for data fetching
|
||||
const { data: designer, isLoading: loading } = useCompanyDetail(slug, 'designer');
|
||||
const { data: statistics, isLoading: statsLoading } = useCompanyStatistics(designer?.id, 'designer');
|
||||
|
||||
// Update document title when designer changes
|
||||
useDocumentTitle(designer?.name || 'Designer Details');
|
||||
|
||||
@@ -53,12 +54,6 @@ export default function DesignerDetail() {
|
||||
enabled: !!designer
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (slug) {
|
||||
fetchDesignerData();
|
||||
}
|
||||
}, [slug]);
|
||||
|
||||
// Track page view when designer is loaded
|
||||
useEffect(() => {
|
||||
if (designer?.id) {
|
||||
@@ -66,54 +61,6 @@ export default function DesignerDetail() {
|
||||
}
|
||||
}, [designer?.id]);
|
||||
|
||||
const fetchDesignerData = async () => {
|
||||
try {
|
||||
const { data, error } = await supabase
|
||||
.from('companies')
|
||||
.select('*')
|
||||
.eq('slug', slug)
|
||||
.eq('company_type', 'designer')
|
||||
.maybeSingle();
|
||||
|
||||
if (error) throw error;
|
||||
setDesigner(data);
|
||||
if (data) {
|
||||
fetchStatistics(data.id);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching designer:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchStatistics = async (designerId: string) => {
|
||||
try {
|
||||
// Count rides
|
||||
const { count: ridesCount, error: ridesError } = await supabase
|
||||
.from('rides')
|
||||
.select('id', { count: 'exact', head: true })
|
||||
.eq('designer_id', designerId);
|
||||
|
||||
if (ridesError) throw ridesError;
|
||||
setTotalRides(ridesCount || 0);
|
||||
|
||||
// Count photos
|
||||
const { count: photosCount, error: photosError } = await supabase
|
||||
.from('photos')
|
||||
.select('id', { count: 'exact', head: true })
|
||||
.eq('entity_type', 'designer')
|
||||
.eq('entity_id', designerId);
|
||||
|
||||
if (photosError) throw photosError;
|
||||
setTotalPhotos(photosCount || 0);
|
||||
} catch (error) {
|
||||
console.error('Error fetching statistics:', error);
|
||||
} finally {
|
||||
setStatsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditSubmit = async (data: any) => {
|
||||
try {
|
||||
await submitCompanyUpdate(
|
||||
@@ -295,10 +242,10 @@ export default function DesignerDetail() {
|
||||
<TabsList className="grid w-full grid-cols-2 md:grid-cols-4">
|
||||
<TabsTrigger value="overview">Overview</TabsTrigger>
|
||||
<TabsTrigger value="rides">
|
||||
Rides {!statsLoading && totalRides > 0 && `(${totalRides})`}
|
||||
Rides {!statsLoading && statistics?.ridesCount ? `(${statistics.ridesCount})` : ''}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="photos">
|
||||
Photos {!statsLoading && totalPhotos > 0 && `(${totalPhotos})`}
|
||||
Photos {!statsLoading && statistics?.photosCount ? `(${statistics.photosCount})` : ''}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="history">History</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
@@ -26,21 +26,21 @@ import { EntityHistoryTabs } from '@/components/history/EntityHistoryTabs';
|
||||
import { useAuthModal } from '@/hooks/useAuthModal';
|
||||
import { useDocumentTitle } from '@/hooks/useDocumentTitle';
|
||||
import { useOpenGraph } from '@/hooks/useOpenGraph';
|
||||
import { useCompanyDetail } from '@/hooks/companies/useCompanyDetail';
|
||||
import { useCompanyStatistics } from '@/hooks/companies/useCompanyStatistics';
|
||||
|
||||
export default function ManufacturerDetail() {
|
||||
const { slug } = useParams<{ slug: string }>();
|
||||
const navigate = useNavigate();
|
||||
const [manufacturer, setManufacturer] = useState<Company | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
|
||||
const [totalRides, setTotalRides] = useState<number>(0);
|
||||
const [totalModels, setTotalModels] = useState<number>(0);
|
||||
const [totalPhotos, setTotalPhotos] = useState<number>(0);
|
||||
const [statsLoading, setStatsLoading] = useState(true);
|
||||
const { user } = useAuth();
|
||||
const { isModerator } = useUserRole();
|
||||
const { requireAuth } = useAuthModal();
|
||||
|
||||
// Use custom hooks for data fetching
|
||||
const { data: manufacturer, isLoading: loading } = useCompanyDetail(slug, 'manufacturer');
|
||||
const { data: statistics, isLoading: statsLoading } = useCompanyStatistics(manufacturer?.id, 'manufacturer');
|
||||
|
||||
// Update document title when manufacturer changes
|
||||
useDocumentTitle(manufacturer?.name || 'Manufacturer Details');
|
||||
|
||||
@@ -54,12 +54,6 @@ export default function ManufacturerDetail() {
|
||||
enabled: !!manufacturer
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (slug) {
|
||||
fetchManufacturerData();
|
||||
}
|
||||
}, [slug]);
|
||||
|
||||
// Track page view when manufacturer is loaded
|
||||
useEffect(() => {
|
||||
if (manufacturer?.id) {
|
||||
@@ -67,63 +61,6 @@ export default function ManufacturerDetail() {
|
||||
}
|
||||
}, [manufacturer?.id]);
|
||||
|
||||
const fetchManufacturerData = async () => {
|
||||
try {
|
||||
const { data, error } = await supabase
|
||||
.from('companies')
|
||||
.select('*')
|
||||
.eq('slug', slug)
|
||||
.eq('company_type', 'manufacturer')
|
||||
.maybeSingle();
|
||||
|
||||
if (error) throw error;
|
||||
setManufacturer(data);
|
||||
if (data) {
|
||||
fetchStatistics(data.id);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching manufacturer:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchStatistics = async (manufacturerId: string) => {
|
||||
try {
|
||||
// Count rides
|
||||
const { count: ridesCount, error: ridesError } = await supabase
|
||||
.from('rides')
|
||||
.select('id', { count: 'exact', head: true })
|
||||
.eq('manufacturer_id', manufacturerId);
|
||||
|
||||
if (ridesError) throw ridesError;
|
||||
setTotalRides(ridesCount || 0);
|
||||
|
||||
// Count models
|
||||
const { count: modelsCount, error: modelsError } = await supabase
|
||||
.from('ride_models')
|
||||
.select('id', { count: 'exact', head: true })
|
||||
.eq('manufacturer_id', manufacturerId);
|
||||
|
||||
if (modelsError) throw modelsError;
|
||||
setTotalModels(modelsCount || 0);
|
||||
|
||||
// Count photos
|
||||
const { count: photosCount, error: photosError } = await supabase
|
||||
.from('photos')
|
||||
.select('id', { count: 'exact', head: true })
|
||||
.eq('entity_type', 'manufacturer')
|
||||
.eq('entity_id', manufacturerId);
|
||||
|
||||
if (photosError) throw photosError;
|
||||
setTotalPhotos(photosCount || 0);
|
||||
} catch (error) {
|
||||
console.error('Error fetching statistics:', error);
|
||||
} finally {
|
||||
setStatsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditSubmit = async (data: any) => {
|
||||
try {
|
||||
await submitCompanyUpdate(
|
||||
@@ -307,13 +244,13 @@ export default function ManufacturerDetail() {
|
||||
<TabsList className="grid w-full grid-cols-2 md:grid-cols-5">
|
||||
<TabsTrigger value="overview">Overview</TabsTrigger>
|
||||
<TabsTrigger value="rides">
|
||||
Rides {!statsLoading && totalRides > 0 && `(${totalRides})`}
|
||||
Rides {!statsLoading && statistics?.ridesCount ? `(${statistics.ridesCount})` : ''}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="models">
|
||||
Models {!statsLoading && totalModels > 0 && `(${totalModels})`}
|
||||
Models {!statsLoading && statistics?.modelsCount ? `(${statistics.modelsCount})` : ''}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="photos">
|
||||
Photos {!statsLoading && totalPhotos > 0 && `(${totalPhotos})`}
|
||||
Photos {!statsLoading && statistics?.photosCount ? `(${statistics.photosCount})` : ''}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="history">History</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
@@ -27,23 +27,23 @@ import { EntityHistoryTabs } from '@/components/history/EntityHistoryTabs';
|
||||
import { useAuthModal } from '@/hooks/useAuthModal';
|
||||
import { useDocumentTitle } from '@/hooks/useDocumentTitle';
|
||||
import { useOpenGraph } from '@/hooks/useOpenGraph';
|
||||
import { useCompanyDetail } from '@/hooks/companies/useCompanyDetail';
|
||||
import { useCompanyStatistics } from '@/hooks/companies/useCompanyStatistics';
|
||||
import { useCompanyParks } from '@/hooks/companies/useCompanyParks';
|
||||
|
||||
export default function OperatorDetail() {
|
||||
const { slug } = useParams<{ slug: string }>();
|
||||
const navigate = useNavigate();
|
||||
const [operator, setOperator] = 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();
|
||||
|
||||
// Use custom hooks for data fetching
|
||||
const { data: operator, isLoading: loading } = useCompanyDetail(slug, 'operator');
|
||||
const { data: statistics, isLoading: statsLoading } = useCompanyStatistics(operator?.id, 'operator');
|
||||
const { data: parks = [], isLoading: parksLoading } = useCompanyParks(operator?.id, 'operator', 6);
|
||||
|
||||
// Update document title when operator changes
|
||||
useDocumentTitle(operator?.name || 'Operator Details');
|
||||
|
||||
@@ -57,12 +57,6 @@ export default function OperatorDetail() {
|
||||
enabled: !!operator
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (slug) {
|
||||
fetchOperatorData();
|
||||
}
|
||||
}, [slug]);
|
||||
|
||||
// Track page view when operator is loaded
|
||||
useEffect(() => {
|
||||
if (operator?.id) {
|
||||
@@ -70,95 +64,6 @@ export default function OperatorDetail() {
|
||||
}
|
||||
}, [operator?.id]);
|
||||
|
||||
const fetchOperatorData = async () => {
|
||||
try {
|
||||
const { data, error } = await supabase
|
||||
.from('companies')
|
||||
.select('*')
|
||||
.eq('slug', slug)
|
||||
.eq('company_type', 'operator')
|
||||
.maybeSingle();
|
||||
|
||||
if (error) throw error;
|
||||
setOperator(data);
|
||||
|
||||
// Fetch parks operated by this operator
|
||||
if (data) {
|
||||
fetchParks(data.id);
|
||||
fetchStatistics(data.id);
|
||||
fetchPhotoCount(data.id);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching operator:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchParks = async (operatorId: string) => {
|
||||
try {
|
||||
const { data, error } = await supabase
|
||||
.from('parks')
|
||||
.select(`
|
||||
*,
|
||||
location:locations(*)
|
||||
`)
|
||||
.eq('operator_id', operatorId)
|
||||
.order('name')
|
||||
.limit(6);
|
||||
|
||||
if (error) throw error;
|
||||
setParks(data || []);
|
||||
} catch (error) {
|
||||
console.error('Error fetching parks:', error);
|
||||
} finally {
|
||||
setParksLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchStatistics = async (operatorId: string) => {
|
||||
try {
|
||||
// Get total parks count
|
||||
const { count: parksCount, error: parksError } = await supabase
|
||||
.from('parks')
|
||||
.select('id', { count: 'exact', head: true })
|
||||
.eq('operator_id', operatorId);
|
||||
|
||||
if (parksError) throw parksError;
|
||||
setTotalParks(parksCount || 0);
|
||||
|
||||
// Get operating rides count across all parks
|
||||
const { data: ridesData, error: ridesError } = await supabase
|
||||
.from('rides')
|
||||
.select('id, parks!inner(operator_id)')
|
||||
.eq('parks.operator_id', operatorId)
|
||||
.eq('status', 'operating');
|
||||
|
||||
if (ridesError) throw ridesError;
|
||||
setOperatingRides(ridesData?.length || 0);
|
||||
} catch (error) {
|
||||
console.error('Error fetching statistics:', error);
|
||||
} finally {
|
||||
setStatsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchPhotoCount = async (operatorId: string) => {
|
||||
try {
|
||||
const { count, error } = await supabase
|
||||
.from('photos')
|
||||
.select('id', { count: 'exact', head: true })
|
||||
.eq('entity_type', 'operator')
|
||||
.eq('entity_id', operatorId);
|
||||
|
||||
if (error) throw error;
|
||||
setTotalPhotos(count || 0);
|
||||
} catch (error) {
|
||||
console.error('Error fetching photo count:', error);
|
||||
setTotalPhotos(0);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditSubmit = async (data: any) => {
|
||||
try {
|
||||
await submitCompanyUpdate(
|
||||
@@ -309,29 +214,29 @@ export default function OperatorDetail() {
|
||||
|
||||
{/* Company Info */}
|
||||
<div className="flex flex-wrap justify-center gap-4 mb-8">
|
||||
{!statsLoading && totalParks > 0 && (
|
||||
{!statsLoading && statistics?.parksCount ? (
|
||||
<Card>
|
||||
<CardContent className="p-4 text-center">
|
||||
<FerrisWheel className="w-6 h-6 text-primary mx-auto mb-2" />
|
||||
<div className="text-2xl font-bold">{totalParks}</div>
|
||||
<div className="text-2xl font-bold">{statistics.parksCount}</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{totalParks === 1 ? 'Park Operated' : 'Parks Operated'}
|
||||
{statistics.parksCount === 1 ? 'Park Operated' : 'Parks Operated'}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
) : null}
|
||||
|
||||
{!statsLoading && operatingRides > 0 && (
|
||||
{!statsLoading && statistics?.operatingRidesCount ? (
|
||||
<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-2xl font-bold">{statistics.operatingRidesCount}</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Operating {operatingRides === 1 ? 'Ride' : 'Rides'}
|
||||
Operating {statistics.operatingRidesCount === 1 ? 'Ride' : 'Rides'}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
) : null}
|
||||
|
||||
{operator.founded_year && (
|
||||
<Card>
|
||||
@@ -365,10 +270,10 @@ export default function OperatorDetail() {
|
||||
<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})`}
|
||||
Parks {!statsLoading && statistics?.parksCount ? `(${statistics.parksCount})` : ''}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="photos">
|
||||
Photos {!statsLoading && totalPhotos > 0 && `(${totalPhotos})`}
|
||||
Photos {!statsLoading && statistics?.photosCount ? `(${statistics.photosCount})` : ''}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="history">History</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
@@ -27,23 +27,23 @@ import { EntityHistoryTabs } from '@/components/history/EntityHistoryTabs';
|
||||
import { useAuthModal } from '@/hooks/useAuthModal';
|
||||
import { useDocumentTitle } from '@/hooks/useDocumentTitle';
|
||||
import { useOpenGraph } from '@/hooks/useOpenGraph';
|
||||
import { useCompanyDetail } from '@/hooks/companies/useCompanyDetail';
|
||||
import { useCompanyStatistics } from '@/hooks/companies/useCompanyStatistics';
|
||||
import { useCompanyParks } from '@/hooks/companies/useCompanyParks';
|
||||
|
||||
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();
|
||||
|
||||
// Use custom hooks for data fetching
|
||||
const { data: owner, isLoading: loading } = useCompanyDetail(slug, 'property_owner');
|
||||
const { data: statistics, isLoading: statsLoading } = useCompanyStatistics(owner?.id, 'property_owner');
|
||||
const { data: parks = [], isLoading: parksLoading } = useCompanyParks(owner?.id, 'property_owner', 6);
|
||||
|
||||
// Update document title when owner changes
|
||||
useDocumentTitle(owner?.name || 'Property Owner Details');
|
||||
|
||||
@@ -57,12 +57,6 @@ export default function PropertyOwnerDetail() {
|
||||
enabled: !!owner
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (slug) {
|
||||
fetchOwnerData();
|
||||
}
|
||||
}, [slug]);
|
||||
|
||||
// Track page view when property owner is loaded
|
||||
useEffect(() => {
|
||||
if (owner?.id) {
|
||||
@@ -70,95 +64,6 @@ export default function PropertyOwnerDetail() {
|
||||
}
|
||||
}, [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) {
|
||||
console.error('Error fetching property owner:', error);
|
||||
} 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) {
|
||||
console.error('Error fetching parks:', error);
|
||||
} 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) {
|
||||
console.error('Error fetching statistics:', error);
|
||||
} 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) {
|
||||
console.error('Error fetching photo count:', error);
|
||||
setTotalPhotos(0);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditSubmit = async (data: any) => {
|
||||
try {
|
||||
await submitCompanyUpdate(
|
||||
@@ -309,29 +214,29 @@ export default function PropertyOwnerDetail() {
|
||||
|
||||
{/* Company Info */}
|
||||
<div className="flex flex-wrap justify-center gap-4 mb-8">
|
||||
{!statsLoading && totalParks > 0 && (
|
||||
{!statsLoading && statistics?.parksCount ? (
|
||||
<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-2xl font-bold">{statistics.parksCount}</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{totalParks === 1 ? 'Park Owned' : 'Parks Owned'}
|
||||
{statistics.parksCount === 1 ? 'Park Owned' : 'Parks Owned'}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
) : null}
|
||||
|
||||
{!statsLoading && operatingRides > 0 && (
|
||||
{!statsLoading && statistics?.operatingRidesCount ? (
|
||||
<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-2xl font-bold">{statistics.operatingRidesCount}</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Operating {operatingRides === 1 ? 'Ride' : 'Rides'}
|
||||
Operating {statistics.operatingRidesCount === 1 ? 'Ride' : 'Rides'}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
) : null}
|
||||
|
||||
{owner.founded_year && (
|
||||
<Card>
|
||||
@@ -365,10 +270,10 @@ export default function PropertyOwnerDetail() {
|
||||
<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})`}
|
||||
Parks {!statsLoading && statistics?.parksCount ? `(${statistics.parksCount})` : ''}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="photos">
|
||||
Photos {!statsLoading && totalPhotos > 0 && `(${totalPhotos})`}
|
||||
Photos {!statsLoading && statistics?.photosCount ? `(${statistics.photosCount})` : ''}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="history">History</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
@@ -24,18 +24,24 @@ import { VersionIndicator } from '@/components/versioning/VersionIndicator';
|
||||
import { EntityVersionHistory } from '@/components/versioning/EntityVersionHistory';
|
||||
import { useDocumentTitle } from '@/hooks/useDocumentTitle';
|
||||
import { useOpenGraph } from '@/hooks/useOpenGraph';
|
||||
import { useRideModelDetail } from '@/hooks/rideModels/useRideModelDetail';
|
||||
import { useModelRides } from '@/hooks/rideModels/useModelRides';
|
||||
import { useModelStatistics } from '@/hooks/rideModels/useModelStatistics';
|
||||
|
||||
export default function RideModelDetail() {
|
||||
const { manufacturerSlug, modelSlug } = useParams<{ manufacturerSlug: string; modelSlug: string }>();
|
||||
const navigate = useNavigate();
|
||||
const { user } = useAuth();
|
||||
const { requireAuth } = useAuthModal();
|
||||
const [model, setModel] = useState<RideModel | null>(null);
|
||||
const [manufacturer, setManufacturer] = useState<Company | null>(null);
|
||||
const [rides, setRides] = useState<Ride[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
|
||||
|
||||
// Use custom hooks for data fetching
|
||||
const { data: modelData, isLoading: loading } = useRideModelDetail(manufacturerSlug, modelSlug);
|
||||
const model = modelData?.model;
|
||||
const manufacturer = modelData?.manufacturer;
|
||||
const { data: rides = [] } = useModelRides(model?.id);
|
||||
const { data: statistics = { rideCount: 0, photoCount: 0 } } = useModelStatistics(model?.id);
|
||||
|
||||
// Update document title when model changes
|
||||
useDocumentTitle(model?.name || 'Ride Model Details');
|
||||
|
||||
@@ -48,78 +54,10 @@ export default function RideModelDetail() {
|
||||
type: 'website',
|
||||
enabled: !!model
|
||||
});
|
||||
const [statistics, setStatistics] = useState({ rideCount: 0, photoCount: 0 });
|
||||
|
||||
// Fetch technical specifications from relational table
|
||||
const { data: technicalSpecs } = useTechnicalSpecifications('ride_model', model?.id);
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
try {
|
||||
// Fetch manufacturer
|
||||
const { data: manufacturerData, error: manufacturerError } = await supabase
|
||||
.from('companies')
|
||||
.select('*')
|
||||
.eq('slug', manufacturerSlug)
|
||||
.eq('company_type', 'manufacturer')
|
||||
.maybeSingle();
|
||||
|
||||
if (manufacturerError) throw manufacturerError;
|
||||
setManufacturer(manufacturerData);
|
||||
|
||||
if (manufacturerData) {
|
||||
// Fetch ride model
|
||||
const { data: modelData, error: modelError } = await supabase
|
||||
.from('ride_models')
|
||||
.select('*')
|
||||
.eq('slug', modelSlug)
|
||||
.eq('manufacturer_id', manufacturerData.id)
|
||||
.maybeSingle();
|
||||
|
||||
if (modelError) throw modelError;
|
||||
setModel(modelData as RideModel);
|
||||
|
||||
if (modelData) {
|
||||
// Fetch rides using this model with proper joins
|
||||
const { data: ridesData, error: ridesError } = await supabase
|
||||
.from('rides')
|
||||
.select(`
|
||||
*,
|
||||
park:parks!inner(name, slug, location:locations(*)),
|
||||
manufacturer:companies!rides_manufacturer_id_fkey(*),
|
||||
ride_model:ride_models(id, name, slug, manufacturer_id, category)
|
||||
`)
|
||||
.eq('ride_model_id', modelData.id)
|
||||
.order('name');
|
||||
|
||||
if (ridesError) throw ridesError;
|
||||
setRides(ridesData as Ride[] || []);
|
||||
|
||||
// Fetch statistics
|
||||
const { count: photoCount } = await supabase
|
||||
.from('photos')
|
||||
.select('*', { count: 'exact', head: true })
|
||||
.eq('entity_type', 'ride_model')
|
||||
.eq('entity_id', modelData.id);
|
||||
|
||||
setStatistics({
|
||||
rideCount: ridesData?.length || 0,
|
||||
photoCount: photoCount || 0
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [manufacturerSlug, modelSlug]);
|
||||
|
||||
useEffect(() => {
|
||||
if (manufacturerSlug && modelSlug) {
|
||||
fetchData();
|
||||
}
|
||||
}, [manufacturerSlug, modelSlug, fetchData]);
|
||||
|
||||
const handleEditSubmit = async (data: any) => {
|
||||
try {
|
||||
if (!user || !model) return;
|
||||
@@ -138,7 +76,6 @@ export default function RideModelDetail() {
|
||||
});
|
||||
|
||||
setIsEditModalOpen(false);
|
||||
fetchData();
|
||||
} catch (error) {
|
||||
const errorMsg = getErrorMessage(error);
|
||||
toast({
|
||||
|
||||
Reference in New Issue
Block a user