pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-22 19:51:12 -05:00
Code Issues Packages Projects Releases Wiki Activity

Refactor: Enhance Park List View

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-28 16:08:32 +00:00
parent ba1c0625b0
commit 48bf6c7823
10 changed files with 659 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/pages/Operators.tsx
View File

@@ -9,10 +9,12 @@ import { Dialog, DialogContent } from '@/components/ui/dialog';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Search, Filter, Building, Plus, ChevronDown, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
import { Search, Filter, Building, Plus, ChevronDown, PanelLeftClose, PanelLeftOpen, Grid3X3, List } from 'lucide-react';
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { cn } from '@/lib/utils';
import { supabase } from '@/integrations/supabase/client';
import OperatorCard from '@/components/operators/OperatorCard';
import { OperatorListView } from '@/components/operators/OperatorListView';
import { OperatorForm } from '@/components/admin/OperatorForm';
import { OperatorFilters, OperatorFilterState, defaultOperatorFilters } from '@/components/operators/OperatorFilters';
import { Company } from '@/types/database';
@@ -32,6 +34,7 @@ const Operators = () => {
const [sortBy, setSortBy] = useState('name');
const [filters, setFilters] = useState<OperatorFilterState>(defaultOperatorFilters);
const [showFilters, setShowFilters] = useState(false);
const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
const saved = localStorage.getItem('operators-sidebar-collapsed');
@@ -271,6 +274,12 @@ const Operators = () => {
<span className="hidden sm:inline">Filters</span>
<ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
</Button>
<Tabs value={viewMode} onValueChange={(v) => setViewMode(v as 'grid' | 'list')} className="hidden md:inline-flex">
<TabsList>
<TabsTrigger value="grid"><Grid3X3 className="w-4 h-4" /></TabsTrigger>
<TabsTrigger value="list"><List className="w-4 h-4" /></TabsTrigger>
</TabsList>
</Tabs>
</div>
</div>
@@ -324,13 +333,17 @@ const Operators = () => {
</div>
)}
{/* Operators Grid */}
{/* Operators Grid/List */}
{!isLoading && filteredAndSortedOperators && filteredAndSortedOperators.length > 0 && (
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 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">
{filteredAndSortedOperators.map((operator) => (
<OperatorCard key={operator.id} company={operator} />
))}
</div>
viewMode === 'grid' ? (
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 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">
{filteredAndSortedOperators.map((operator) => (
<OperatorCard key={operator.id} company={operator} />
))}
</div>
) : (
<OperatorListView operators={filteredAndSortedOperators} onOperatorClick={(op) => navigate(`/operators/${op.slug}`)} />
)
)}
{/* Empty State */}