Add test utilities and state machine diagrams for FSM models

- Introduced reusable test utilities in `backend/tests/utils` for FSM transitions, HTMX interactions, and common scenarios.
- Added factory functions for creating test submissions, parks, rides, and photo submissions.
- Implemented assertion helpers for verifying state changes, toast notifications, and transition logs.
- Created comprehensive state machine diagrams for all FSM-enabled models in `docs/STATE_DIAGRAMS.md`, detailing states, transitions, and guard conditions.

backend/templates/rides/ride_detail.html

@@ -8,12 +8,12 @@
     <!-- Action Buttons - Above header -->
     {% if user.is_authenticated %}
     <div class="flex justify-end gap-2 mb-2">
-        <a href="{% url 'parks:rides:ride_update' park_slug=ride.park.slug ride_slug=ride.slug %}" 
+        <a href="{% url 'parks:rides:ride_update' park_slug=ride.park.slug ride_slug=ride.slug %}"
            class="transition-transform btn-secondary hover:scale-105">
             <i class="mr-1 fas fa-pencil-alt"></i>Edit
         </a>
         {% if perms.media.add_photo %}
-        <button class="transition-transform btn-secondary hover:scale-105" 
+        <button class="transition-transform btn-secondary hover:scale-105"
                 @click="$dispatch('show-photo-upload')">
             <i class="mr-1 fas fa-camera"></i>Upload Photo
         </button>
@@ -21,6 +21,13 @@
     </div>
     {% endif %}
 
+    <!-- Status Management Section (Moderators Only) -->
+    <div id="ride-status-section"
+         hx-get="{% url 'parks:rides:ride_status_actions' park_slug=ride.park.slug ride_slug=ride.slug %}"
+         hx-trigger="load"
+         hx-swap="outerHTML">
+    </div>
+
     <!-- Ride Header -->
     <div class="p-compact mb-6 bg-white rounded-lg shadow-lg dark:bg-gray-800">
         <div class="text-center">
@@ -34,13 +41,8 @@
                 {% endif %}
             </div>
             <div class="flex flex-wrap items-center justify-center gap-2 mt-3">
-                <span class="px-3 py-1 text-sm font-medium status-badge {% if ride.status == 'OPERATING' %}status-operating
-                    {% elif ride.status == 'CLOSED_TEMP' or ride.status == 'CLOSED_PERM' %}status-closed
-                    {% elif ride.status == 'UNDER_CONSTRUCTION' %}status-construction
-                    {% elif ride.status == 'DEMOLISHED' %}status-demolished
-                    {% elif ride.status == 'RELOCATED' %}status-relocated{% endif %}">
-                    {{ ride.get_status_display }}
-                </span>
+                {% include "rides/partials/ride_header_badge.html" with ride=ride %}
+
                 <span class="px-3 py-1 text-sm font-medium text-blue-800 bg-blue-100 status-badge dark:bg-blue-700 dark:text-blue-50">
                     {{ ride.get_category_display }}
                 </span>