Add database reset script and update package.json for db commands; refactor middleware for CORS support and error handling in parks page

.clinerules

@@ -27,17 +27,4 @@ This applies to all management commands including but not limited to:
 - Creating superuser: `uv run manage.py createsuperuser`
 - Starting shell: `uv run manage.py shell`
 
-NEVER use `python manage.py` or `uv run python manage.py`. Always use `uv run manage.py` directly.
+NEVER use `python manage.py` or `uv run python manage.py`. Always use `uv run manage.py` directly.
-
-## Static Files Management
-IMPORTANT: All static files must be placed in the `static/` directory, not `staticfiles/`. The `staticfiles/` directory is reserved for Django's collectstatic command output and should not be used directly.
-
-This consolidation:
-1. Follows Django best practices of separating source static files from collected files
-2. Prevents confusion between development and production static file locations
-3. Makes it clear which static files are part of the source code (static/) versus compiled/collected (staticfiles/)
-
-When adding new static files:
-- Add them to `static/` directory
-- Use Django's `static` template tag to reference them
-- Run `uv run manage.py collectstatic` when deploying

autocomplete/__init__.py

@@ -1,49 +0,0 @@
-default_app_config = 'autocomplete.apps.AutocompleteConfig'
-
-from django.db import models
-from django.core.exceptions import ImproperlyConfigured
-from django.forms.widgets import Widget
-from django.template.loader import render_to_string
-
-
-class ModelAutocomplete:
-    """Base class for model-based autocomplete."""
-    model = None  # Model class to use for autocomplete
-    search_attrs = []  # List of model attributes to search
-    minimum_search_length = 2  # Minimum length of search string
-    max_results = 10  # Maximum number of results to return
-
-    def __init__(self):
-        if not self.model:
-            raise ImproperlyConfigured("ModelAutocomplete requires a model class")
-        if not self.search_attrs:
-            raise ImproperlyConfigured("ModelAutocomplete requires search_attrs")
-
-    def get_search_results(self, search):
-        """Return search results for a given search string."""
-        raise NotImplementedError("Subclasses must implement get_search_results()")
-
-    def format_result(self, obj):
-        """Format a single result object."""
-        raise NotImplementedError("Subclasses must implement format_result()")
-
-
-class AutocompleteWidget(Widget):
-    """Widget for autocomplete fields."""
-    template_name = 'autocomplete/widget.html'
-
-    def __init__(self, ac_class, attrs=None):
-        super().__init__(attrs)
-        if not issubclass(ac_class, ModelAutocomplete):
-            raise ImproperlyConfigured("ac_class must be a subclass of ModelAutocomplete")
-        self.ac_class = ac_class
-
-    def get_context(self, name, value, attrs):
-        context = super().get_context(name, value, attrs)
-        # Add ac_name for URL resolution
-        context['ac_name'] = self.ac_class.__name__.lower()
-        return context
-
-    def render(self, name, value, attrs=None, renderer=None):
-        context = self.get_context(name, value, attrs)
-        return render_to_string(self.template_name, context)

autocomplete/apps.py

@@ -1,25 +0,0 @@
-from django.apps import AppConfig
-
-
-class AutocompleteConfig(AppConfig):
-    default_auto_field = 'django.db.models.BigAutoField'
-    name = 'autocomplete'
-    
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
-        self._registry = {}
-    
-    def ready(self):
-        """Register all autocomplete classes."""
-        from parks.forms import ParkAutocomplete
-        
-        # Register autocomplete classes
-        self.register_autocomplete('park', ParkAutocomplete)
-    
-    def register_autocomplete(self, name, ac_class):
-        """Register an autocomplete class."""
-        self._registry[name] = ac_class
-    
-    def get_autocomplete_class(self, name):
-        """Get an autocomplete class by name."""
-        return self._registry.get(name)

autocomplete/templates/autocomplete/suggestions.html

@@ -1,20 +0,0 @@
-{% if results %}
-<ul class="py-1 overflow-auto max-h-60" role="listbox">
-    {% for result in results %}
-    <li class="px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer"
-        role="option"
-        @click="selectedId = '{{ result.key }}'; query = '{{ result.label }}'; $refs.filterForm.requestSubmit()">
-        <div class="flex flex-col">
-            <span class="font-medium">{{ result.label }}</span>
-            {% if result.extra %}
-            <span class="text-sm text-gray-500 dark:text-gray-400">{{ result.extra }}</span>
-            {% endif %}
-        </div>
-    </li>
-    {% endfor %}
-</ul>
-{% else %}
-<div class="px-4 py-2 text-gray-500 dark:text-gray-400">
-    No results found
-</div>
-{% endif %}

autocomplete/templates/autocomplete/widget.html

@@ -1,38 +0,0 @@
-{% load static %}
-
-<div class="relative" x-data="{ query: '', selectedId: null }">
-    <input type="text"
-           name="{{ widget.name }}_search"
-           placeholder="{{ widget.attrs.placeholder|default:'Search...' }}"
-           class="{{ widget.attrs.class }}"
-           x-model="query"
-           @keydown.escape="query = ''"
-           hx-get="{% url 'autocomplete:items' ac_name %}"
-           hx-trigger="input changed delay:300ms"
-           hx-target="#{{ widget.name }}-suggestions"
-           hx-indicator="#{{ widget.name }}-indicator">
-
-    <input type="hidden"
-           name="{{ widget.name }}"
-           x-model="selectedId">
-
-    <!-- Loading indicator -->
-    <div id="{{ widget.name }}-indicator"
-         class="htmx-indicator absolute right-3 top-1/2 -translate-y-1/2"
-         role="status"
-         aria-label="Loading search results">
-        <svg class="w-5 h-5 text-gray-400 animate-spin" viewBox="0 0 24 24">
-            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"/>
-            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
-        </svg>
-        <span class="sr-only">Searching...</span>
-    </div>
-
-    <!-- Suggestions dropdown -->
-    <div id="{{ widget.name }}-suggestions"
-         class="absolute z-50 mt-1 w-full bg-white dark:bg-gray-800 rounded-md shadow-lg"
-         role="listbox"
-         style="display: none;"
-         x-show="query.length > 0">
-    </div>
-</div>

autocomplete/urls.py

@@ -1,9 +0,0 @@
-from django.urls import path
-from . import views
-
-app_name = 'autocomplete'
-
-urlpatterns = [
-    path('<str:ac_name>/items/', views.items, name='items'),
-    path('<str:ac_name>/toggle/', views.toggle, name='toggle'),
-]

autocomplete/views.py

@@ -1,52 +0,0 @@
-from django.http import JsonResponse, HttpResponse
-from django.shortcuts import get_object_or_404, render
-from django.apps import apps
-from django.core.exceptions import ImproperlyConfigured
-
-def items(request, ac_name):
-    """Return autocomplete items for a given autocomplete class."""
-    try:
-        # Get the autocomplete class from the registry
-        ac_class = apps.get_app_config('autocomplete').get_autocomplete_class(ac_name)
-        if not ac_class:
-            raise ImproperlyConfigured(f"No autocomplete class found for {ac_name}")
-        
-        # Create instance and get results
-        ac = ac_class()
-        search = request.GET.get('search', '')
-        
-        # Check minimum search length
-        if len(search) < ac.minimum_search_length:
-            return HttpResponse('')
-        
-        # Get and format results
-        results = ac.get_search_results(search)[:ac.max_results]
-        formatted_results = [ac.format_result(obj) for obj in results]
-        
-        # Render suggestions template
-        return render(request, 'autocomplete/suggestions.html', {
-            'results': formatted_results
-        })
-    except Exception as e:
-        return HttpResponse(str(e), status=400)
-
-def toggle(request, ac_name):
-    """Toggle selection state for an autocomplete item."""
-    try:
-        # Get the autocomplete class from the registry
-        ac_class = apps.get_app_config('autocomplete').get_autocomplete_class(ac_name)
-        if not ac_class:
-            raise ImproperlyConfigured(f"No autocomplete class found for {ac_name}")
-        
-        # Create instance and handle toggle
-        ac = ac_class()
-        item_id = request.POST.get('id')
-        if not item_id:
-            raise ValueError("No item ID provided")
-        
-        # Get the object and format it
-        obj = get_object_or_404(ac.model, pk=item_id)
-        result = ac.format_result(obj)
-        return JsonResponse(result)
-    except Exception as e:
-        return JsonResponse({'error': str(e)}, status=400)

frontend/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+***REMOVED***
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+***REMOVED****
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

frontend/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

frontend/eslint.config.mjs

@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;

frontend/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

frontend/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "db:reset": "ts-node src/scripts/db-reset.ts",
+    "db:seed": "ts-node prisma/seed.ts",
+    "prisma:generate": "prisma generate",
+    "prisma:migrate": "prisma migrate deploy"
+  },
+  "dependencies": {
+    "@prisma/client": "^5.8.0",
+    "next": "14.1.0",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.1.0",
+    "postcss": "^8",
+    "prisma": "^5.8.0",
+    "tailwindcss": "^3.3.0",
+    "ts-node": "^10.9.2",
+    "typescript": "^5"
+  }
+}

frontend/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

frontend/prisma/migrations/20250223184307_init/migration.sql

@@ -0,0 +1,116 @@
+-- CreateExtension
+CREATE EXTENSION IF NOT EXISTS "postgis";
+
+-- CreateEnum
+CREATE TYPE "ParkStatus" AS ENUM ('OPERATING', 'CLOSED_TEMP', 'CLOSED_PERM', 'UNDER_CONSTRUCTION', 'DEMOLISHED', 'RELOCATED');
+
+-- CreateTable
+CREATE TABLE "User" (
+    "id" SERIAL PRIMARY KEY,
+    "email" TEXT NOT NULL,
+    "username" TEXT NOT NULL,
+    "password" TEXT,
+    "dateJoined" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+    "isStaff" BOOLEAN NOT NULL DEFAULT false,
+    "isSuperuser" BOOLEAN NOT NULL DEFAULT false,
+    "lastLogin" TIMESTAMP(3)
+);
+
+-- CreateTable
+CREATE TABLE "Park" (
+    "id" SERIAL PRIMARY KEY,
+    "name" TEXT NOT NULL,
+    "slug" TEXT NOT NULL,
+    "description" TEXT,
+    "status" "ParkStatus" NOT NULL DEFAULT 'OPERATING',
+    "location" JSONB,
+    "opening_date" DATE,
+    "closing_date" DATE,
+    "operating_season" TEXT,
+    "size_acres" DECIMAL(10,2),
+    "website" TEXT,
+    "average_rating" DECIMAL(3,2),
+    "ride_count" INTEGER,
+    "coaster_count" INTEGER,
+    "creatorId" INTEGER,
+    "ownerId" INTEGER,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL
+);
+
+-- CreateTable
+CREATE TABLE "ParkArea" (
+    "id" SERIAL PRIMARY KEY,
+    "name" TEXT NOT NULL,
+    "slug" TEXT NOT NULL,
+    "description" TEXT,
+    "opening_date" DATE,
+    "closing_date" DATE,
+    "parkId" INTEGER NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL
+);
+
+-- CreateTable
+CREATE TABLE "Company" (
+    "id" SERIAL PRIMARY KEY,
+    "name" TEXT NOT NULL,
+    "website" TEXT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL
+);
+
+-- CreateTable
+CREATE TABLE "Review" (
+    "id" SERIAL PRIMARY KEY,
+    "content" TEXT NOT NULL,
+    "rating" INTEGER NOT NULL,
+    "parkId" INTEGER NOT NULL,
+    "userId" INTEGER NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL
+);
+
+-- CreateTable
+CREATE TABLE "Photo" (
+    "id" SERIAL PRIMARY KEY,
+    "url" TEXT NOT NULL,
+    "caption" TEXT,
+    "parkId" INTEGER,
+    "reviewId" INTEGER,
+    "userId" INTEGER NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
+CREATE UNIQUE INDEX "User_username_key" ON "User"("username");
+CREATE UNIQUE INDEX "Park_slug_key" ON "Park"("slug");
+CREATE UNIQUE INDEX "ParkArea_parkId_slug_key" ON "ParkArea"("parkId", "slug");
+
+-- AddForeignKey
+ALTER TABLE "Park" ADD CONSTRAINT "Park_creatorId_fkey" FOREIGN KEY ("creatorId") REFERENCES "User"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+ALTER TABLE "Park" ADD CONSTRAINT "Park_ownerId_fkey" FOREIGN KEY ("ownerId") REFERENCES "Company"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "ParkArea" ADD CONSTRAINT "ParkArea_parkId_fkey" FOREIGN KEY ("parkId") REFERENCES "Park"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Review" ADD CONSTRAINT "Review_parkId_fkey" FOREIGN KEY ("parkId") REFERENCES "Park"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+ALTER TABLE "Review" ADD CONSTRAINT "Review_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Photo" ADD CONSTRAINT "Photo_parkId_fkey" FOREIGN KEY ("parkId") REFERENCES "Park"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+ALTER TABLE "Photo" ADD CONSTRAINT "Photo_reviewId_fkey" FOREIGN KEY ("reviewId") REFERENCES "Review"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+ALTER TABLE "Photo" ADD CONSTRAINT "Photo_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- CreateIndex
+CREATE INDEX "Park_slug_idx" ON "Park"("slug");
+CREATE INDEX "ParkArea_slug_idx" ON "ParkArea"("slug");
+CREATE INDEX "Review_parkId_idx" ON "Review"("parkId");
+CREATE INDEX "Review_userId_idx" ON "Review"("userId");
+CREATE INDEX "Photo_parkId_idx" ON "Photo"("parkId");
+CREATE INDEX "Photo_reviewId_idx" ON "Photo"("reviewId");
+CREATE INDEX "Photo_userId_idx" ON "Photo"("userId");

frontend/prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (e.g., Git)
+provider = "postgresql"

frontend/prisma/schema.prisma

@@ -0,0 +1,137 @@
+// This is your Prisma schema file
+
+generator client {
+  provider = "prisma-client-js"
+  previewFeatures = ["postgresqlExtensions"]
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+  extensions = [postgis]
+}
+
+// Core user model
+model User {
+  id              Int       @id @default(autoincrement())
+  email           String    @unique
+  username        String    @unique
+  password        String?
+  dateJoined      DateTime  @default(now())
+  isActive        Boolean   @default(true)
+  isStaff         Boolean   @default(false)
+  isSuperuser     Boolean   @default(false)
+  lastLogin       DateTime?
+  createdParks    Park[]    @relation("ParkCreator")
+  reviews         Review[]
+  photos          Photo[]
+}
+
+// Park model
+model Park {
+  id              Int           @id @default(autoincrement())
+  name            String
+  slug            String        @unique
+  description     String?       @db.Text
+  status          ParkStatus    @default(OPERATING)
+  location        Json?         // Store PostGIS point as JSON for now
+  
+  // Details
+  opening_date    DateTime?     @db.Date
+  closing_date    DateTime?     @db.Date
+  operating_season String?
+  size_acres      Decimal?      @db.Decimal(10, 2)
+  website         String?
+  
+  // Statistics
+  average_rating  Decimal?      @db.Decimal(3, 2)
+  ride_count      Int?
+  coaster_count   Int?
+  
+  // Relationships
+  creator         User?         @relation("ParkCreator", fields: [creatorId], references: [id])
+  creatorId       Int?
+  owner           Company?      @relation(fields: [ownerId], references: [id])
+  ownerId         Int?
+  areas           ParkArea[]
+  reviews         Review[]
+  photos          Photo[]
+  
+  // Metadata
+  created_at      DateTime      @default(now())
+  updated_at      DateTime      @updatedAt
+
+  @@index([slug])
+}
+
+// Park Area model
+model ParkArea {
+  id            Int       @id @default(autoincrement())
+  name          String
+  slug          String
+  description   String?   @db.Text
+  opening_date  DateTime? @db.Date
+  closing_date  DateTime? @db.Date
+  park          Park     @relation(fields: [parkId], references: [id], onDelete: Cascade)
+  parkId        Int
+  created_at    DateTime @default(now())
+  updated_at    DateTime @updatedAt
+
+  @@unique([parkId, slug])
+  @@index([slug])
+}
+
+// Company model (for park owners)
+model Company {
+  id          Int      @id @default(autoincrement())
+  name        String
+  website     String?
+  parks       Park[]
+  created_at  DateTime @default(now())
+  updated_at  DateTime @updatedAt
+}
+
+// Review model
+model Review {
+  id          Int      @id @default(autoincrement())
+  content     String   @db.Text
+  rating      Int
+  park        Park     @relation(fields: [parkId], references: [id])
+  parkId      Int
+  user        User     @relation(fields: [userId], references: [id])
+  userId      Int
+  photos      Photo[]
+  created_at  DateTime @default(now())
+  updated_at  DateTime @updatedAt
+
+  @@index([parkId])
+  @@index([userId])
+}
+
+// Photo model
+model Photo {
+  id          Int      @id @default(autoincrement())
+  url         String
+  caption     String?
+  park        Park?    @relation(fields: [parkId], references: [id])
+  parkId      Int?
+  review      Review?  @relation(fields: [reviewId], references: [id])
+  reviewId    Int?
+  user        User     @relation(fields: [userId], references: [id])
+  userId      Int
+  created_at  DateTime @default(now())
+  updated_at  DateTime @updatedAt
+
+  @@index([parkId])
+  @@index([reviewId])
+  @@index([userId])
+}
+
+enum ParkStatus {
+  OPERATING
+  CLOSED_TEMP
+  CLOSED_PERM
+  UNDER_CONSTRUCTION
+  DEMOLISHED
+  RELOCATED
+}

frontend/prisma/seed.ts

@@ -0,0 +1,148 @@
+import { PrismaClient, ParkStatus } from '@prisma/client';
+
+const prisma = new PrismaClient();
+
+async function main() {
+  // Create test users
+  const user1 = await prisma.user.create({
+    data: {
+      email: 'admin@thrillwiki.com',
+      username: 'admin',
+      password: 'hashed_password_here',
+      isActive: true,
+      isStaff: true,
+      isSuperuser: true,
+    },
+  });
+
+  const user2 = await prisma.user.create({
+    data: {
+      email: 'testuser@thrillwiki.com',
+      username: 'testuser',
+      password: 'hashed_password_here',
+      isActive: true,
+    },
+  });
+
+  // Create test companies
+  const company1 = await prisma.company.create({
+    data: {
+      name: 'Universal Parks & Resorts',
+      website: 'https://www.universalparks.com',
+    },
+  });
+
+  const company2 = await prisma.company.create({
+    data: {
+      name: 'Cedar Fair Entertainment Company',
+      website: 'https://www.cedarfair.com',
+    },
+  });
+
+  // Create test parks
+  const park1 = await prisma.park.create({
+    data: {
+      name: 'Universal Studios Florida',
+      slug: 'universal-studios-florida',
+      description: 'Movie and TV-based theme park in Orlando, Florida',
+      status: ParkStatus.OPERATING,
+      location: {
+        latitude: 28.4742,
+        longitude: -81.4678,
+      },
+      opening_date: new Date('1990-06-07'),
+      operating_season: 'Year-round',
+      size_acres: 108,
+      website: 'https://www.universalorlando.com',
+      average_rating: 4.5,
+      ride_count: 25,
+      coaster_count: 2,
+      creatorId: user1.id,
+      ownerId: company1.id,
+      areas: {
+        create: [
+          {
+            name: 'Production Central',
+            slug: 'production-central',
+            description: 'The main entrance area of the park',
+            opening_date: new Date('1990-06-07'),
+          },
+          {
+            name: 'New York',
+            slug: 'new-york',
+            description: 'Themed after New York City streets',
+            opening_date: new Date('1990-06-07'),
+          },
+        ],
+      },
+    },
+  });
+
+  const park2 = await prisma.park.create({
+    data: {
+      name: 'Cedar Point',
+      slug: 'cedar-point',
+      description: 'The Roller Coaster Capital of the World',
+      status: ParkStatus.OPERATING,
+      location: {
+        latitude: 41.4822,
+        longitude: -82.6837,
+      },
+      opening_date: new Date('1870-05-01'),
+      operating_season: 'May through October',
+      size_acres: 364,
+      website: 'https://www.cedarpoint.com',
+      average_rating: 4.8,
+      ride_count: 71,
+      coaster_count: 17,
+      creatorId: user1.id,
+      ownerId: company2.id,
+      areas: {
+        create: [
+          {
+            name: 'FrontierTown',
+            slug: 'frontiertown',
+            description: 'Western-themed area of the park',
+            opening_date: new Date('1968-05-01'),
+          },
+          {
+            name: 'Millennium Island',
+            slug: 'millennium-island',
+            description: 'Home of the Millennium Force',
+            opening_date: new Date('2000-05-13'),
+          },
+        ],
+      },
+    },
+  });
+
+  // Create test reviews
+  await prisma.review.create({
+    data: {
+      content: 'Amazing theme park with great attention to detail!',
+      rating: 5,
+      parkId: park1.id,
+      userId: user2.id,
+    },
+  });
+
+  await prisma.review.create({
+    data: {
+      content: 'Best roller coasters in the world!',
+      rating: 5,
+      parkId: park2.id,
+      userId: user2.id,
+    },
+  });
+
+  console.log('Seed data created successfully');
+}
+
+main()
+  .catch((e) => {
+    console.error('Error creating seed data:', e);
+    process.exit(1);
+  })
+  .finally(async () => {
+    await prisma.$disconnect();
+  });

frontend/public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

frontend/public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

frontend/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

frontend/public/vercel.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

frontend/public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

frontend/src/app/api/parks/[slug]/route.ts

@@ -0,0 +1,103 @@
+import { NextRequest, NextResponse } from 'next/server';
+import prisma from '@/lib/prisma';
+import { ParkDetailResponse } from '@/types/api';
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { slug: string } }
+): Promise<NextResponse<ParkDetailResponse>> {
+  try {
+    // Ensure database connection is initialized
+    if (!prisma) {
+      throw new Error('Database connection not initialized');
+    }
+
+    // Find park by slug with all relationships
+    const park = await prisma.park.findUnique({
+      where: { slug: params.slug },
+      include: {
+        creator: {
+          select: {
+            id: true,
+            username: true,
+            email: true,
+          },
+        },
+        owner: true,
+        areas: true,
+        reviews: {
+          include: {
+            user: {
+              select: {
+                id: true,
+                username: true,
+              },
+            },
+          },
+        },
+        photos: {
+          include: {
+            user: {
+              select: {
+                id: true,
+                username: true,
+              },
+            },
+          },
+        },
+      },
+    });
+
+    // Return 404 if park not found
+    if (!park) {
+      return NextResponse.json(
+        {
+          success: false,
+          error: 'Park not found',
+        },
+        { status: 404 }
+      );
+    }
+
+    // Format dates consistently with list endpoint
+    const formattedPark = {
+      ...park,
+      opening_date: park.opening_date?.toISOString().split('T')[0],
+      closing_date: park.closing_date?.toISOString().split('T')[0],
+      created_at: park.created_at.toISOString(),
+      updated_at: park.updated_at.toISOString(),
+      // Format nested dates
+      areas: park.areas.map(area => ({
+        ...area,
+        opening_date: area.opening_date?.toISOString().split('T')[0],
+        closing_date: area.closing_date?.toISOString().split('T')[0],
+        created_at: area.created_at.toISOString(),
+        updated_at: area.updated_at.toISOString(),
+      })),
+      reviews: park.reviews.map(review => ({
+        ...review,
+        created_at: review.created_at.toISOString(),
+        updated_at: review.updated_at.toISOString(),
+      })),
+      photos: park.photos.map(photo => ({
+        ...photo,
+        created_at: photo.created_at.toISOString(),
+        updated_at: photo.updated_at.toISOString(),
+      })),
+    };
+
+    return NextResponse.json({
+      success: true,
+      data: formattedPark,
+    });
+  } catch (error) {
+    console.error('Error fetching park:', error);
+    return NextResponse.json(
+      {
+        success: false,
+        error: error instanceof Error ? error.message : 'Failed to fetch park',
+      },
+      { status: 500 }
+    );
+  }
+}

frontend/src/app/api/parks/route.ts

@@ -0,0 +1,88 @@
+import { NextResponse } from 'next/server';
+import { Prisma } from '@prisma/client';
+import prisma from '@/lib/prisma';
+
+export async function GET(request: Request) {
+  try {
+    // Test raw query first
+    try {
+      console.log('Testing database connection...');
+      const rawResult = await prisma.$queryRaw`SELECT tablename FROM pg_catalog.pg_tables WHERE schemaname = 'public'`;
+      console.log('Available tables:', rawResult);
+    } catch (connectionError) {
+      console.error('Raw query test failed:', connectionError);
+      throw new Error('Database connection test failed');
+    }
+
+    // Basic query with explicit types
+    try {
+      const queryResult = await prisma.$transaction(async (tx) => {
+        // Count total parks
+        const totalCount = await tx.park.count();
+        console.log('Total parks count:', totalCount);
+
+        // Fetch parks with minimal fields
+        const parks = await tx.park.findMany({
+          take: 10,
+          select: {
+            id: true,
+            name: true,
+            slug: true,
+            status: true,
+            owner: {
+              select: {
+                id: true,
+                name: true
+              }
+            }
+          },
+          orderBy: {
+            name: 'asc'
+          }
+        } satisfies Prisma.ParkFindManyArgs);
+
+        return { totalCount, parks };
+      });
+
+      return NextResponse.json({
+        success: true,
+        data: queryResult.parks,
+        meta: {
+          total: queryResult.totalCount
+        }
+      });
+
+    } catch (queryError) {
+      if (queryError instanceof Prisma.PrismaClientKnownRequestError) {
+        console.error('Known Prisma error:', {
+          code: queryError.code,
+          meta: queryError.meta,
+          message: queryError.message
+        });
+        throw new Error(`Database query failed: ${queryError.code}`);
+      }
+      throw queryError;
+    }
+
+  } catch (error) {
+    console.error('Error in /api/parks:', {
+      name: error instanceof Error ? error.name : 'Unknown',
+      message: error instanceof Error ? error.message : 'Unknown error',
+      stack: error instanceof Error ? error.stack : undefined
+    });
+
+    return NextResponse.json(
+      {
+        success: false,
+        error: error instanceof Error ? error.message : 'Failed to fetch parks'
+      },
+      { 
+        status: 500,
+        headers: {
+          'Cache-Control': 'no-store, must-revalidate',
+          'Content-Type': 'application/json'
+        }
+      }
+    );
+  }
+}

frontend/src/app/api/parks/suggest/route.ts

@@ -0,0 +1,50 @@
+import { NextResponse } from 'next/server';
+import prisma from '@/lib/prisma';
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const search = searchParams.get('search')?.trim();
+    
+    if (!search) {
+      return NextResponse.json({
+        success: true,
+        data: []
+      });
+    }
+
+    const parks = await prisma.park.findMany({
+      where: {
+        OR: [
+          { name: { contains: search, mode: 'insensitive' } },
+          { owner: { name: { contains: search, mode: 'insensitive' } } }
+        ]
+      },
+      select: {
+        id: true,
+        name: true,
+        slug: true,
+        status: true,
+        owner: {
+          select: {
+            name: true,
+            slug: true
+          }
+        }
+      },
+      take: 8 // Limit quick search results like Django
+    });
+
+    return NextResponse.json({
+      success: true,
+      data: parks
+    });
+
+  } catch (error) {
+    console.error('Error in /api/parks/suggest:', error);
+    return NextResponse.json({
+      success: false,
+      error: 'Failed to fetch park suggestions'
+    }, { status: 500 });
+  }
+}

frontend/src/app/globals.css

@@ -0,0 +1,21 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}

frontend/src/app/layout.tsx

@@ -0,0 +1,62 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "ThrillWiki - Theme Park Information & Reviews",
+  description: "Discover theme parks, share experiences, and read reviews from park enthusiasts.",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <div className="min-h-screen bg-white">
+          <header className="bg-indigo-600">
+            <nav className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8" aria-label="Top">
+              <div className="flex w-full items-center justify-between border-b border-indigo-500 py-6">
+                <div className="flex items-center">
+                  <a href="/" className="text-white text-2xl font-bold">
+                    ThrillWiki
+                  </a>
+                </div>
+                <div className="ml-10 space-x-4">
+                  <a
+                    href="/parks"
+                    className="inline-block rounded-md border border-transparent bg-indigo-500 py-2 px-4 text-base font-medium text-white hover:bg-opacity-75"
+                  >
+                    Parks
+                  </a>
+                  <a
+                    href="/login"
+                    className="inline-block rounded-md border border-transparent bg-white py-2 px-4 text-base font-medium text-indigo-600 hover:bg-indigo-50"
+                  >
+                    Login
+                  </a>
+                </div>
+              </div>
+            </nav>
+          </header>
+
+          {children}
+
+          <footer className="bg-white">
+            <div className="mx-auto max-w-7xl px-6 py-12 md:flex md:items-center md:justify-between lg:px-8">
+              <div className="mt-8 md:order-1 md:mt-0">
+                <p className="text-center text-xs leading-5 text-gray-500">
+                  &copy; {new Date().getFullYear()} ThrillWiki. All rights reserved.
+                </p>
+              </div>
+            </div>
+          </footer>
+        </div>
+      </body>
+    </html>
+  );
+}

frontend/src/app/page.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import type { Park } from '@/types/api';
+
+export default function Home() {
+  const [parks, setParks] = useState<Park[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchParks() {
+      try {
+        const response = await fetch('/api/parks');
+        const data = await response.json();
+        
+        if (!data.success) {
+          throw new Error(data.error || 'Failed to fetch parks');
+        }
+
+        setParks(data.data || []);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'An error occurred');
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchParks();
+  }, []);
+
+  if (loading) {
+    return (
+      <main className="min-h-screen p-8">
+        <div className="text-center">
+          <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]" />
+          <p className="mt-4 text-gray-600">Loading parks...</p>
+        </div>
+      </main>
+    );
+  }
+
+  if (error) {
+    return (
+      <main className="min-h-screen p-8">
+        <div className="rounded-lg bg-red-50 p-4 border border-red-200">
+          <h2 className="text-red-800 font-semibold">Error</h2>
+          <p className="text-red-600 mt-2">{error}</p>
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <main className="min-h-screen p-8">
+      <h1 className="text-3xl font-bold mb-8">ThrillWiki Parks</h1>
+      
+      {parks.length === 0 ? (
+        <p className="text-gray-600">No parks found</p>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {parks.map((park) => (
+            <div
+              key={park.id}
+              className="rounded-lg border border-gray-200 p-6 hover:shadow-lg transition-shadow"
+            >
+              <h2 className="text-xl font-semibold mb-2">{park.name}</h2>
+              {park.description && (
+                <p className="text-gray-600 mb-4">
+                  {park.description.length > 150
+                    ? `${park.description.slice(0, 150)}...`
+                    : park.description}
+                </p>
+              )}
+              <div className="text-sm text-gray-500">
+                Added: {new Date(park.createdAt).toLocaleDateString()}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </main>
+  );
+}

frontend/src/app/parks/[slug]/loading.tsx

@@ -0,0 +1,99 @@
+export default function ParkDetailLoading() {
+  return (
+    <main className="container mx-auto px-4 py-8 animate-pulse">
+      <article className="bg-white rounded-lg shadow-lg p-6">
+        {/* Header skeleton */}
+        <header className="mb-8">
+          <div className="h-10 w-3/4 bg-gray-200 rounded mb-4"></div>
+          <div className="flex items-center gap-4">
+            <div className="h-6 w-24 bg-gray-200 rounded-full"></div>
+            <div className="h-6 w-32 bg-gray-200 rounded"></div>
+          </div>
+        </header>
+
+        {/* Description skeleton */}
+        <section className="mb-8">
+          <div className="space-y-2">
+            <div className="h-4 bg-gray-200 rounded w-full"></div>
+            <div className="h-4 bg-gray-200 rounded w-5/6"></div>
+            <div className="h-4 bg-gray-200 rounded w-4/6"></div>
+          </div>
+        </section>
+
+        {/* Details skeleton */}
+        <section className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
+          <div>
+            <div className="h-8 w-32 bg-gray-200 rounded mb-4"></div>
+            <div className="space-y-4">
+              {[...Array(4)].map((_, i) => (
+                <div key={i} className="grid grid-cols-2 gap-4">
+                  <div className="h-6 bg-gray-200 rounded"></div>
+                  <div className="h-6 bg-gray-200 rounded"></div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div>
+            <div className="h-8 w-32 bg-gray-200 rounded mb-4"></div>
+            <div className="bg-gray-100 p-4 rounded-lg">
+              <div className="space-y-2">
+                <div className="h-6 bg-gray-200 rounded"></div>
+                <div className="h-6 bg-gray-200 rounded"></div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Areas skeleton */}
+        <section className="mb-8">
+          <div className="h-8 w-32 bg-gray-200 rounded mb-4"></div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {[...Array(3)].map((_, i) => (
+              <div key={i} className="bg-gray-50 p-4 rounded-lg">
+                <div className="h-6 bg-gray-200 rounded mb-2"></div>
+                <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* Reviews skeleton */}
+        <section className="mb-8">
+          <div className="h-8 w-32 bg-gray-200 rounded mb-4"></div>
+          <div className="space-y-4">
+            {[...Array(2)].map((_, i) => (
+              <div key={i} className="bg-gray-50 p-4 rounded-lg">
+                <div className="flex justify-between items-start mb-2">
+                  <div className="space-y-2">
+                    <div className="h-6 bg-gray-200 rounded w-32"></div>
+                    <div className="h-4 bg-gray-200 rounded w-24"></div>
+                  </div>
+                  <div className="h-6 w-24 bg-gray-200 rounded"></div>
+                </div>
+                <div className="space-y-2 mt-4">
+                  <div className="h-4 bg-gray-200 rounded w-full"></div>
+                  <div className="h-4 bg-gray-200 rounded w-5/6"></div>
+                </div>
+                <div className="mt-2 flex gap-2">
+                  {[...Array(2)].map((_, j) => (
+                    <div key={j} className="w-24 h-24 bg-gray-200 rounded"></div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* Photos skeleton */}
+        <section>
+          <div className="h-8 w-32 bg-gray-200 rounded mb-4"></div>
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+            {[...Array(8)].map((_, i) => (
+              <div key={i} className="aspect-square bg-gray-200 rounded-lg"></div>
+            ))}
+          </div>
+        </section>
+      </article>
+    </main>
+  );
+}

frontend/src/app/parks/[slug]/page.tsx

@@ -0,0 +1,194 @@
+import { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { Park, ParkDetailResponse } from '@/types/api';
+
+// Dynamically generate metadata for park pages
+export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
+  try {
+    const park = await fetchParkData(params.slug);
+    return {
+      title: `${park.name} | ThrillWiki`,
+      description: park.description || `Details about ${park.name}`,
+    };
+  } catch (error) {
+    return {
+      title: 'Park Not Found | ThrillWiki',
+      description: 'The requested park could not be found.',
+    };
+  }
+}
+
+// Fetch park data from API
+async function fetchParkData(slug: string): Promise<Park> {
+  const response = await fetch(`${process***REMOVED***.NEXT_PUBLIC_API_URL}/api/parks/${slug}`, {
+    next: { revalidate: 60 }, // Cache for 1 minute
+  });
+
+  if (!response.ok) {
+    if (response.status === 404) {
+      notFound();
+    }
+    throw new Error('Failed to fetch park data');
+  }
+
+  const { data }: ParkDetailResponse = await response.json();
+  return data;
+}
+
+// Park detail page component
+export default async function ParkDetailPage({ params }: { params: { slug: string } }) {
+  const park = await fetchParkData(params.slug);
+
+  return (
+    <main className="container mx-auto px-4 py-8">
+      <article className="bg-white rounded-lg shadow-lg p-6">
+        {/* Park header */}
+        <header className="mb-8">
+          <h1 className="text-4xl font-bold mb-4">{park.name}</h1>
+          <div className="flex items-center gap-4 text-gray-600">
+            <span className={`px-3 py-1 rounded-full text-sm ${
+              park.status === 'OPERATING' ? 'bg-green-100 text-green-800' :
+              park.status === 'CLOSED_TEMP' ? 'bg-yellow-100 text-yellow-800' :
+              park.status === 'UNDER_CONSTRUCTION' ? 'bg-blue-100 text-blue-800' :
+              'bg-red-100 text-red-800'
+            }`}>
+              {park.status.replace('_', ' ')}
+            </span>
+            {park.opening_date && (
+              <span>Opened: {park.opening_date}</span>
+            )}
+          </div>
+        </header>
+
+        {/* Park description */}
+        {park.description && (
+          <section className="mb-8">
+            <p className="text-gray-700 leading-relaxed">{park.description}</p>
+          </section>
+        )}
+
+        {/* Park details */}
+        <section className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
+          <div>
+            <h2 className="text-2xl font-semibold mb-4">Details</h2>
+            <dl className="grid grid-cols-2 gap-4">
+              {park.size_acres && (
+                <>
+                  <dt className="font-medium text-gray-600">Size</dt>
+                  <dd>{park.size_acres} acres</dd>
+                </>
+              )}
+              {park.operating_season && (
+                <>
+                  <dt className="font-medium text-gray-600">Season</dt>
+                  <dd>{park.operating_season}</dd>
+                </>
+              )}
+              {park.ride_count && (
+                <>
+                  <dt className="font-medium text-gray-600">Total Rides</dt>
+                  <dd>{park.ride_count}</dd>
+                </>
+              )}
+              {park.coaster_count && (
+                <>
+                  <dt className="font-medium text-gray-600">Roller Coasters</dt>
+                  <dd>{park.coaster_count}</dd>
+                </>
+              )}
+              {park.average_rating && (
+                <>
+                  <dt className="font-medium text-gray-600">Average Rating</dt>
+                  <dd>{park.average_rating.toFixed(1)} / 5.0</dd>
+                </>
+              )}
+            </dl>
+          </div>
+
+          {/* Location */}
+          {park.location && (
+            <div>
+              <h2 className="text-2xl font-semibold mb-4">Location</h2>
+              <div className="bg-gray-100 p-4 rounded-lg">
+                <p>Latitude: {park.location.latitude}</p>
+                <p>Longitude: {park.location.longitude}</p>
+              </div>
+            </div>
+          )}
+        </section>
+
+        {/* Areas */}
+        {park.areas.length > 0 && (
+          <section className="mb-8">
+            <h2 className="text-2xl font-semibold mb-4">Areas</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {park.areas.map(area => (
+                <div key={area.id} className="bg-gray-50 p-4 rounded-lg">
+                  <h3 className="font-semibold mb-2">{area.name}</h3>
+                  {area.description && (
+                    <p className="text-sm text-gray-600">{area.description}</p>
+                  )}
+                </div>
+              ))}
+            </div>
+          </section>
+        )}
+
+        {/* Reviews */}
+        {park.reviews.length > 0 && (
+          <section className="mb-8">
+            <h2 className="text-2xl font-semibold mb-4">Reviews</h2>
+            <div className="space-y-4">
+              {park.reviews.map(review => (
+                <div key={review.id} className="bg-gray-50 p-4 rounded-lg">
+                  <div className="flex justify-between items-start mb-2">
+                    <div>
+                      <span className="font-medium">{review.user.username}</span>
+                      <span className="text-gray-600 text-sm ml-2">
+                        {new Date(review.created_at).toLocaleDateString()}
+                      </span>
+                    </div>
+                    <div className="text-yellow-500">{
+                      '★'.repeat(review.rating) + '☆'.repeat(5 - review.rating)
+                    }</div>
+                  </div>
+                  <p className="text-gray-700">{review.content}</p>
+                  {review.photos.length > 0 && (
+                    <div className="mt-2 flex gap-2 flex-wrap">
+                      {review.photos.map(photo => (
+                        <img
+                          key={photo.id}
+                          src={photo.url}
+                          alt={photo.caption || `Photo by ${photo.user.username}`}
+                          className="w-24 h-24 object-cover rounded"
+                        />
+                      ))}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </section>
+        )}
+
+        {/* Photos */}
+        {park.photos.length > 0 && (
+          <section>
+            <h2 className="text-2xl font-semibold mb-4">Photos</h2>
+            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+              {park.photos.map(photo => (
+                <div key={photo.id} className="aspect-square relative">
+                  <img
+                    src={photo.url}
+                    alt={photo.caption || `Photo of ${park.name}`}
+                    className="absolute inset-0 w-full h-full object-cover rounded-lg"
+                  />
+                </div>
+              ))}
+            </div>
+          </section>
+        )}
+      </article>
+    </main>
+  );
+}

frontend/src/app/parks/page.tsx

@@ -0,0 +1,150 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import type { Park, ParkFilterValues, Company } from '@/types/api';
+import { ParkSearch } from '@/components/parks/ParkSearch';
+import { ViewToggle } from '@/components/parks/ViewToggle';
+import { ParkList } from '@/components/parks/ParkList';
+import { ParkFilters } from '@/components/parks/ParkFilters';
+
+export default function ParksPage() {
+  const [parks, setParks] = useState<Park[]>([]);
+  const [companies, setCompanies] = useState<Company[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [filters, setFilters] = useState<ParkFilterValues>({});
+
+  // Fetch companies for filter dropdown
+  useEffect(() => {
+    async function fetchCompanies() {
+      try {
+        const response = await fetch('/api/companies');
+        const data = await response.json();
+        if (!data.success) {
+          throw new Error(data.error || 'Failed to fetch companies');
+        }
+        setCompanies(data.data || []);
+      } catch (err) {
+        console.error('Failed to fetch companies:', err);
+        // Don't set error state for companies - just show empty list
+        setCompanies([]);
+      }
+    }
+    fetchCompanies();
+  }, []);
+
+  // Fetch parks with filters
+  useEffect(() => {
+    async function fetchParks() {
+      try {
+        setLoading(true);
+        setError(null);
+
+        const queryParams = new URLSearchParams();
+        
+        // Only add defined parameters
+        if (searchQuery?.trim()) queryParams.set('search', searchQuery.trim());
+        if (filters.status) queryParams.set('status', filters.status);
+        if (filters.ownerId) queryParams.set('ownerId', filters.ownerId);
+        if (filters.hasOwner !== undefined) queryParams.set('hasOwner', filters.hasOwner.toString());
+        if (filters.minRides) queryParams.set('minRides', filters.minRides.toString());
+        if (filters.minCoasters) queryParams.set('minCoasters', filters.minCoasters.toString());
+        if (filters.minSize) queryParams.set('minSize', filters.minSize.toString());
+        if (filters.openingDateStart) queryParams.set('openingDateStart', filters.openingDateStart);
+        if (filters.openingDateEnd) queryParams.set('openingDateEnd', filters.openingDateEnd);
+
+        const response = await fetch(`/api/parks?${queryParams}`);
+        const data = await response.json();
+        
+        if (!data.success) {
+          throw new Error(data.error || 'Failed to fetch parks');
+        }
+
+        setParks(data.data || []);
+        setError(null);
+      } catch (err) {
+        console.error('Error fetching parks:', err);
+        setError(err instanceof Error ? err.message : 'An error occurred while fetching parks');
+        setParks([]);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchParks();
+  }, [searchQuery, filters]);
+
+  const handleSearch = (query: string) => {
+    setSearchQuery(query);
+  };
+
+  const handleFiltersChange = (newFilters: ParkFilterValues) => {
+    setFilters(newFilters);
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen p-8">
+        <div className="text-center">
+          <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]" />
+          <p className="mt-4 text-gray-600">Loading parks...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error && !parks.length) {
+    return (
+      <div className="p-4" data-testid="park-list-error">
+        <div className="inline-flex items-center px-4 py-2 rounded-md bg-red-50 text-red-700">
+          <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
+            <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd"/>
+          </svg>
+          {error}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen p-8">
+      <div className="max-w-7xl mx-auto">
+        <div className="flex justify-between items-center mb-6">
+          <div className="flex items-center space-x-4">
+            <h1 className="text-2xl font-bold text-gray-900">Parks</h1>
+            <ViewToggle currentView={viewMode} onViewChange={setViewMode} />
+          </div>
+        </div>
+
+        <div className="mb-6">
+          <ParkSearch onSearch={handleSearch} />
+          <ParkFilters onFiltersChange={handleFiltersChange} companies={companies} />
+        </div>
+
+        <div
+          id="park-results"
+          className="bg-white rounded-lg shadow overflow-hidden"
+          data-view-mode={viewMode}
+        >
+          <div className="transition-all duration-300 ease-in-out">
+            <ParkList 
+              parks={parks}
+              viewMode={viewMode}
+              searchQuery={searchQuery}
+            />
+          </div>
+        </div>
+
+        {error && parks.length > 0 && (
+          <div className="mt-4 p-4 bg-yellow-50 border border-yellow-200 rounded-lg text-yellow-800">
+            <p className="text-sm">
+              Some data might be incomplete or outdated: {error}
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/error-boundary.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { Component, ErrorInfo, ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error?: Error;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false
+  };
+
+  public static getDerivedStateFromError(error: Error): State {
+    return {
+      hasError: true,
+      error
+    };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('Uncaught error:', error, errorInfo);
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      return this.props.fallback || (
+        <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+          <div className="max-w-md w-full space-y-8">
+            <div className="rounded-md bg-red-50 p-4">
+              <div className="flex">
+                <div className="flex-shrink-0">
+                  <svg
+                    className="h-5 w-5 text-red-400"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </div>
+                <div className="ml-3">
+                  <h3 className="text-sm font-medium text-red-800">
+                    Something went wrong
+                  </h3>
+                  {this.state.error && (
+                    <div className="mt-2 text-sm text-red-700">
+                      <p>{this.state.error.message}</p>
+                    </div>
+                  )}
+                  <div className="mt-4">
+                    <button
+                      type="button"
+                      onClick={() => window.location.reload()}
+                      className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
+                    >
+                      Retry
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

frontend/src/components/parks/ParkCard.tsx

@@ -0,0 +1,55 @@
+import Link from 'next/link';
+import type { Park } from '@/types/api';
+
+interface ParkCardProps {
+  park: Park;
+}
+
+function getStatusBadgeClass(status: string): string {
+  const statusClasses = {
+    OPERATING: 'bg-green-100 text-green-800',
+    CLOSED_TEMP: 'bg-yellow-100 text-yellow-800',
+    CLOSED_PERM: 'bg-red-100 text-red-800',
+    UNDER_CONSTRUCTION: 'bg-blue-100 text-blue-800',
+    DEMOLISHED: 'bg-gray-100 text-gray-800',
+    RELOCATED: 'bg-purple-100 text-purple-800'
+  };
+  return statusClasses[status as keyof typeof statusClasses] || 'bg-gray-100 text-gray-500';
+}
+
+export function ParkCard({ park }: ParkCardProps) {
+  const statusClass = getStatusBadgeClass(park.status);
+  const formattedStatus = park.status.replace(/_/g, ' ');
+
+  return (
+    <div className="overflow-hidden transition-transform transform bg-white rounded-lg shadow-lg dark:bg-gray-800 hover:-translate-y-1">
+      <div className="p-4">
+        <h2 className="mb-2 text-xl font-bold">
+          <Link
+            href={`/parks/${park.slug}`}
+            className="text-gray-900 hover:text-blue-600 dark:text-white dark:hover:text-blue-400"
+          >
+            {park.name}
+          </Link>
+        </h2>
+
+        <div className="flex flex-wrap gap-2">
+          <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${statusClass}`}>
+            {formattedStatus}
+          </span>
+        </div>
+
+        {park.owner && (
+          <div className="mt-4 text-sm">
+            <Link
+              href={`/companies/${park.owner.slug}`}
+              className="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
+            >
+              {park.owner.name}
+            </Link>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/parks/ParkFilters.tsx

@@ -0,0 +1,182 @@
+'use client';
+
+import { useState } from 'react';
+import type { Company, ParkStatus } from '@/types/api';
+
+const STATUS_OPTIONS = {
+  OPERATING: 'Operating',
+  CLOSED_TEMP: 'Temporarily Closed',
+  CLOSED_PERM: 'Permanently Closed',
+  UNDER_CONSTRUCTION: 'Under Construction',
+  DEMOLISHED: 'Demolished',
+  RELOCATED: 'Relocated'
+} as const;
+
+interface ParkFiltersProps {
+  onFiltersChange: (filters: ParkFilterValues) => void;
+  companies: Company[];
+}
+
+interface ParkFilterValues {
+  status?: ParkStatus;
+  ownerId?: string;
+  hasOwner?: boolean;
+  minRides?: number;
+  minCoasters?: number;
+  minSize?: number;
+  openingDateStart?: string;
+  openingDateEnd?: string;
+}
+
+export function ParkFilters({ onFiltersChange, companies }: ParkFiltersProps) {
+  const [filters, setFilters] = useState<ParkFilterValues>({});
+
+  const handleFilterChange = (field: keyof ParkFilterValues, value: any) => {
+    const newFilters = {
+      ...filters,
+      [field]: value === '' ? undefined : value
+    };
+    setFilters(newFilters);
+    onFiltersChange(newFilters);
+  };
+
+  return (
+    <div className="bg-white shadow sm:rounded-lg">
+      <div className="px-4 py-5 sm:p-6">
+        <h3 className="text-lg font-medium leading-6 text-gray-900">Filters</h3>
+        <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {/* Status Filter */}
+          <div>
+            <label htmlFor="status" className="block text-sm font-medium text-gray-700">
+              Operating Status
+            </label>
+            <select
+              id="status"
+              name="status"
+              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+              value={filters.status || ''}
+              onChange={(e) => handleFilterChange('status', e.target.value)}
+            >
+              <option value="">Any status</option>
+              {Object.entries(STATUS_OPTIONS).map(([value, label]) => (
+                <option key={value} value={value}>
+                  {label}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Owner Filter */}
+          <div>
+            <label htmlFor="owner" className="block text-sm font-medium text-gray-700">
+              Operating Company
+            </label>
+            <select
+              id="owner"
+              name="owner"
+              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+              value={filters.ownerId || ''}
+              onChange={(e) => handleFilterChange('ownerId', e.target.value)}
+            >
+              <option value="">Any company</option>
+              {companies.map((company) => (
+                <option key={company.id} value={company.id}>
+                  {company.name}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Has Owner Filter */}
+          <div>
+            <label htmlFor="hasOwner" className="block text-sm font-medium text-gray-700">
+              Company Status
+            </label>
+            <select
+              id="hasOwner"
+              name="hasOwner"
+              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+              value={filters.hasOwner === undefined ? '' : filters.hasOwner.toString()}
+              onChange={(e) => handleFilterChange('hasOwner', e.target.value === '' ? undefined : e.target.value === 'true')}
+            >
+              <option value="">Show all</option>
+              <option value="true">Has company</option>
+              <option value="false">No company</option>
+            </select>
+          </div>
+
+          {/* Min Rides Filter */}
+          <div>
+            <label htmlFor="minRides" className="block text-sm font-medium text-gray-700">
+              Minimum Rides
+            </label>
+            <input
+              type="number"
+              id="minRides"
+              name="minRides"
+              min="0"
+              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+              value={filters.minRides || ''}
+              onChange={(e) => handleFilterChange('minRides', e.target.value ? parseInt(e.target.value, 10) : '')}
+            />
+          </div>
+
+          {/* Min Coasters Filter */}
+          <div>
+            <label htmlFor="minCoasters" className="block text-sm font-medium text-gray-700">
+              Minimum Roller Coasters
+            </label>
+            <input
+              type="number"
+              id="minCoasters"
+              name="minCoasters"
+              min="0"
+              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+              value={filters.minCoasters || ''}
+              onChange={(e) => handleFilterChange('minCoasters', e.target.value ? parseInt(e.target.value, 10) : '')}
+            />
+          </div>
+
+          {/* Min Size Filter */}
+          <div>
+            <label htmlFor="minSize" className="block text-sm font-medium text-gray-700">
+              Minimum Size (acres)
+            </label>
+            <input
+              type="number"
+              id="minSize"
+              name="minSize"
+              min="0"
+              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+              value={filters.minSize || ''}
+              onChange={(e) => handleFilterChange('minSize', e.target.value ? parseInt(e.target.value, 10) : '')}
+            />
+          </div>
+
+          {/* Opening Date Range */}
+          <div className="sm:col-span-2 lg:col-span-3">
+            <label className="block text-sm font-medium text-gray-700">Opening Date Range</label>
+            <div className="mt-1 grid grid-cols-2 gap-4">
+              <input
+                type="date"
+                id="openingDateStart"
+                name="openingDateStart"
+                className="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+                value={filters.openingDateStart || ''}
+                onChange={(e) => handleFilterChange('openingDateStart', e.target.value)}
+              />
+              <input
+                type="date"
+                id="openingDateEnd"
+                name="openingDateEnd"
+                className="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+                value={filters.openingDateEnd || ''}
+                onChange={(e) => handleFilterChange('openingDateEnd', e.target.value)}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/parks/ParkList.tsx

@@ -0,0 +1,41 @@
+import type { Park } from '@/types/api';
+import { ParkCard } from './ParkCard';
+import { ParkListItem } from './ParkListItem';
+
+interface ParkListProps {
+  parks: Park[];
+  viewMode: 'grid' | 'list';
+  searchQuery?: string;
+}
+
+export function ParkList({ parks, viewMode, searchQuery }: ParkListProps) {
+  if (parks.length === 0) {
+    return (
+      <div className="col-span-full p-4 text-sm text-gray-500 text-center" data-testid="no-parks-found">
+        {searchQuery ? (
+          <>No parks found matching "{searchQuery}". Try adjusting your search terms.</>
+        ) : (
+          <>No parks found matching your criteria. Try adjusting your filters.</>
+        )}
+      </div>
+    );
+  }
+
+  if (viewMode === 'list') {
+    return (
+      <div className="divide-y divide-gray-200">
+        {parks.map((park) => (
+          <ParkListItem key={park.id} park={park} />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+      {parks.map((park) => (
+        <ParkCard key={park.id} park={park} />
+      ))}
+    </div>
+  );
+}

frontend/src/components/parks/ParkListItem.tsx

@@ -0,0 +1,70 @@
+import Link from 'next/link';
+import type { Park } from '@/types/api';
+
+interface ParkListItemProps {
+  park: Park;
+}
+
+function getStatusBadgeClass(status: string): string {
+  const statusClasses = {
+    OPERATING: 'bg-green-100 text-green-800',
+    CLOSED_TEMP: 'bg-yellow-100 text-yellow-800',
+    CLOSED_PERM: 'bg-red-100 text-red-800',
+    UNDER_CONSTRUCTION: 'bg-blue-100 text-blue-800',
+    DEMOLISHED: 'bg-gray-100 text-gray-800',
+    RELOCATED: 'bg-purple-100 text-purple-800'
+  };
+  return statusClasses[status as keyof typeof statusClasses] || 'bg-gray-100 text-gray-500';
+}
+
+export function ParkListItem({ park }: ParkListItemProps) {
+  const statusClass = getStatusBadgeClass(park.status);
+  const formattedStatus = park.status.replace(/_/g, ' ');
+
+  return (
+    <div className="flex flex-col sm:flex-row sm:items-center justify-between p-4 border-b border-gray-200 last:border-b-0">
+      <div className="flex-1">
+        <div className="flex items-start justify-between">
+          <h2 className="text-lg font-semibold mb-1">
+            <Link
+              href={`/parks/${park.slug}`}
+              className="text-gray-900 hover:text-blue-600 dark:text-white dark:hover:text-blue-400"
+            >
+              {park.name}
+            </Link>
+          </h2>
+          <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${statusClass}`}>
+            {formattedStatus}
+          </span>
+        </div>
+
+        {park.owner && (
+          <div className="text-sm mb-2">
+            <Link
+              href={`/companies/${park.owner.slug}`}
+              className="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
+            >
+              {park.owner.name}
+            </Link>
+          </div>
+        )}
+
+        <div className="text-sm text-gray-600 space-x-4">
+          {park.location && (
+            <span>
+              {[
+                park.location.city,
+                park.location.state,
+                park.location.country
+              ].filter(Boolean).join(', ')}
+            </span>
+          )}
+          <span>{park.ride_count} rides</span>
+          {park.opening_date && (
+            <span>Opened: {new Date(park.opening_date).toLocaleDateString()}</span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/parks/ParkSearch.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import debounce from 'lodash/debounce';
+
+interface ParkSearchProps {
+  onSearch: (query: string) => void;
+}
+
+export function ParkSearch({ onSearch }: ParkSearchProps) {
+  const [query, setQuery] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [suggestions, setSuggestions] = useState<Array<{ id: string; name: string; slug: string }>>([]);
+
+  const debouncedFetchSuggestions = useCallback(
+    debounce(async (searchQuery: string) => {
+      if (!searchQuery.trim()) {
+        setSuggestions([]);
+        return;
+      }
+
+      try {
+        setIsLoading(true);
+        const response = await fetch(`/api/parks/suggest?search=${encodeURIComponent(searchQuery)}`);
+        const data = await response.json();
+        
+        if (data.success) {
+          setSuggestions(data.data || []);
+        }
+      } catch (error) {
+        console.error('Failed to fetch suggestions:', error);
+        setSuggestions([]);
+      } finally {
+        setIsLoading(false);
+      }
+    }, 300),
+    []
+  );
+
+  const handleSearch = (searchQuery: string) => {
+    setQuery(searchQuery);
+    debouncedFetchSuggestions(searchQuery);
+    onSearch(searchQuery);
+  };
+
+  const handleSuggestionClick = (suggestion: { name: string; slug: string }) => {
+    setQuery(suggestion.name);
+    setSuggestions([]);
+    onSearch(suggestion.name);
+  };
+
+  return (
+    <div className="max-w-3xl mx-auto relative mb-8">
+      <div className="w-full relative">
+        <div className="relative">
+          <input
+            type="search"
+            value={query}
+            onChange={(e) => handleSearch(e.target.value)}
+            placeholder="Search parks..."
+            className="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+            aria-label="Search parks"
+            aria-controls="search-results"
+            aria-expanded={suggestions.length > 0}
+          />
+
+          {isLoading && (
+            <div 
+              className="absolute right-3 top-1/2 -translate-y-1/2"
+              role="status"
+              aria-label="Loading search results"
+            >
+              <svg className="w-5 h-5 text-gray-400 animate-spin" viewBox="0 0 24 24">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none"/>
+                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
+              </svg>
+              <span className="sr-only">Searching...</span>
+            </div>
+          )}
+        </div>
+
+        {suggestions.length > 0 && (
+          <div
+            id="search-results"
+            className="absolute z-50 mt-1 w-full bg-white dark:bg-gray-800 rounded-md shadow-lg"
+            role="listbox"
+          >
+            <ul>
+              {suggestions.map((suggestion) => (
+                <li
+                  key={suggestion.id}
+                  className="px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer"
+                  role="option"
+                  onClick={() => handleSuggestionClick(suggestion)}
+                >
+                  {suggestion.name}
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/parks/ViewToggle.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+interface ViewToggleProps {
+  currentView: 'grid' | 'list';
+  onViewChange: (view: 'grid' | 'list') => void;
+}
+
+export function ViewToggle({ currentView, onViewChange }: ViewToggleProps) {
+  return (
+    <fieldset className="flex items-center space-x-2 bg-gray-100 rounded-lg p-1">
+      <legend className="sr-only">View mode selection</legend>
+      <button
+        onClick={() => onViewChange('grid')}
+        className={`p-2 rounded transition-colors duration-200 ${
+          currentView === 'grid' ? 'bg-white shadow-sm' : ''
+        }`}
+        aria-label="Grid view"
+        aria-pressed={currentView === 'grid'}
+      >
+        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M4 6h16M4 10h16M4 14h16M4 18h16"
+          />
+        </svg>
+      </button>
+      <button
+        onClick={() => onViewChange('list')}
+        className={`p-2 rounded transition-colors duration-200 ${
+          currentView === 'list' ? 'bg-white shadow-sm' : ''
+        }`}
+        aria-label="List view"
+        aria-pressed={currentView === 'list'}
+      >
+        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M4 6h16M4 12h7"
+          />
+        </svg>
+      </button>
+    </fieldset>
+  );
+}

frontend/src/middleware.ts

@@ -0,0 +1,25 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export async function middleware(request: NextRequest) {
+  const response = NextResponse.next();
+
+  // Add additional headers
+  response.headers.set('x-middleware-cache', 'no-cache');
+
+  // CORS headers for API routes
+  if (request.nextUrl.pathname.startsWith('/api/')) {
+    response.headers.set('Access-Control-Allow-Origin', '*');
+    response.headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
+    response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
+  }
+
+  return response;
+}
+
+// Configure routes that need middleware
+export const config = {
+  matcher: [
+    '/api/:path*',
+  ]
+};

frontend/src/scripts/db-reset.ts

@@ -0,0 +1,38 @@
+import { PrismaClient } from '@prisma/client';
+const prisma = new PrismaClient();
+
+async function reset() {
+  try {
+    console.log('Starting database reset...');
+
+    // Drop all tables in the correct order
+    const tableOrder = [
+      'Photo',
+      'Review',
+      'ParkArea',
+      'Park',
+      'Company',
+      'User'
+    ];
+
+    for (const table of tableOrder) {
+      console.log(`Deleting all records from ${table}...`);
+      // @ts-ignore - Dynamic table name
+      await prisma[table.toLowerCase()].deleteMany();
+    }
+
+    console.log('Database reset complete. Running seed...');
+
+    // Run the seed script
+    await import('../prisma/seed');
+
+    console.log('Database reset and seed completed successfully');
+  } catch (error) {
+    console.error('Error during database reset:', error);
+    process.exit(1);
+  } finally {
+    await prisma.$disconnect();
+  }
+}
+
+reset();

frontend/src/types/api.ts

@@ -0,0 +1,83 @@
+// General API response types
+export interface ApiResponse<T> {
+  success: boolean;
+  data?: T;
+  error?: string;
+}
+
+// Park status type
+export type ParkStatus = 
+  | 'OPERATING'
+  | 'CLOSED_TEMP'
+  | 'CLOSED_PERM'
+  | 'UNDER_CONSTRUCTION'
+  | 'DEMOLISHED'
+  | 'RELOCATED';
+
+// Company (owner) type
+export interface Company {
+  id: string;
+  name: string;
+  slug: string;
+}
+
+// Location type
+export interface Location {
+  id: string;
+  city?: string;
+  state?: string;
+  country?: string;
+  postal_code?: string;
+  street_address?: string;
+  latitude?: number;
+  longitude?: number;
+}
+
+// Park type
+export interface Park {
+  id: string;
+  name: string;
+  slug: string;
+  description?: string;
+  status: ParkStatus;
+  owner?: Company;
+  location?: Location;
+  opening_date?: string;
+  closing_date?: string;
+  operating_season?: string;
+  website?: string;
+  size_acres?: number;
+  ride_count: number;
+  coaster_count?: number;
+  average_rating?: number;
+}
+
+// Park filter values type
+export interface ParkFilterValues {
+  search?: string;
+  status?: ParkStatus;
+  ownerId?: string;
+  hasOwner?: boolean;
+  minRides?: number;
+  minCoasters?: number;
+  minSize?: number;
+  openingDateStart?: string;
+  openingDateEnd?: string;
+}
+
+// Park list response type
+export type ParkListResponse = ApiResponse<Park[]>;
+
+// Park suggestion response type
+export interface ParkSuggestion {
+  id: string;
+  name: string;
+  slug: string;
+  status: ParkStatus;
+  owner?: {
+    name: string;
+    slug: string;
+  };
+}
+
+export type ParkSuggestionResponse = ApiResponse<ParkSuggestion[]>;

frontend/tailwind.config.ts

@@ -0,0 +1,18 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config;

frontend/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

memory-bank/activeContext.md

@@ -1,74 +1,127 @@
-# Active Development Context
+# Active Context
 
-## Recently Completed
+## Current Status (Updated 2/23/2025 3:41 PM)
 
-### Park Search Implementation (2024-02-22)
+### API Test Results
+✅ GET /api/parks
+- Returns paginated list of parks
+- Includes relationships (areas, reviews, photos)
+- Proper metadata with total count
+- Type-safe response structure
 
-1. Autocomplete Base:
+✅ Search Parameters
-   - Created BaseAutocomplete in core/forms.py
+- ?search=universal returns matching parks
-   - Configured project-wide auth requirement
+- ?page and ?limit for pagination
-   - Added test coverage for base functionality
+- Case-insensitive search
 
-2. Park Search:
+✅ POST /api/parks
-   - Implemented ParkAutocomplete class
+- Correctly enforces authentication
-   - Created ParkSearchForm with autocomplete widget
+- Returns 401 for unauthorized requests
-   - Updated views and templates for integration
+- Validates required fields
-   - Added comprehensive test suite
 
-3. Documentation:
+❌ Park Detail Routes
-   - Updated memory-bank/features/parks/search.md
+- /parks/[slug] returns 404
-   - Added test documentation
+- Need to implement park detail API
-   - Created user interface guidelines
+- Need to create park detail page
 
-## Active Tasks
+### Working Features
+1. Parks API
+   - GET /api/parks with full data
+   - Search and pagination
+   - Protected POST endpoint
+   - Error handling
 
-1. Testing:
+2. Parks Listing
-   - [ ] Run the test suite with `uv run pytest parks/tests/`
+   - Displays all parks
-   - [ ] Monitor test coverage with pytest-cov
+   - Responsive grid layout
-   - [ ] Verify HTMX interactions work as expected
+   - Status badge with colors
+   - Loading states
+   - Error handling
 
-2. Performance Monitoring:
+### Immediate Next Steps
-   - [ ] Add database indexes if needed
-   - [ ] Monitor query performance
-   - [ ] Consider caching strategies
 
-3. User Experience:
+1. Park Detail Implementation (High Priority)
-   - [ ] Get feedback on search responsiveness
+   - [x] Create /api/parks/[slug] endpoint
-   - [ ] Monitor error rates
+      - [x] Define response schema in api.ts
-   - [ ] Check accessibility compliance
+      - [x] Implement GET handler in route.ts
+      - [x] Add error handling for invalid slugs
+   - [x] Add park detail page component
+      - [x] Create parks/[slug]/page.tsx
+      - [x] Implement data fetching with loading state
+      - [x] Add error boundary handling
+   - [x] Handle loading states
+      - [x] Create loading.tsx skeleton
+      - [x] Implement suspense boundaries
+   - [ ] Add reviews section
+      - [ ] Create reviews component
+      - [ ] Add reviews API endpoint
 
-## Next Steps
+2. Authentication (High Priority)
+   - [ ] Implement JWT token management
+      - [ ] Set up JWT middleware
+      - [ ] Add token refresh handling
+      - [ ] Store tokens securely
+   - [ ] Add login/register forms
+      - [ ] Create form components with validation
+      - [ ] Add form submission handlers
+      - [ ] Implement success/error states
+   - [ ] Protected route middleware
+      - [ ] Set up middleware.ts checks
+      - [ ] Add authentication redirect logic
+   - [ ] Auth context provider
+      - [ ] Create auth state management
+      - [ ] Add context hooks for components
 
-1. Enhancements:
+3. UI Improvements (Medium Priority)
-   - Add geographic search capabilities
+   - [ ] Add search input in UI
-   - Implement result caching
+      - [ ] Create reusable search component
-   - Add full-text search support
+      - [ ] Implement debounced API calls
+   - [ ] Implement filter controls
+      - [ ] Add filter state management
+      - [ ] Create filter UI components
+   - [ ] Add proper loading skeletons
+      - [ ] Design consistent skeleton layouts
+      - [ ] Implement skeleton components
+   - [ ] Improve error messages
+      - [ ] Create error message component
+      - [ ] Add error status pages
 
-2. Integration:
+### Known Issues
-   - Extend to other models (Rides, Areas)
+1. No authentication system yet
-   - Add combined search functionality
+2. Missing park detail views
-   - Improve filter integration
+3. No form validation
+4. No image upload handling
+5. No real-time updates
+6. Static metadata (page size)
 
-3. Testing:
+### Required Documentation
-   - Add Playwright e2e tests
+1. API Endpoints
-   - Implement performance benchmarks
+   - ✅ GET /api/parks 
-   - Add accessibility tests
+   - ✅ POST /api/parks
+   - ❌ GET /api/parks/[slug]
+   - ❌ PUT /api/parks/[slug]
+   - ❌ DELETE /api/parks/[slug]
 
-## Technical Debt
+2. Component Documentation
+   - ❌ Parks list component
+   - ❌ Park card component
+   - ❌ Status badge component
+   - ❌ Loading states
 
-None currently identified for the search implementation.
+3. Authentication Flow
+   - ❌ JWT implementation
+   - ❌ Protected routes
+   - ❌ Auth context
+   - ❌ Login/Register forms
 
-## Dependencies
+## Configuration
-
+- Next.js 15.1.7
-- django-htmx-autocomplete
+- Prisma with PostGIS
-- pytest-django
+- PostgreSQL database
-- pytest-cov
+- REST API patterns
 
 ## Notes
-
+1. Authentication needed before implementing write operations
-The implementation follows these principles:
+2. Consider caching for park data
-- Authentication-first approach
+3. Need to implement proper error logging
-- Performance optimization
+4. Consider rate limiting for API
-- Accessibility compliance
-- Test coverage
-- Clean documentation

memory-bank/decisions/nextjs_migration.md

@@ -0,0 +1,146 @@
+# Next.js Migration Plan
+
+## Overview
+This document outlines the strategy for migrating ThrillWiki from a Django monolith to a Next.js frontend with API Routes backend while maintaining all existing functionality and design.
+
+## Current Architecture
+- Django monolithic application
+- Django templates with HTMX and Alpine.js
+- Django views handling both API and page rendering
+- Django ORM for database operations
+- Custom analytics system
+- File upload handling through Django
+- Authentication through Django
+
+## Target Architecture
+- Next.js 14+ application using App Router
+- React components replacing Django templates
+- Next.js API Routes replacing Django views
+- Prisma ORM replacing Django ORM
+- JWT-based authentication system
+- Maintain current DB schema
+- API-first approach with type safety
+- File uploads through Next.js API routes
+
+## Component Mapping
+Major sections requiring migration:
+
+1. Parks System:
+   - Convert Django views to API routes
+   - Convert templates to React components
+   - Implement dynamic routing
+   - Maintain search functionality
+
+2. User System:
+   - Implement JWT authentication
+   - Convert user management to API routes
+   - Migrate profile management
+   - Handle avatar uploads
+
+3. Reviews System:
+   - Convert to API routes
+   - Implement real-time updates
+   - Maintain moderation features
+
+4. Analytics:
+   - Convert to API routes
+   - Implement client-side tracking
+   - Maintain current metrics
+
+## API Route Mapping
+```typescript
+// Example API route structure
+/api
+  /auth
+    /login
+    /register
+    /profile
+  /parks
+    /[id]
+    /search
+    /nearby
+  /reviews
+    /[id]
+    /create
+    /moderate
+  /analytics
+    /track
+    /stats
+```
+
+## Migration Phases
+
+### Phase 1: Setup & Infrastructure
+1. Initialize Next.js project
+2. Set up Prisma with existing schema
+3. Configure TypeScript
+4. Set up authentication system
+5. Configure file upload handling
+
+### Phase 2: Core Features
+1. Parks system migration
+2. User authentication
+3. Basic CRUD operations
+4. Search functionality
+5. File uploads
+
+### Phase 3: Advanced Features
+1. Reviews system
+2. Analytics
+3. Moderation tools
+4. Real-time features
+5. Admin interfaces
+
+### Phase 4: Testing & Polish
+1. Comprehensive testing
+2. Performance optimization
+3. SEO implementation
+4. Security audit
+5. Documentation updates
+
+## Dependencies
+
+### Frontend
+- next: ^14.0.0
+- react: ^18.2.0
+- react-dom: ^18.2.0
+- @prisma/client
+- @tanstack/react-query
+- tailwindcss
+- typescript
+- zod (for validation)
+- jwt-decode
+- @headlessui/react
+
+### Backend
+- prisma
+- jsonwebtoken
+- bcryptjs
+- multer (file uploads)
+- sharp (image processing)
+
+## Data Migration Strategy
+1. Create Prisma schema matching Django models
+2. Write migration scripts for data transfer
+3. Validate data integrity
+4. Implement rollback procedures
+
+## Security Considerations
+1. JWT token handling
+2. CSRF protection
+3. Rate limiting
+4. File upload security
+5. API route protection
+
+## Performance Optimization
+1. Implement ISR (Incremental Static Regeneration)
+2. Optimize images and assets
+3. Implement caching strategy
+4. Code splitting
+5. Bundle optimization
+
+## Rollback Plan
+1. Maintain dual systems during migration
+2. Database backup strategy
+3. Traffic routing plan
+4. Monitoring and alerts

memory-bank/decisions/search_duplication_fix.md

@@ -1,61 +0,0 @@
-# Search Duplication Fix
-
-## Issue
-The park search was showing duplicate results because:
-1. There were two separate forms with the same ID ("filter-form")
-2. Both forms were targeting the same element ("#park-results")
-3. The search form and filter form were operating independently
-
-## Solution
-1. Created a custom autocomplete package to handle search functionality:
-   - ModelAutocomplete base class for model-based autocomplete
-   - AutocompleteWidget for rendering the search input
-   - Templates for widget and suggestions
-   - Views for handling search and selection
-
-2. Updated ParkAutocomplete to use ModelAutocomplete:
-```python
-class ParkAutocomplete(ModelAutocomplete):
-    model = Park
-    search_attrs = ['name']
-    minimum_search_length = 2
-    max_results = 8
-```
-
-3. Combined search and filter functionality into a single form:
-```html
-<form id="filter-form"
-      x-ref="filterForm"
-      hx-get="{% url 'parks:park_list' %}"
-      hx-target="#park-results"
-      hx-push-url="true"
-      hx-trigger="submit"
-      class="mt-4">
-    <div class="mb-6">
-        {{ search_form }}  <!-- AutocompleteWidget -->
-    </div>
-    {% include "search/components/filter_form.html" with filter=filter %}
-</form>
-```
-
-4. Added proper URL routing for autocomplete:
-```python
-path("ac/", include((autocomplete_patterns, "autocomplete"), namespace="autocomplete"))
-```
-
-## Benefits
-1. No more duplicate search requests
-2. Cleaner template structure
-3. Better user experience with a single search interface
-4. Proper integration with django-htmx-autocomplete
-5. Simplified view logic
-6. Reusable autocomplete functionality for other models
-
-## Technical Details
-- Using django-htmx-autocomplete's AutocompleteWidget for search
-- Single form submission handles both search and filtering
-- HTMX handles the dynamic updates
-- View mode selection preserved during search/filter operations
-- Minimum search length of 2 characters
-- Maximum of 8 search results
-- Search results include park status and location

memory-bank/features/frontend_structure.md

@@ -0,0 +1,165 @@
+# Frontend Structure Documentation
+
+## Project Organization
+
+```
+frontend/
+├── src/
+│   ├── app/              # Next.js App Router pages
+│   ├── components/       # Reusable React components
+│   ├── types/           # TypeScript type definitions
+│   └── lib/             # Utility functions and configurations
+```
+
+## Component Architecture
+
+### Core Components
+
+1. **Layout (layout.tsx)**
+   - Global page structure
+   - Navigation header
+   - Footer
+   - Consistent styling across pages
+   - Using Inter font
+   - Responsive design with Tailwind
+
+2. **Error Boundary (error-boundary.tsx)**
+   - Global error handling
+   - Fallback UI for errors
+   - Error reporting capabilities
+   - Retry functionality
+   - Type-safe implementation
+
+3. **Home Page (page.tsx)**
+   - Parks listing
+   - Loading states
+   - Error handling
+   - Responsive grid layout
+   - Pagination support
+
+## API Integration
+
+### Parks API
+- GET /api/parks
+  - Pagination support
+  - Search functionality
+  - Error handling
+  - Type-safe responses
+
+## State Management
+- Using React hooks for local state
+- Server-side data fetching
+- Error state handling
+- Loading state management
+
+## Styling Approach
+1. **Tailwind CSS**
+   - Utility-first approach
+   - Custom theme configuration
+   - Responsive design utilities
+   - Component-specific styles
+
+2. **Component Design**
+   - Consistent spacing
+   - Mobile-first approach
+   - Accessible color schemes
+   - Interactive states
+
+## Type Safety
+1. **TypeScript Integration**
+   - Strict type checking
+   - API response types
+   - Component props typing
+   - Error handling types
+
+## Error Handling Strategy
+1. **Multiple Layers**
+   - Component-level error boundaries
+   - API error handling
+   - Type-safe error responses
+   - User-friendly error messages
+
+2. **Recovery Options**
+   - Retry functionality
+   - Graceful degradation
+   - Clear error messaging
+   - User guidance
+
+## Performance Considerations
+1. **Optimizations**
+   - Component code splitting
+   - Image optimization
+   - Responsive loading
+   - Caching strategy
+
+2. **Monitoring**
+   - Error tracking
+   - Performance metrics
+   - User interactions
+   - API response times
+
+## Accessibility
+1. **Implementation**
+   - ARIA labels
+   - Keyboard navigation
+   - Focus management
+   - Screen reader support
+
+## Next Steps
+
+### Immediate Tasks
+1. Implement authentication components
+2. Add park detail page
+3. Implement search functionality
+4. Add pagination controls
+
+### Future Improvements
+1. Add park reviews system
+2. Implement user profiles
+3. Add social sharing
+4. Enhance search capabilities
+
+## Migration Progress
+
+### Completed
+✅ Basic page structure
+✅ Error handling system
+✅ Parks listing page
+✅ API integration structure
+
+### In Progress
+⏳ Authentication system
+⏳ Park details page
+⏳ Search functionality
+
+### Pending
+⬜ User profiles
+⬜ Reviews system
+⬜ Admin interface
+⬜ Analytics integration
+
+## Testing Strategy
+
+### Unit Tests
+- Component rendering
+- API integrations
+- Error handling
+- State management
+
+### Integration Tests
+- User flows
+- API interactions
+- Error scenarios
+- Authentication
+
+### E2E Tests
+- Critical paths
+- User journeys
+- Cross-browser testing
+- Mobile responsiveness
+
+## Documentation Needs
+1. Component API documentation
+2. State management patterns
+3. Error handling procedures
+4. Testing guidelines

memory-bank/features/nextjs_migration.md

@@ -0,0 +1,155 @@
+# Next.js Migration Progress
+
+## Current Status (Updated 2/23/2025)
+
+### Completed Setup
+1. ✅ Next.js project initialized in frontend/
+2. ✅ TypeScript configuration
+3. ✅ Prisma setup with PostGIS support
+4. ✅ Environment configuration
+5. ✅ API route structure
+6. ✅ Initial database schema sync
+7. ✅ Basic UI components
+
+### Database Migration Status
+- Detected existing Django schema with 70+ tables
+- Successfully initialized Prisma with PostGIS extension
+- Created initial migration
+
+### Key Database Tables Identified
+1. Core Tables
+   - accounts_user
+   - parks_park
+   - reviews_review
+   - location_location
+   - media_photo
+
+2. Authentication Tables
+   - socialaccount_socialaccount
+   - token_blacklist_blacklistedtoken
+   - auth_permission
+
+3. Content Management
+   - wiki_article
+   - wiki_articlerevision
+   - core_slughistory
+
+### Implemented Features
+1. Authentication Middleware
+   - Basic JWT token validation
+   - Public/private route handling
+   - Token forwarding
+   
+2. API Types System
+   - Base response types
+   - Park types
+   - User types
+   - Review types
+   - Error handling types
+
+3. Database Connection
+   - Prisma client setup
+   - PostGIS extension configuration
+   - Development/production handling
+
+4. Parks API Route
+   - GET endpoint with pagination
+   - Search functionality
+   - POST endpoint with auth
+   - Error handling
+
+## Next Steps (Prioritized)
+
+### 1. Schema Migration (Current Focus)
+- [ ] Map remaining Django models to Prisma schema
+- [ ] Handle custom field types (e.g., GeoDjango fields)
+- [ ] Set up relationships between models
+- [ ] Create data migration scripts
+
+### 2. Authentication System
+- [ ] Implement JWT verification
+- [ ] Set up refresh tokens
+- [ ] Social auth integration
+- [ ] User session management
+
+### 3. Core Features Migration
+- [ ] Parks system
+- [ ] User profiles
+- [ ] Review system
+- [ ] Media handling
+
+### 4. Testing & Validation
+- [ ] Unit tests for API routes
+- [ ] Integration tests
+- [ ] Data integrity checks
+- [ ] Performance testing
+
+## Technical Decisions
+
+### Schema Migration Strategy
+- Incremental model migration
+- Maintain foreign key relationships
+- Handle custom field types via Prisma
+- Use PostGIS for spatial data
+
+### Authentication Approach
+- JWT for API authentication
+- HTTP-only cookies for token storage
+- Refresh token rotation
+- Social auth provider integration
+
+### API Architecture
+- REST-based endpoints
+- Strong type safety
+- Consistent response formats
+- Built-in pagination
+- Error handling middleware
+
+### Component Architecture
+- Server components by default
+- Client components for interactivity
+- Shared component library
+- Error boundaries
+
+## Migration Challenges
+
+### Current Challenges
+1. Complex Django model relationships
+2. Custom field type handling
+3. Social authentication flow
+4. File upload system
+5. Real-time feature migration
+
+### Solutions
+1. Using Prisma's preview features for PostGIS
+2. Custom field type mappings
+3. JWT-based auth with refresh tokens
+4. S3/cloud storage integration
+5. WebSocket/Server-Sent Events
+
+## Monitoring & Validation
+
+### Data Integrity
+- Validation scripts for migrated data
+- Comparison tools for Django/Prisma models
+- Automated testing of relationships
+- Error logging and monitoring
+
+### Performance
+- API response time tracking
+- Database query optimization
+- Client-side performance metrics
+- Error rate monitoring
+
+## Documentation Updates
+1. API route specifications
+2. Schema migration process
+3. Authentication flows
+4. Component documentation
+5. Deployment guides
+
+## Rollback Strategy
+1. Maintain Django application
+2. Database backups before migrations
+3. Feature flags for gradual rollout
+4. Monitoring thresholds for auto-rollback

memory-bank/features/park_detail_api.md

@@ -0,0 +1,25 @@
+# Park Detail API Implementation
+
+## Overview
+Implementing the park detail API endpoint at `/api/parks/[slug]` to provide detailed information about a specific park.
+
+## Implementation Details
+- Route: `/api/parks/[slug]/route.ts`
+- Response Type: `ParkDetailResponse` (already defined in api.ts)
+- Error Handling:
+  - 404 for invalid park slugs
+  - 500 for server/database errors
+
+## Data Structure
+Reusing existing Park type with full relationships:
+- Basic park info (name, description, etc.)
+- Areas
+- Reviews with user info
+- Photos with user info
+- Creator details
+- Owner (company) details
+
+## Date Formatting
+Following established pattern:
+- Split ISO dates at 'T' for date-only fields
+- Full ISO string for timestamps

memory-bank/features/park_detail_page.md

@@ -0,0 +1,44 @@
+# Park Detail Page Implementation
+
+## Overview
+Implemented the park detail page component with features for displaying comprehensive park information.
+
+## Components
+1. `/parks/[slug]/page.tsx`
+   - Dynamic metadata generation
+   - Server-side data fetching with caching
+   - Complete park information display
+   - Responsive layout with Tailwind CSS
+   - Error handling with notFound()
+
+2. `/parks/[slug]/loading.tsx`
+   - Skeleton loading state
+   - Matches final layout structure
+   - Animated pulse effect
+   - Responsive grid matching page layout
+
+## Features
+- Park header with name and status badge
+- Description section
+- Key details grid (size, rides, ratings)
+- Location display
+- Areas list with descriptions
+- Reviews section with ratings
+- Photo gallery
+- Dynamic metadata
+- Error handling
+- Loading states
+
+## Data Handling
+- 60-second cache for data fetching
+- Error states for 404 and other failures
+- Proper type safety with ParkDetailResponse
+- Formatted dates for consistency
+
+## Design Patterns
+- Semantic HTML structure
+- Consistent spacing and typography
+- Responsive grid layouts
+- Color-coded status badges
+- Progressive loading with suspense
+- Modular section organization

memory-bank/features/parks_page_nextjs.md

@@ -0,0 +1,128 @@
+# Parks Page Next.js Implementation
+
+## Troubleshooting Database Issues
+
+### Database Setup and Maintenance
+
+1. Created Database Reset Script
+   - Location: `frontend/src/scripts/db-reset.ts`
+   - Purpose: Clean database reset and reseed
+   - Features:
+     - Drops tables in correct order
+     - Runs seed script automatically
+     - Handles errors gracefully
+   - Usage: `npm run db:reset`
+
+2. Package.json Scripts
+   ```json
+   {
+     "scripts": {
+       "db:reset": "ts-node src/scripts/db-reset.ts",
+       "db:seed": "ts-node prisma/seed.ts",
+       "prisma:generate": "prisma generate",
+       "prisma:migrate": "prisma migrate deploy"
+     }
+   }
+   ```
+
+3. Database Validation Steps
+   - Added connection test in API endpoint
+   - Added table existence check
+   - Enhanced error logging
+   - Added Prisma Client event listeners
+
+### API Endpoint Improvements
+
+1. Error Handling
+   ```typescript
+   // Raw query test to verify database connection
+   const rawResult = await prisma.$queryRaw`SELECT tablename FROM pg_catalog.pg_tables WHERE schemaname = 'public'`;
+
+   // Transaction usage for atomicity
+   const queryResult = await prisma.$transaction(async (tx) => {
+     const totalCount = await tx.park.count();
+     const parks = await tx.park.findMany({...});
+     return { totalCount, parks };
+   });
+   ```
+
+2. Simplified Query Structure
+   - Reduced complexity for debugging
+   - Added basic fields first
+   - Added proper type checking
+   - Enhanced error details
+
+3. Debug Logging
+   - Added connection test logs
+   - Added query execution logs
+   - Enhanced error object logging
+
+### Test Data Management
+
+1. Seed Data Structure
+   - 2 users (admin and test user)
+   - 2 companies (Universal and Cedar Fair)
+   - 2 parks with full details
+   - Test reviews for each park
+
+2. Data Types
+   - Location stored as JSON
+   - Dates properly formatted
+   - Numeric fields with correct precision
+   - Relationships properly established
+
+### Current Status
+
+✅ Completed:
+- Database reset script
+- Enhanced error handling
+- Debug logging
+- Test data setup
+- API endpoint improvements
+
+🚧 Next Steps:
+1. Run database reset and verify data
+2. Test API endpoint with fresh data
+3. Verify frontend component rendering
+4. Add error boundaries for component-level errors
+
+### Debugging Commands
+
+```bash
+# Reset and reseed database
+npm run db:reset
+
+# Generate Prisma client
+npm run prisma:generate
+
+# Deploy migrations
+npm run prisma:migrate
+```
+
+### API Endpoint Response Format
+
+```typescript
+{
+  success: boolean;
+  data?: Park[];
+  meta?: {
+    total: number;
+  };
+  error?: string;
+}
+```
+
+## Technical Decisions
+
+1. Using transactions for queries to ensure data consistency
+2. Added raw query test to validate database connection
+3. Enhanced error handling with specific error types
+4. Added debug logging for development troubleshooting
+5. Simplified query structure for easier debugging
+
+## Next Actions
+
+1. Run `npm run db:reset` to clean and reseed database
+2. Test simplified API endpoint
+3. Gradually add back filters once basic query works
+4. Add error boundaries to React components

memory-bank/systemPatterns.md

@@ -21,23 +21,6 @@
    - Implement component-based structure
    - Follow progressive enhancement
 
-### Static Files Organization
-1. Directory Structure
-   - `static/` - Source static files (CSS, JS, images, etc.)
-   - `staticfiles/` - Collected files (generated by collectstatic)
-
-2. File Management Rules
-   - Place all source static files in `static/` directory
-   - Never directly modify `staticfiles/` directory
-   - Use Django's `static` template tag for references
-   - Run collectstatic before deployment
-
-3. Benefits of Separation
-   - Clear distinction between source and compiled files
-   - Prevents confusion in development vs production
-   - Follows Django best practices
-   - Simplifies deployment process
-
 ## Design Patterns
 
 ### Data Access

parks/autocomplete.py

@@ -1,15 +0,0 @@
-from autocomplete import ModelAutocomplete
-from .models import Park
-
-
-class ParkAutocomplete(ModelAutocomplete):
-    """Autocomplete class for Park model."""
-    model = Park
-    search_attrs = ['name', 'city', 'state', 'country']  # Fields to search
-    minimum_search_length = 2  # Start searching after 2 characters
-    max_results = 8  # Limit to 8 suggestions
-    
-    # Customize display text
-    no_result_text = "No parks found matching your search."
-    narrow_search_text = "Showing %(page_size)s of %(total)s parks. Try narrowing your search."
-    type_at_least_n_characters = "Type at least %(n)s characters to search parks"

parks/forms.py

@@ -1,13 +1,14 @@
 from django import forms
 from decimal import Decimal, InvalidOperation, ROUND_DOWN
-from autocomplete import ModelAutocomplete, AutocompleteWidget
+from autocomplete import AutocompleteWidget
 
+from core.forms import BaseAutocomplete
 from .models import Park
 from location.models import Location
 from .querysets import get_base_park_queryset
 
 
-class ParkAutocomplete(ModelAutocomplete):
+class ParkAutocomplete(BaseAutocomplete):
     """Autocomplete for searching parks.
     
     Features:
@@ -18,8 +19,6 @@ class ParkAutocomplete(ModelAutocomplete):
     """
     model = Park
     search_attrs = ['name']  # We'll match on park names
-    minimum_search_length = 2  # Start searching after 2 characters
-    max_results = 8  # Limit to 8 suggestions
     
     def get_search_results(self, search):
         """Return search results with related data."""

parks/templates/parks/park_list.html

@@ -47,23 +47,68 @@
 {% block filter_section %}
 <div class="mb-6">
     <div class="max-w-3xl mx-auto relative mb-8">
-        <div class="bg-white shadow sm:rounded-lg">
+        <div class="w-full relative"
-            <div class="px-4 py-5 sm:p-6">
+             x-data="{ query: '', selectedId: null }"
-                <form id="filter-form"
+             @search-selected.window="
-                      x-ref="filterForm"
+                 query = $event.detail;
-                      hx-get="{% url 'parks:park_list' %}"
+                 selectedId = $event.target.value;
-                      hx-target="#park-results"
+                 $refs.filterForm.querySelector('input[name=search]').value = query;
-                      hx-push-url="true"
+                 $refs.filterForm.submit();
-                      hx-trigger="submit"
+                 query = '';
-                      class="mt-4">
+             ">
-                    <div class="mb-6">
+            <form hx-get="{% url 'parks:suggest_parks' %}"
-                        {{ search_form }}
+                  hx-target="#search-results"
+                  hx-trigger="input changed delay:300ms"
+                  hx-indicator="#search-indicator"
+                  x-ref="searchForm">
+                <div class="relative">
+                    <input type="search"
+                           name="search"
+                           placeholder="Search parks..."
+                           class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+                           aria-label="Search parks"
+                           aria-controls="search-results"
+                           :aria-expanded="query !== ''"
+                           x-model="query"
+                           @keydown.escape="query = ''">
+
+                    <!-- Loading indicator -->
+                    <div id="search-indicator" 
+                         class="htmx-indicator absolute right-3 top-1/2 -translate-y-1/2" 
+                         role="status" 
+                         aria-label="Loading search results">
+                        <svg class="w-5 h-5 text-gray-400 animate-spin" viewBox="0 0 24 24">
+                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"/>
+                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
+                        </svg>
+                        <span class="sr-only">Searching...</span>
                     </div>
-                    {% include "search/components/filter_form.html" with filter=filter %}
+                </div>
-                </form>
+            </form>
+
+            <div id="search-results"
+                 class="absolute z-50 mt-1 w-full bg-white dark:bg-gray-800 rounded-md shadow-lg"
+                 role="listbox">
+                <!-- Search suggestions will be loaded here -->
             </div>
         </div>
     </div>
+
+    <div class="bg-white shadow sm:rounded-lg">
+        <div class="px-4 py-5 sm:p-6">
+            <h3 class="text-lg font-medium leading-6 text-gray-900">Filters</h3>
+            <form id="filter-form"
+                  x-ref="filterForm"
+                  hx-get="{% url 'parks:park_list' %}"
+                  hx-target="#park-results"
+                  hx-push-url="true"
+                  hx-trigger="change, submit"
+                  class="mt-4">
+                <input type="hidden" name="search" value="{{ request.GET.search }}">
+                {% include "search/components/filter_form.html" with filter=filter %}
+            </form>
+        </div>
+    </div>
 </div>
 {% endblock %}
 

parks/templates/parks/partials/search_suggestions.html

@@ -1,21 +1,37 @@
-{% if results %}
+{% load filter_utils %}
-<div class="py-1">
+{% if suggestions %}
-    {% for result in results %}
+<div id="search-suggestions-results"
-    <button class="w-full text-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700"
+     class="w-full bg-white rounded-md shadow-lg border border-gray-200 max-h-96 overflow-y-auto"
-            @click="$dispatch('search-selected', '{{ result.name }}')"
+     x-show="open"
-            value="{{ result.id }}"
+     x-cloak
-            role="option">
+     @keydown.escape.window="open = false"
-        <div class="flex flex-col">
+     x-transition:enter="transition ease-out duration-100"
-            <span class="font-medium text-gray-900 dark:text-white">{{ result.name }}</span>
+     x-transition:enter-start="transform opacity-0 scale-95"
-            <span class="text-sm text-gray-500 dark:text-gray-400">
+     x-transition:enter-end="transform opacity-100 scale-100"
-                {{ result.status }}{% if result.location %} • {{ result.location }}{% endif %}
+     x-transition:leave="transition ease-in duration-75"
-            </span>
+     x-transition:leave-start="transform opacity-100 scale-100"
-        </div>
+     x-transition:leave-end="transform opacity-0 scale-95">
-    </button>
+     {% for park in suggestions %}
-    {% endfor %}
+     {% with location=park.location.first %}
-</div>
+     <button type="button"
-{% else %}
+             class="w-full text-left px-4 py-2 text-sm hover:bg-gray-100 cursor-pointer flex items-center justify-between gap-2 transition duration-150"
-<div class="px-4 py-2 text-sm text-gray-500 dark:text-gray-400">
+             :class="{ 'bg-blue-50': focusedIndex === {{ forloop.counter0 }} }"
-    {% if query %}No parks found matching "{{ query }}"{% else %}Start typing to search parks{% endif %}
+             @mousedown.prevent="query = '{{ park.name }}'; $refs.search.value = '{{ park.name }}'"
-</div>
+             @mousedown.prevent="query = '{{ park.name }}'; $dispatch('search-selected', '{{ park.name }}'); open = false;"
+             role="option"
+             :aria-selected="focusedIndex === {{ forloop.counter0 }}"
+             tabindex="-1"
+             x-effect="if(focusedIndex === {{ forloop.counter0 }}) $el.scrollIntoView({block: 'nearest'})"
+             aria-label="{{ park.name }}{% if location.city %} in {{ location.city }}{% endif %}{% if location.state %}, {{ location.state }}{% endif %}">
+         <div class="flex items-center gap-2">
+             <span class="font-medium" x-text="focusedIndex === {{ forloop.counter0 }} ? '▶ {{ park.name }}' : '{{ park.name }}'"></span>
+             <span class="text-gray-500">
+                 {% if location.city %}{{ location.city }}, {% endif %}
+                 {% if location.state %}{{ location.state }}{% endif %}
+             </span>
+         </div>
+     </button>
+     {% endwith %}
+     {% endfor %}
+ </div>
 {% endif %}

parks/urls.py

@@ -18,6 +18,8 @@ urlpatterns = [
     
     # Areas and search endpoints for HTMX
     path("areas/", views.get_park_areas, name="get_park_areas"),
+    path("suggest_parks/", views_search.suggest_parks, name="suggest_parks"),
+
     path("search/", views.search_parks, name="search_parks"),
     
     # Park detail and related views

parks/views_search.py

@@ -1,4 +1,5 @@
-from django.http import HttpRequest, HttpResponse
+from django.http import HttpRequest, HttpResponse, JsonResponse
+from django.shortcuts import render
 from django.views.generic import TemplateView
 from django.urls import reverse
 
@@ -12,8 +13,6 @@ class ParkSearchView(TemplateView):
 
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
-        
-        # Initialize search form
         context['search_form'] = ParkSearchForm(self.request.GET)
         
         # Initialize filter with current querystring
@@ -21,11 +20,35 @@ class ParkSearchView(TemplateView):
         filter_instance = ParkFilter(self.request.GET, queryset=queryset)
         context['filter'] = filter_instance
         
-        # Get filtered queryset
+        # Apply search if park ID selected via autocomplete
-        queryset = filter_instance.qs
+        park_id = self.request.GET.get('park')
+        if park_id:
+            queryset = filter_instance.qs.filter(id=park_id)
+        else:
+            queryset = filter_instance.qs
             
         # Handle view mode
         context['view_mode'] = self.request.GET.get('view_mode', 'grid')
         context['parks'] = queryset
         
-        return context
+        return context
+
+def suggest_parks(request: HttpRequest) -> JsonResponse:
+    """Return park search suggestions as JSON."""
+    query = request.GET.get('search', '').strip()
+    if not query:
+        return JsonResponse({'results': []})
+    
+    queryset = get_base_park_queryset()
+    filter_instance = ParkFilter({'search': query}, queryset=queryset)
+    parks = filter_instance.qs[:8]  # Limit to 8 suggestions
+    
+    results = [{
+        'id': str(park.pk),
+        'name': park.name,
+        'status': park.get_status_display(),
+        'location': park.formatted_location or '',
+        'url': reverse('parks:park_detail', kwargs={'slug': park.slug})
+    } for park in parks]
+    
+    return JsonResponse({'results': results})

static/css/alerts.css

@@ -1,37 +1,44 @@
+/* Alert Styles */
 .alert {
-    padding: 1rem;
+    @apply fixed z-50 px-4 py-3 transition-all duration-500 transform rounded-lg shadow-lg right-4 top-4;
-    margin-bottom: 1rem;
+    animation: slideIn 0.5s ease-out forwards;
-    border-radius: 0.375rem;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    opacity: 1;
-    transition: opacity 0.3s ease-in-out;
-    cursor: pointer;
 }
 
 .alert-success {
-    background-color: #E8F5E9;
+    @apply text-white bg-green-500;
-    border: 1px solid #A5D6A7;
-    color: #2E7D32;
 }
 
 .alert-error {
-    background-color: #FFEBEE;
+    @apply text-white bg-red-500;
-    border: 1px solid #FFCDD2;
-    color: #C62828;
-}
-
-.alert-warning {
-    background-color: #FFF3E0;
-    border: 1px solid #FFCC80;
-    color: #EF6C00;
 }
 
 .alert-info {
-    background-color: #E3F2FD;
+    @apply text-white bg-blue-500;
-    border: 1px solid #90CAF9;
-    color: #1565C0;
 }
 
-.alert.fade-out {
+.alert-warning {
-    opacity: 0;
+    @apply text-white bg-yellow-500;
+}
+
+/* Animation keyframes */
+@keyframes slideIn {
+    0% {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    100% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slideOut {
+    0% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+    100% {
+        transform: translateX(100%);
+        opacity: 0;
+    }
 }

static/js/alerts.js

@@ -1,21 +1,18 @@
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('DOMContentLoaded', function() {
+    // Get all alert elements
     const alerts = document.querySelectorAll('.alert');
-
+    
+    // For each alert
     alerts.forEach(alert => {
-        // Auto-hide alerts after 5 seconds
+        // After 5 seconds
         setTimeout(() => {
-            alert.classList.add('fade-out');
+            // Add slideOut animation
+            alert.style.animation = 'slideOut 0.5s ease-out forwards';
+            
+            // Remove the alert after animation completes
             setTimeout(() => {
                 alert.remove();
-            }, 300); // Match CSS transition duration
+            }, 500);
         }, 5000);
-
-        // Add click-to-dismiss functionality
-        alert.addEventListener('click', () => {
-            alert.classList.add('fade-out');
-            setTimeout(() => {
-                alert.remove();
-            }, 300);
-        });
     });
-});
+});

static/js/location-autocomplete.js

@@ -1,50 +1,81 @@
-document.addEventListener('DOMContentLoaded', () => {
+function locationAutocomplete(field, filterParks = false) {
-    const countryInput = document.querySelector('[name="country"]');
+    return {
-    const regionInput = document.querySelector('[name="region"]');
+        query: '',
-    const cityInput = document.querySelector('[name="city"]');
+        suggestions: [],
-
+        fetchSuggestions() {
-    if (!countryInput || !regionInput || !cityInput) return;
+            let url;
-
+            const params = new URLSearchParams({
-    // Update regions when country changes
+                q: this.query,
-    countryInput.addEventListener('change', () => {
+                filter_parks: filterParks
-        const country = countryInput.value;
-        if (country) {
-            updateRegions(country);
-            // Clear city when country changes
-            cityInput.innerHTML = '<option value="">Select a city</option>';
-        }
-    });
-
-    // Update cities when region changes
-    regionInput.addEventListener('change', () => {
-        const country = countryInput.value;
-        const region = regionInput.value;
-        if (country && region) {
-            updateCities(country, region);
-        }
-    });
-
-    function updateRegions(country) {
-        fetch(`/location/regions/?country=${encodeURIComponent(country)}`)
-            .then(response => response.json())
-            .then(data => {
-                regionInput.innerHTML = '<option value="">Select a region</option>';
-                data.regions.forEach(region => {
-                    const option = new Option(region, region);
-                    regionInput.add(option);
-                });
             });
-    }
 
-    function updateCities(country, region) {
+            switch (field) {
-        fetch(`/location/cities/?country=${encodeURIComponent(country)}&region=${encodeURIComponent(region)}`)
+                case 'country':
-            .then(response => response.json())
+                    url = '/parks/ajax/countries/';
-            .then(data => {
+                    break;
-                cityInput.innerHTML = '<option value="">Select a city</option>';
+                case 'region':
-                data.cities.forEach(city => {
+                    url = '/parks/ajax/regions/';
-                    const option = new Option(city, city);
+                    // Add country parameter if we're fetching regions
-                    cityInput.add(option);
+                    const countryInput = document.getElementById(filterParks ? 'country' : 'id_country_name');
-                });
+                    if (countryInput && countryInput.value) {
-            });
+                        params.append('country', countryInput.value);
-    }
+                    }
-});
+                    break;
+                case 'city':
+                    url = '/parks/ajax/cities/';
+                    // Add country and region parameters if we're fetching cities
+                    const regionInput = document.getElementById(filterParks ? 'region' : 'id_region_name');
+                    const cityCountryInput = document.getElementById(filterParks ? 'country' : 'id_country_name');
+                    if (regionInput && regionInput.value && cityCountryInput && cityCountryInput.value) {
+                        params.append('country', cityCountryInput.value);
+                        params.append('region', regionInput.value);
+                    }
+                    break;
+            }
+
+            if (url) {
+                fetch(`${url}?${params}`)
+                    .then(response => response.json())
+                    .then(data => {
+                        this.suggestions = data;
+                    });
+            }
+        },
+        selectSuggestion(suggestion) {
+            this.query = suggestion.name;
+            this.suggestions = [];
+
+            // If this is a form field (not filter), update hidden fields
+            if (!filterParks) {
+                const hiddenField = document.getElementById(`id_${field}`);
+                if (hiddenField) {
+                    hiddenField.value = suggestion.id;
+                }
+
+                // Clear dependent fields when parent field changes
+                if (field === 'country') {
+                    const regionInput = document.getElementById('id_region_name');
+                    const cityInput = document.getElementById('id_city_name');
+                    const regionHidden = document.getElementById('id_region');
+                    const cityHidden = document.getElementById('id_city');
+                    
+                    if (regionInput) regionInput.value = '';
+                    if (cityInput) cityInput.value = '';
+                    if (regionHidden) regionHidden.value = '';
+                    if (cityHidden) cityHidden.value = '';
+                } else if (field === 'region') {
+                    const cityInput = document.getElementById('id_city_name');
+                    const cityHidden = document.getElementById('id_city');
+                    
+                    if (cityInput) cityInput.value = '';
+                    if (cityHidden) cityHidden.value = '';
+                }
+            }
+
+            // Trigger form submission for filters
+            if (filterParks) {
+                htmx.trigger('#park-filters', 'change');
+            }
+        }
+    };
+}

static/js/main.js

@@ -1,40 +1,141 @@
-// Theme Toggle
+// Theme handling
 document.addEventListener('DOMContentLoaded', () => {
     const themeToggle = document.getElementById('theme-toggle');
-    const themeIcon = themeToggle.nextElementSibling.querySelector('i');
+    const html = document.documentElement;
-
+    
-    // Set initial icon
+    // Initialize toggle state based on current theme
-    updateThemeIcon();
+    if (themeToggle) {
-
+        themeToggle.checked = html.classList.contains('dark');
-    themeToggle.addEventListener('change', () => {
+        
-        if (document.documentElement.classList.contains('dark')) {
+        // Handle toggle changes
-            document.documentElement.classList.remove('dark');
+        themeToggle.addEventListener('change', function() {
-            localStorage.setItem('theme', 'light');
+            const isDark = this.checked;
-        } else {
+            html.classList.toggle('dark', isDark);
-            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme', isDark ? 'dark' : 'light');
-            localStorage.setItem('theme', 'dark');
+        });
-        }
+        
-        updateThemeIcon();
+        // Listen for system theme changes
-    });
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-
+        mediaQuery.addEventListener('change', (e) => {
-    function updateThemeIcon() {
+            if (!localStorage.getItem('theme')) {
-        const isDark = document.documentElement.classList.contains('dark');
+                const isDark = e.matches;
-        themeIcon.classList.remove('fa-sun', 'fa-moon');
+                html.classList.toggle('dark', isDark);
-        themeIcon.classList.add(isDark ? 'fa-sun' : 'fa-moon');
+                themeToggle.checked = isDark;
+            }
+        });
     }
+});
 
-    // Mobile Menu Toggle
+// Handle search form submission
+document.addEventListener('submit', (e) => {
+    if (e.target.matches('form[action*="search"]')) {
+        const searchInput = e.target.querySelector('input[name="q"]');
+        if (!searchInput.value.trim()) {
+            e.preventDefault();
+        }
+    }
+});
+
+// Mobile menu toggle with transitions
+document.addEventListener('DOMContentLoaded', () => {
     const mobileMenuBtn = document.getElementById('mobileMenuBtn');
     const mobileMenu = document.getElementById('mobileMenu');
-    const menuIcon = mobileMenuBtn.querySelector('i');
 
-    mobileMenu.style.display = 'none';
+    if (mobileMenuBtn && mobileMenu) {
-    let isMenuOpen = false;
+        let isMenuOpen = false;
 
-    mobileMenuBtn.addEventListener('click', () => {
+        const toggleMenu = () => {
-        isMenuOpen = !isMenuOpen;
+            isMenuOpen = !isMenuOpen;
-        mobileMenu.style.display = isMenuOpen ? 'block' : 'none';
+            mobileMenu.classList.toggle('show', isMenuOpen);
-        menuIcon.classList.remove('fa-bars', 'fa-times');
+            mobileMenuBtn.setAttribute('aria-expanded', isMenuOpen.toString());
-        menuIcon.classList.add(isMenuOpen ? 'fa-times' : 'fa-bars');
+            
+            // Update icon
+            const icon = mobileMenuBtn.querySelector('i');
+            icon.classList.remove(isMenuOpen ? 'fa-bars' : 'fa-times');
+            icon.classList.add(isMenuOpen ? 'fa-times' : 'fa-bars');
+        };
+
+        mobileMenuBtn.addEventListener('click', toggleMenu);
+
+        // Close menu when clicking outside
+        document.addEventListener('click', (e) => {
+            if (isMenuOpen && !mobileMenu.contains(e.target) && !mobileMenuBtn.contains(e.target)) {
+                toggleMenu();
+            }
+        });
+
+        // Close menu when pressing escape
+        document.addEventListener('keydown', (e) => {
+            if (isMenuOpen && e.key === 'Escape') {
+                toggleMenu();
+            }
+        });
+
+        // Handle viewport changes
+        const mediaQuery = window.matchMedia('(min-width: 1024px)');
+        mediaQuery.addEventListener('change', (e) => {
+            if (e.matches && isMenuOpen) {
+                toggleMenu();
+            }
+        });
+    }
+});
+
+// User dropdown toggle
+const userMenuBtn = document.getElementById('userMenuBtn');
+const userDropdown = document.getElementById('userDropdown');
+
+if (userMenuBtn && userDropdown) {
+    userMenuBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        userDropdown.classList.toggle('active');
     });
-});
+
+    // Close dropdown when clicking outside
+    document.addEventListener('click', (e) => {
+        if (!userMenuBtn.contains(e.target) && !userDropdown.contains(e.target)) {
+            userDropdown.classList.remove('active');
+        }
+    });
+
+    // Close dropdown when pressing escape
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') {
+            userDropdown.classList.remove('active');
+        }
+    });
+}
+
+// Handle flash messages
+document.addEventListener('DOMContentLoaded', () => {
+    const alerts = document.querySelectorAll('.alert');
+    alerts.forEach(alert => {
+        setTimeout(() => {
+            alert.style.opacity = '0';
+            setTimeout(() => alert.remove(), 300);
+        }, 5000);
+    });
+});
+
+// Initialize tooltips
+document.addEventListener('DOMContentLoaded', () => {
+    const tooltips = document.querySelectorAll('[data-tooltip]');
+    tooltips.forEach(tooltip => {
+        tooltip.addEventListener('mouseenter', (e) => {
+            const text = e.target.getAttribute('data-tooltip');
+            const tooltipEl = document.createElement('div');
+            tooltipEl.className = 'absolute z-50 px-2 py-1 text-sm text-white bg-gray-900 rounded tooltip';
+            tooltipEl.textContent = text;
+            document.body.appendChild(tooltipEl);
+            
+            const rect = e.target.getBoundingClientRect();
+            tooltipEl.style.top = rect.bottom + 5 + 'px';
+            tooltipEl.style.left = rect.left + (rect.width - tooltipEl.offsetWidth) / 2 + 'px';
+        });
+        
+        tooltip.addEventListener('mouseleave', () => {
+            const tooltips = document.querySelectorAll('.tooltip');
+            tooltips.forEach(t => t.remove());
+        });
+    });
+});

static/js/park-map.js

@@ -0,0 +1,29 @@
+// Only declare parkMap if it doesn't exist
+window.parkMap = window.parkMap || null;
+
+function initParkMap(latitude, longitude, name) {
+    const mapContainer = document.getElementById('park-map');
+    
+    // Only initialize if container exists and map hasn't been initialized
+    if (mapContainer && !window.parkMap) {
+        const width = mapContainer.offsetWidth;
+        mapContainer.style.height = width + 'px';
+
+        window.parkMap = L.map('park-map').setView([latitude, longitude], 13);
+        
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '© OpenStreetMap contributors'
+        }).addTo(window.parkMap);
+
+        L.marker([latitude, longitude])
+         .addTo(window.parkMap)
+         .bindPopup(name);
+
+        // Update map size when window is resized
+        window.addEventListener('resize', function() {
+            const width = mapContainer.offsetWidth;
+            mapContainer.style.height = width + 'px';
+            window.parkMap.invalidateSize();
+        });
+    }
+}

static/js/photo-gallery.js

@@ -0,0 +1,91 @@
+document.addEventListener('alpine:init', () => {
+    Alpine.data('photoDisplay', ({ photos, contentType, objectId, csrfToken, uploadUrl }) => ({
+        photos,
+        fullscreenPhoto: null,
+        uploading: false,
+        uploadProgress: 0,
+        error: null,
+        showSuccess: false,
+
+        showFullscreen(photo) {
+            this.fullscreenPhoto = photo;
+        },
+
+        async handleFileSelect(event) {
+            const files = Array.from(event.target.files);
+            if (!files.length) {
+                return;
+            }
+
+            this.uploading = true;
+            this.uploadProgress = 0;
+            this.error = null;
+            this.showSuccess = false;
+
+            const totalFiles = files.length;
+            let completedFiles = 0;
+
+            for (const file of files) {
+                const formData = new FormData();
+                formData.append('image', file);
+                formData.append('app_label', contentType.split('.')[0]);
+                formData.append('model', contentType.split('.')[1]);
+                formData.append('object_id', objectId);
+
+                try {
+                    const response = await fetch(uploadUrl, {
+                        method: 'POST',
+                        headers: {
+                            'X-CSRFToken': csrfToken,
+                        },
+                        body: formData
+                    });
+
+                    if (!response.ok) {
+                        const data = await response.json();
+                        throw new Error(data.error || 'Upload failed');
+                    }
+
+                    const photo = await response.json();
+                    this.photos.push(photo);
+                    completedFiles++;
+                    this.uploadProgress = (completedFiles / totalFiles) * 100;
+                } catch (err) {
+                    this.error = err.message || 'Failed to upload photo. Please try again.';
+                    console.error('Upload error:', err);
+                    break;
+                }
+            }
+
+            this.uploading = false;
+            event.target.value = ''; // Reset file input
+
+            if (!this.error) {
+                this.showSuccess = true;
+                setTimeout(() => {
+                    this.showSuccess = false;
+                }, 3000);
+            }
+        },
+
+        async sharePhoto(photo) {
+            if (navigator.share) {
+                try {
+                    await navigator.share({
+                        title: photo.caption || 'Shared photo',
+                        url: photo.url
+                    });
+                } catch (err) {
+                    if (err.name !== 'AbortError') {
+                        console.error('Error sharing:', err);
+                    }
+                }
+            } else {
+                // Fallback: copy URL to clipboard
+                navigator.clipboard.writeText(photo.url)
+                    .then(() => alert('Photo URL copied to clipboard!'))
+                    .catch(err => console.error('Error copying to clipboard:', err));
+            }
+        }
+    }));
+});

static/js/search.js

@@ -0,0 +1,42 @@
+function parkSearch() {
+    return {
+        query: '',
+        results: [],
+        loading: false,
+        selectedId: null,
+        
+        async search() {
+            if (!this.query.trim()) {
+                this.results = [];
+                return;
+            }
+
+            this.loading = true;
+            try {
+                const response = await fetch(`/parks/suggest_parks/?search=${encodeURIComponent(this.query)}`);
+                const data = await response.json();
+                this.results = data.results;
+            } catch (error) {
+                console.error('Search failed:', error);
+                this.results = [];
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        clear() {
+            this.query = '';
+            this.results = [];
+            this.selectedId = null;
+        },
+
+        selectPark(park) {
+            this.query = park.name;
+            this.selectedId = park.id;
+            this.results = [];
+            
+            // Trigger filter update
+            document.getElementById('park-filters').dispatchEvent(new Event('change'));
+        }
+    };
+}

staticfiles/css/alerts.css

@@ -1,37 +1,44 @@
+/* Alert Styles */
 .alert {
-    padding: 1rem;
+    @apply fixed z-50 px-4 py-3 transition-all duration-500 transform rounded-lg shadow-lg right-4 top-4;
-    margin-bottom: 1rem;
+    animation: slideIn 0.5s ease-out forwards;
-    border-radius: 0.375rem;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    opacity: 1;
-    transition: opacity 0.3s ease-in-out;
-    cursor: pointer;
 }
 
 .alert-success {
-    background-color: #E8F5E9;
+    @apply text-white bg-green-500;
-    border: 1px solid #A5D6A7;
-    color: #2E7D32;
 }
 
 .alert-error {
-    background-color: #FFEBEE;
+    @apply text-white bg-red-500;
-    border: 1px solid #FFCDD2;
-    color: #C62828;
-}
-
-.alert-warning {
-    background-color: #FFF3E0;
-    border: 1px solid #FFCC80;
-    color: #EF6C00;
 }
 
 .alert-info {
-    background-color: #E3F2FD;
+    @apply text-white bg-blue-500;
-    border: 1px solid #90CAF9;
-    color: #1565C0;
 }
 
-.alert.fade-out {
+.alert-warning {
-    opacity: 0;
+    @apply text-white bg-yellow-500;
+}
+
+/* Animation keyframes */
+@keyframes slideIn {
+    0% {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    100% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slideOut {
+    0% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+    100% {
+        transform: translateX(100%);
+        opacity: 0;
+    }
 }

staticfiles/css/tailwind.css

@@ -2181,18 +2181,6 @@ select {
   justify-content: center;
 }
 
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
 .visible {
   visibility: visible;
 }
@@ -2469,10 +2457,6 @@ select {
   display: none;
 }
 
-.h-10 {
-  height: 2.5rem;
-}
-
 .h-16 {
   height: 4rem;
 }
@@ -2501,10 +2485,6 @@ select {
   height: 1.25rem;
 }
 
-.h-6 {
-  height: 1.5rem;
-}
-
 .h-8 {
   height: 2rem;
 }
@@ -2553,10 +2533,6 @@ select {
   width: 1.25rem;
 }
 
-.w-6 {
-  width: 1.5rem;
-}
-
 .w-64 {
   width: 16rem;
 }
@@ -2670,16 +2646,6 @@ select {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-@keyframes pulse {
-  50% {
-    opacity: .5;
-  }
-}
-
-.animate-pulse {
-  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -3034,6 +3000,10 @@ select {
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
 }
 
+.bg-gray-900\/80 {
+  background-color: rgb(17 24 39 / 0.8);
+}
+
 .bg-green-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(220 252 231 / var(--tw-bg-opacity));
@@ -3274,10 +3244,6 @@ select {
   padding-bottom: 1rem;
 }
 
-.pt-2 {
-  padding-top: 0.5rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -3369,11 +3335,6 @@ select {
   color: rgb(37 99 235 / var(--tw-text-opacity));
 }
 
-.text-blue-700 {
-  --tw-text-opacity: 1;
-  color: rgb(29 78 216 / var(--tw-text-opacity));
-}
-
 .text-blue-800 {
   --tw-text-opacity: 1;
   color: rgb(30 64 175 / var(--tw-text-opacity));
@@ -3444,11 +3405,6 @@ select {
   color: rgb(79 70 229 / var(--tw-text-opacity));
 }
 
-.text-red-100 {
-  --tw-text-opacity: 1;
-  color: rgb(254 226 226 / var(--tw-text-opacity));
-}
-
 .text-red-400 {
   --tw-text-opacity: 1;
   color: rgb(248 113 113 / var(--tw-text-opacity));
@@ -3551,11 +3507,6 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.outline-none {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-
 .ring-2 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -3571,19 +3522,6 @@ select {
   --tw-ring-color: rgb(79 70 229 / 0.2);
 }
 
-.ring-offset-2 {
-  --tw-ring-offset-width: 2px;
-}
-
-.ring-offset-white {
-  --tw-ring-offset-color: #fff;
-}
-
-.blur {
-  --tw-blur: blur(8px);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -3858,11 +3796,6 @@ select {
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
 }
 
-.focus\:bg-gray-100:focus {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-}
-
 .focus\:underline:focus {
   text-decoration-line: underline;
 }
@@ -3891,10 +3824,6 @@ select {
   --tw-ring-offset-width: 2px;
 }
 
-.active\:transform:active {
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .disabled\:opacity-50:disabled {
   opacity: 0.5;
 }
@@ -4001,10 +3930,6 @@ select {
   background-color: rgb(185 28 28 / var(--tw-bg-opacity));
 }
 
-.dark\:bg-red-900\/40:is(.dark *) {
-  background-color: rgb(127 29 29 / 0.4);
-}
-
 .dark\:bg-yellow-200:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(254 240 138 / var(--tw-bg-opacity));
@@ -4043,11 +3968,6 @@ select {
   --tw-gradient-to: #3b0764 var(--tw-gradient-to-position);
 }
 
-.dark\:text-blue-100:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(219 234 254 / var(--tw-text-opacity));
-}
-
 .dark\:text-blue-200:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(191 219 254 / var(--tw-text-opacity));
@@ -4270,11 +4190,6 @@ select {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.dark\:focus\:bg-gray-700:focus:is(.dark *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-}
-
 @media (min-width: 640px) {
   .sm\:col-span-3 {
     grid-column: span 3 / span 3;
@@ -4382,26 +4297,10 @@ select {
     grid-column: span 2 / span 2;
   }
 
-  .md\:col-span-3 {
-    grid-column: span 3 / span 3;
-  }
-
   .md\:mb-8 {
     margin-bottom: 2rem;
   }
 
-  .md\:block {
-    display: block;
-  }
-
-  .md\:grid {
-    display: grid;
-  }
-
-  .md\:hidden {
-    display: none;
-  }
-
   .md\:h-\[140px\] {
     height: 140px;
   }

staticfiles/js/alerts.js

@@ -1,21 +1,18 @@
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('DOMContentLoaded', function() {
+    // Get all alert elements
     const alerts = document.querySelectorAll('.alert');
-
+    
+    // For each alert
     alerts.forEach(alert => {
-        // Auto-hide alerts after 5 seconds
+        // After 5 seconds
         setTimeout(() => {
-            alert.classList.add('fade-out');
+            // Add slideOut animation
+            alert.style.animation = 'slideOut 0.5s ease-out forwards';
+            
+            // Remove the alert after animation completes
             setTimeout(() => {
                 alert.remove();
-            }, 300); // Match CSS transition duration
+            }, 500);
         }, 5000);
-
-        // Add click-to-dismiss functionality
-        alert.addEventListener('click', () => {
-            alert.classList.add('fade-out');
-            setTimeout(() => {
-                alert.remove();
-            }, 300);
-        });
     });
-});
+});

staticfiles/js/inline-edit.js

@@ -0,0 +1,262 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Handle edit button clicks
+    document.querySelectorAll('[data-edit-button]').forEach(button => {
+        button.addEventListener('click', function() {
+            const contentId = this.dataset.contentId;
+            const contentType = this.dataset.contentType;
+            const editableFields = document.querySelectorAll(`[data-editable][data-content-id="${contentId}"]`);
+            
+            // Toggle edit mode
+            editableFields.forEach(field => {
+                const currentValue = field.textContent.trim();
+                const fieldName = field.dataset.fieldName;
+                const fieldType = field.dataset.fieldType || 'text';
+                
+                // Create input field
+                let input;
+                if (fieldType === 'textarea') {
+                    input = document.createElement('textarea');
+                    input.value = currentValue;
+                    input.rows = 4;
+                } else if (fieldType === 'select') {
+                    input = document.createElement('select');
+                    // Get options from data attribute
+                    const options = JSON.parse(field.dataset.options || '[]');
+                    options.forEach(option => {
+                        const optionEl = document.createElement('option');
+                        optionEl.value = option.value;
+                        optionEl.textContent = option.label;
+                        optionEl.selected = option.value === currentValue;
+                        input.appendChild(optionEl);
+                    });
+                } else if (fieldType === 'date') {
+                    input = document.createElement('input');
+                    input.type = 'date';
+                    input.value = currentValue;
+                } else if (fieldType === 'number') {
+                    input = document.createElement('input');
+                    input.type = 'number';
+                    input.value = currentValue;
+                    if (field.dataset.min) input.min = field.dataset.min;
+                    if (field.dataset.max) input.max = field.dataset.max;
+                    if (field.dataset.step) input.step = field.dataset.step;
+                } else {
+                    input = document.createElement('input');
+                    input.type = fieldType;
+                    input.value = currentValue;
+                }
+                
+                input.className = 'w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white';
+                input.dataset.originalValue = currentValue;
+                input.dataset.fieldName = fieldName;
+                
+                // Replace content with input
+                field.textContent = '';
+                field.appendChild(input);
+            });
+            
+            // Show save/cancel buttons
+            const actionButtons = document.createElement('div');
+            actionButtons.className = 'flex gap-2 mt-2';
+            actionButtons.innerHTML = `
+                <button class="px-4 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600" data-save-button>
+                    <i class="mr-2 fas fa-save"></i>Save Changes
+                </button>
+                <button class="px-4 py-2 text-gray-700 bg-gray-200 rounded-lg hover:bg-gray-300 dark:bg-gray-600 dark:text-gray-200 dark:hover:bg-gray-500" data-cancel-button>
+                    <i class="mr-2 fas fa-times"></i>Cancel
+                </button>
+                ${this.dataset.requireReason ? `
+                    <div class="flex-grow">
+                        <input type="text" class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white" 
+                               placeholder="Reason for changes (required)" 
+                               data-reason-input>
+                        <input type="text" class="w-full mt-1 border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white" 
+                               placeholder="Source (optional)" 
+                               data-source-input>
+                    </div>
+                ` : ''}
+            `;
+            
+            const container = editableFields[0].closest('.editable-container');
+            container.appendChild(actionButtons);
+            
+            // Hide edit button while editing
+            this.style.display = 'none';
+        });
+    });
+    
+    // Handle form submissions
+    document.querySelectorAll('form[data-submit-type]').forEach(form => {
+        form.addEventListener('submit', function(e) {
+            e.preventDefault();
+            
+            const submitType = this.dataset.submitType;
+            const formData = new FormData(this);
+            const data = {};
+            
+            formData.forEach((value, key) => {
+                data[key] = value;
+            });
+            
+            // Get CSRF token from meta tag
+            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+            
+            // Submit form
+            fetch(this.action, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRFToken': csrfToken
+                },
+                body: JSON.stringify({
+                    submission_type: submitType,
+                    ...data
+                })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.status === 'success') {
+                    showNotification(data.message, 'success');
+                    if (data.redirect_url) {
+                        window.location.href = data.redirect_url;
+                    }
+                } else {
+                    showNotification(data.message, 'error');
+                }
+            })
+            .catch(error => {
+                showNotification('An error occurred while submitting the form.', 'error');
+                console.error('Error:', error);
+            });
+        });
+    });
+    
+    // Handle save button clicks using event delegation
+    document.addEventListener('click', function(e) {
+        if (e.target.matches('[data-save-button]')) {
+            const container = e.target.closest('.editable-container');
+            const contentId = container.querySelector('[data-editable]').dataset.contentId;
+            const contentType = container.querySelector('[data-edit-button]').dataset.contentType;
+            const editableFields = container.querySelectorAll('[data-editable]');
+            
+            // Collect changes
+            const changes = {};
+            editableFields.forEach(field => {
+                const input = field.querySelector('input, textarea, select');
+                if (input && input.value !== input.dataset.originalValue) {
+                    changes[input.dataset.fieldName] = input.value;
+                }
+            });
+            
+            // If no changes, just cancel
+            if (Object.keys(changes).length === 0) {
+                cancelEdit(container);
+                return;
+            }
+            
+            // Get reason and source if required
+            const reasonInput = container.querySelector('[data-reason-input]');
+            const sourceInput = container.querySelector('[data-source-input]');
+            const reason = reasonInput ? reasonInput.value : '';
+            const source = sourceInput ? sourceInput.value : '';
+            
+            // Validate reason if required
+            if (reasonInput && !reason) {
+                alert('Please provide a reason for your changes.');
+                return;
+            }
+            
+            // Get CSRF token from meta tag
+            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+            
+            // Submit changes
+            fetch(window.location.pathname, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRFToken': csrfToken
+                },
+                body: JSON.stringify({
+                    content_type: contentType,
+                    content_id: contentId,
+                    changes,
+                    reason,
+                    source
+                })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.status === 'success') {
+                    if (data.auto_approved) {
+                        // Update the display immediately
+                        Object.entries(changes).forEach(([field, value]) => {
+                            const element = container.querySelector(`[data-editable][data-field-name="${field}"]`);
+                            if (element) {
+                                element.textContent = value;
+                            }
+                        });
+                    }
+                    showNotification(data.message, 'success');
+                    if (data.redirect_url) {
+                        window.location.href = data.redirect_url;
+                    }
+                } else {
+                    showNotification(data.message, 'error');
+                }
+                cancelEdit(container);
+            })
+            .catch(error => {
+                showNotification('An error occurred while saving changes.', 'error');
+                console.error('Error:', error);
+                cancelEdit(container);
+            });
+        }
+    });
+    
+    // Handle cancel button clicks using event delegation
+    document.addEventListener('click', function(e) {
+        if (e.target.matches('[data-cancel-button]')) {
+            const container = e.target.closest('.editable-container');
+            cancelEdit(container);
+        }
+    });
+});
+
+function cancelEdit(container) {
+    // Restore original content
+    container.querySelectorAll('[data-editable]').forEach(field => {
+        const input = field.querySelector('input, textarea, select');
+        if (input) {
+            field.textContent = input.dataset.originalValue;
+        }
+    });
+    
+    // Remove action buttons
+    const actionButtons = container.querySelector('.flex.gap-2');
+    if (actionButtons) {
+        actionButtons.remove();
+    }
+    
+    // Show edit button
+    const editButton = container.querySelector('[data-edit-button]');
+    if (editButton) {
+        editButton.style.display = '';
+    }
+}
+
+function showNotification(message, type = 'info') {
+    const notification = document.createElement('div');
+    notification.className = `fixed bottom-4 right-4 p-4 rounded-lg shadow-lg text-white ${
+        type === 'success' ? 'bg-green-600 dark:bg-green-500' :
+        type === 'error' ? 'bg-red-600 dark:bg-red-500' :
+        'bg-blue-600 dark:bg-blue-500'
+    }`;
+    notification.textContent = message;
+    
+    document.body.appendChild(notification);
+    
+    // Remove after 5 seconds
+    setTimeout(() => {
+        notification.remove();
+    }, 5000);
+}

staticfiles/js/location-autocomplete.js

@@ -0,0 +1,81 @@
+function locationAutocomplete(field, filterParks = false) {
+    return {
+        query: '',
+        suggestions: [],
+        fetchSuggestions() {
+            let url;
+            const params = new URLSearchParams({
+                q: this.query,
+                filter_parks: filterParks
+            });
+
+            switch (field) {
+                case 'country':
+                    url = '/parks/ajax/countries/';
+                    break;
+                case 'region':
+                    url = '/parks/ajax/regions/';
+                    // Add country parameter if we're fetching regions
+                    const countryInput = document.getElementById(filterParks ? 'country' : 'id_country_name');
+                    if (countryInput && countryInput.value) {
+                        params.append('country', countryInput.value);
+                    }
+                    break;
+                case 'city':
+                    url = '/parks/ajax/cities/';
+                    // Add country and region parameters if we're fetching cities
+                    const regionInput = document.getElementById(filterParks ? 'region' : 'id_region_name');
+                    const cityCountryInput = document.getElementById(filterParks ? 'country' : 'id_country_name');
+                    if (regionInput && regionInput.value && cityCountryInput && cityCountryInput.value) {
+                        params.append('country', cityCountryInput.value);
+                        params.append('region', regionInput.value);
+                    }
+                    break;
+            }
+
+            if (url) {
+                fetch(`${url}?${params}`)
+                    .then(response => response.json())
+                    .then(data => {
+                        this.suggestions = data;
+                    });
+            }
+        },
+        selectSuggestion(suggestion) {
+            this.query = suggestion.name;
+            this.suggestions = [];
+
+            // If this is a form field (not filter), update hidden fields
+            if (!filterParks) {
+                const hiddenField = document.getElementById(`id_${field}`);
+                if (hiddenField) {
+                    hiddenField.value = suggestion.id;
+                }
+
+                // Clear dependent fields when parent field changes
+                if (field === 'country') {
+                    const regionInput = document.getElementById('id_region_name');
+                    const cityInput = document.getElementById('id_city_name');
+                    const regionHidden = document.getElementById('id_region');
+                    const cityHidden = document.getElementById('id_city');
+                    
+                    if (regionInput) regionInput.value = '';
+                    if (cityInput) cityInput.value = '';
+                    if (regionHidden) regionHidden.value = '';
+                    if (cityHidden) cityHidden.value = '';
+                } else if (field === 'region') {
+                    const cityInput = document.getElementById('id_city_name');
+                    const cityHidden = document.getElementById('id_city');
+                    
+                    if (cityInput) cityInput.value = '';
+                    if (cityHidden) cityHidden.value = '';
+                }
+            }
+
+            // Trigger form submission for filters
+            if (filterParks) {
+                htmx.trigger('#park-filters', 'change');
+            }
+        }
+    };
+}

staticfiles/js/main.js

@@ -1,40 +1,79 @@
-// Theme Toggle
+// Initialize dark mode from localStorage
 document.addEventListener('DOMContentLoaded', () => {
-    const themeToggle = document.getElementById('theme-toggle');
+    // Check if dark mode was previously enabled
-    const themeIcon = themeToggle.nextElementSibling.querySelector('i');
+    const darkMode = localStorage.getItem('darkMode') === 'true';
-
+    if (darkMode) {
-    // Set initial icon
+        document.documentElement.classList.add('dark');
-    updateThemeIcon();
-
-    themeToggle.addEventListener('change', () => {
-        if (document.documentElement.classList.contains('dark')) {
-            document.documentElement.classList.remove('dark');
-            localStorage.setItem('theme', 'light');
-        } else {
-            document.documentElement.classList.add('dark');
-            localStorage.setItem('theme', 'dark');
-        }
-        updateThemeIcon();
-    });
-
-    function updateThemeIcon() {
-        const isDark = document.documentElement.classList.contains('dark');
-        themeIcon.classList.remove('fa-sun', 'fa-moon');
-        themeIcon.classList.add(isDark ? 'fa-sun' : 'fa-moon');
     }
+});
 
-    // Mobile Menu Toggle
+// Handle search form submission
-    const mobileMenuBtn = document.getElementById('mobileMenuBtn');
+document.addEventListener('submit', (e) => {
-    const mobileMenu = document.getElementById('mobileMenu');
+    if (e.target.matches('form[action*="search"]')) {
-    const menuIcon = mobileMenuBtn.querySelector('i');
+        const searchInput = e.target.querySelector('input[name="q"]');
+        if (!searchInput.value.trim()) {
+            e.preventDefault();
+        }
+    }
+});
 
-    mobileMenu.style.display = 'none';
+// Close mobile menu when clicking outside
-    let isMenuOpen = false;
+document.addEventListener('click', (e) => {
+    const mobileMenu = document.querySelector('[x-show="mobileMenuOpen"]');
+    const menuButton = document.querySelector('[x-on\\:click="mobileMenuOpen = !mobileMenuOpen"]');
+    
+    if (mobileMenu && menuButton && !mobileMenu.contains(e.target) && !menuButton.contains(e.target)) {
+        const alpineData = mobileMenu._x_dataStack && mobileMenu._x_dataStack[0];
+        if (alpineData && alpineData.mobileMenuOpen) {
+            alpineData.mobileMenuOpen = false;
+        }
+    }
+});
 
-    mobileMenuBtn.addEventListener('click', () => {
+// Handle flash messages
-        isMenuOpen = !isMenuOpen;
+document.addEventListener('DOMContentLoaded', () => {
-        mobileMenu.style.display = isMenuOpen ? 'block' : 'none';
+    const alerts = document.querySelectorAll('.alert');
-        menuIcon.classList.remove('fa-bars', 'fa-times');
+    alerts.forEach(alert => {
-        menuIcon.classList.add(isMenuOpen ? 'fa-times' : 'fa-bars');
+        setTimeout(() => {
+            alert.style.opacity = '0';
+            setTimeout(() => alert.remove(), 300);
+        }, 5000);
     });
-});
+});
+
+// Initialize tooltips
+document.addEventListener('DOMContentLoaded', () => {
+    const tooltips = document.querySelectorAll('[data-tooltip]');
+    tooltips.forEach(tooltip => {
+        tooltip.addEventListener('mouseenter', (e) => {
+            const text = e.target.getAttribute('data-tooltip');
+            const tooltipEl = document.createElement('div');
+            tooltipEl.className = 'tooltip bg-gray-900 text-white px-2 py-1 rounded text-sm absolute z-50';
+            tooltipEl.textContent = text;
+            document.body.appendChild(tooltipEl);
+            
+            const rect = e.target.getBoundingClientRect();
+            tooltipEl.style.top = rect.bottom + 5 + 'px';
+            tooltipEl.style.left = rect.left + (rect.width - tooltipEl.offsetWidth) / 2 + 'px';
+        });
+        
+        tooltip.addEventListener('mouseleave', () => {
+            const tooltips = document.querySelectorAll('.tooltip');
+            tooltips.forEach(t => t.remove());
+        });
+    });
+});
+
+// Handle dropdown menus
+document.addEventListener('click', (e) => {
+    const dropdowns = document.querySelectorAll('[x-show]');
+    dropdowns.forEach(dropdown => {
+        if (!dropdown.contains(e.target) && 
+            !e.target.matches('[x-on\\:click*="open = !open"]')) {
+            const alpineData = dropdown._x_dataStack && dropdown._x_dataStack[0];
+            if (alpineData && alpineData.open) {
+                alpineData.open = false;
+            }
+        }
+    });
+});

staticfiles/js/park-map.js

@@ -0,0 +1,28 @@
+let parkMap = null;
+
+function initParkMap(latitude, longitude, name) {
+    const mapContainer = document.getElementById('park-map');
+    
+    // Only initialize if container exists and map hasn't been initialized
+    if (mapContainer && !parkMap) {
+        const width = mapContainer.offsetWidth;
+        mapContainer.style.height = width + 'px';
+
+        parkMap = L.map('park-map').setView([latitude, longitude], 13);
+        
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '© OpenStreetMap contributors'
+        }).addTo(parkMap);
+
+        L.marker([latitude, longitude])
+         .addTo(parkMap)
+         .bindPopup(name);
+
+        // Update map size when window is resized
+        window.addEventListener('resize', function() {
+            const width = mapContainer.offsetWidth;
+            mapContainer.style.height = width + 'px';
+            parkMap.invalidateSize();
+        });
+    }
+}

staticfiles/js/photo-gallery.js

@@ -0,0 +1,91 @@
+document.addEventListener('alpine:init', () => {
+    Alpine.data('photoDisplay', ({ photos, contentType, objectId, csrfToken, uploadUrl }) => ({
+        photos,
+        fullscreenPhoto: null,
+        uploading: false,
+        uploadProgress: 0,
+        error: null,
+        showSuccess: false,
+
+        showFullscreen(photo) {
+            this.fullscreenPhoto = photo;
+        },
+
+        async handleFileSelect(event) {
+            const files = Array.from(event.target.files);
+            if (!files.length) {
+                return;
+            }
+
+            this.uploading = true;
+            this.uploadProgress = 0;
+            this.error = null;
+            this.showSuccess = false;
+
+            const totalFiles = files.length;
+            let completedFiles = 0;
+
+            for (const file of files) {
+                const formData = new FormData();
+                formData.append('image', file);
+                formData.append('app_label', contentType.split('.')[0]);
+                formData.append('model', contentType.split('.')[1]);
+                formData.append('object_id', objectId);
+
+                try {
+                    const response = await fetch(uploadUrl, {
+                        method: 'POST',
+                        headers: {
+                            'X-CSRFToken': csrfToken,
+                        },
+                        body: formData
+                    });
+
+                    if (!response.ok) {
+                        const data = await response.json();
+                        throw new Error(data.error || 'Upload failed');
+                    }
+
+                    const photo = await response.json();
+                    this.photos.push(photo);
+                    completedFiles++;
+                    this.uploadProgress = (completedFiles / totalFiles) * 100;
+                } catch (err) {
+                    this.error = err.message || 'Failed to upload photo. Please try again.';
+                    console.error('Upload error:', err);
+                    break;
+                }
+            }
+
+            this.uploading = false;
+            event.target.value = ''; // Reset file input
+
+            if (!this.error) {
+                this.showSuccess = true;
+                setTimeout(() => {
+                    this.showSuccess = false;
+                }, 3000);
+            }
+        },
+
+        async sharePhoto(photo) {
+            if (navigator.share) {
+                try {
+                    await navigator.share({
+                        title: photo.caption || 'Shared photo',
+                        url: photo.url
+                    });
+                } catch (err) {
+                    if (err.name !== 'AbortError') {
+                        console.error('Error sharing:', err);
+                    }
+                }
+            } else {
+                // Fallback: copy URL to clipboard
+                navigator.clipboard.writeText(photo.url)
+                    .then(() => alert('Photo URL copied to clipboard!'))
+                    .catch(err => console.error('Error copying to clipboard:', err));
+            }
+        }
+    }));
+});

staticfiles/parks/css/search.css

@@ -1,134 +0,0 @@
-/* Loading states */
-.htmx-request .htmx-indicator {
-    opacity: 1;
-}
-.htmx-request.htmx-indicator {
-    opacity: 1;
-}
-.htmx-indicator {
-    opacity: 0;
-    transition: opacity 200ms ease-in-out;
-}
-
-/* Results container transitions */
-#park-results {
-    transition: opacity 200ms ease-in-out;
-}
-.htmx-request #park-results {
-    opacity: 0.7;
-}
-.htmx-settling #park-results {
-    opacity: 1;
-}
-
-/* Grid/List transitions */
-.park-card {
-    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-    background-color: white;
-    border-radius: 0.5rem;
-    border: 1px solid #e5e7eb;
-}
-
-/* Grid view styles */
-.park-card[data-view-mode="grid"] {
-    display: flex;
-    flex-direction: column;
-}
-.park-card[data-view-mode="grid"]:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-}
-
-/* List view styles */
-.park-card[data-view-mode="list"] {
-    display: flex;
-    gap: 1rem;
-    padding: 1rem;
-}
-.park-card[data-view-mode="list"]:hover {
-    background-color: #f9fafb;
-}
-
-/* Image containers */
-.park-card .image-container {
-    position: relative;
-    overflow: hidden;
-}
-.park-card[data-view-mode="grid"] .image-container {
-    aspect-ratio: 16 / 9;
-    width: 100%;
-}
-.park-card[data-view-mode="list"] .image-container {
-    width: 6rem;
-    height: 6rem;
-    flex-shrink: 0;
-}
-
-/* Content */
-.park-card .content {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-width: 0; /* Enables text truncation in flex child */
-}
-
-/* Status badges */
-.park-card .status-badge {
-    transition: all 150ms ease-in-out;
-}
-.park-card:hover .status-badge {
-    transform: scale(1.05);
-}
-
-/* Images */
-.park-card img {
-    transition: transform 200ms ease-in-out;
-    object-fit: cover;
-    width: 100%;
-    height: 100%;
-}
-.park-card:hover img {
-    transform: scale(1.05);
-}
-
-/* Placeholders for missing images */
-.park-card .placeholder {
-    background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
-    background-size: 200% 100%;
-    animation: shimmer 1.5s linear infinite;
-}
-
-@keyframes shimmer {
-    to {
-        background-position: 200% center;
-    }
-}
-
-/* Dark mode */
-@media (prefers-color-scheme: dark) {
-    .park-card {
-        background-color: #1f2937;
-        border-color: #374151;
-    }
-    
-    .park-card[data-view-mode="list"]:hover {
-        background-color: #374151;
-    }
-    
-    .park-card .text-gray-900 {
-        color: #f3f4f6;
-    }
-    
-    .park-card .text-gray-500 {
-        color: #9ca3af;
-    }
-    
-    .park-card .placeholder {
-        background: linear-gradient(110deg, #2d3748 8%, #374151 18%, #2d3748 33%);
-    }
-    
-    .park-card[data-view-mode="list"]:hover {
-        background-color: #374151;
-    }
-}

staticfiles/parks/js/search.js

@@ -1,69 +0,0 @@
-// Handle view mode persistence across HTMX requests
-document.addEventListener('htmx:configRequest', function(evt) {
-    // Preserve view mode
-    const parkResults = document.getElementById('park-results');
-    if (parkResults) {
-        const viewMode = parkResults.getAttribute('data-view-mode');
-        if (viewMode) {
-            evt.detail.parameters['view_mode'] = viewMode;
-        }
-    }
-
-    // Preserve search terms
-    const searchInput = document.getElementById('search');
-    if (searchInput && searchInput.value) {
-        evt.detail.parameters['search'] = searchInput.value;
-    }
-});
-
-// Handle loading states
-document.addEventListener('htmx:beforeRequest', function(evt) {
-    const target = evt.detail.target;
-    if (target) {
-        target.classList.add('htmx-requesting');
-    }
-});
-
-document.addEventListener('htmx:afterRequest', function(evt) {
-    const target = evt.detail.target;
-    if (target) {
-        target.classList.remove('htmx-requesting');
-    }
-});
-
-// Handle history navigation
-document.addEventListener('htmx:historyRestore', function(evt) {
-    const parkResults = document.getElementById('park-results');
-    if (parkResults && evt.detail.path) {
-        const url = new URL(evt.detail.path, window.location.origin);
-        const viewMode = url.searchParams.get('view_mode');
-        if (viewMode) {
-            parkResults.setAttribute('data-view-mode', viewMode);
-        }
-    }
-});
-
-// Initialize lazy loading for images
-function initializeLazyLoading(container) {
-    if (!('IntersectionObserver' in window)) return;
-
-    const imageObserver = new IntersectionObserver((entries) => {
-        entries.forEach(entry => {
-            if (entry.isIntersecting) {
-                const img = entry.target;
-                img.src = img.dataset.src;
-                img.removeAttribute('data-src');
-                imageObserver.unobserve(img);
-            }
-        });
-    });
-
-    container.querySelectorAll('img[data-src]').forEach(img => {
-        imageObserver.observe(img);
-    });
-}
-
-// Initialize lazy loading after HTMX content swaps
-document.addEventListener('htmx:afterSwap', function(evt) {
-    initializeLazyLoading(evt.detail.target);
-});

templates/base/base.html

@@ -31,7 +31,7 @@
     <script src="https://unpkg.com/htmx.org@1.9.6"></script>
 
     <!-- Alpine.js -->
-    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
+    <script defer src="{% static 'js/alpine.min.js' %}"></script>
 
     <!-- Location Autocomplete -->
     <script src="{% static 'js/location-autocomplete.js' %}"></script>

thrillwiki/urls.py

@@ -7,7 +7,6 @@ from accounts import views as accounts_views
 from django.views.generic import TemplateView
 from .views import HomeView, SearchView
 from . import views
-from autocomplete.urls import urlpatterns as autocomplete_patterns
 import os
 
 urlpatterns = [
@@ -59,8 +58,6 @@ urlpatterns = [
         views***REMOVED***ironment_and_settings_view,
         name="environment_and_settings",
     ),
-    # Autocomplete URLs
-    path("ac/", include((autocomplete_patterns, "autocomplete"), namespace="autocomplete")),
 ]
 
 # Serve static files in development