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/moderation/partials/photosubmission_row.html

@@ -0,0 +1,86 @@
+{% load fsm_tags %}
+
+<div class="p-6 submission-card {% if transition_success %}animate-flash-success{% endif %}"
+     id="submission-{{ object.id }}"
+     data-photo-submission-id="{{ object.id }}">
+    <div class="mb-4 submission-header">
+        <div>
+            <h3 class="flex items-center gap-2 text-lg font-semibold text-gray-900 dark:text-white">
+                {% include 'htmx/status_with_actions.html' with object=object user=user show_badge=True badge_only=True %}
+                Photo for {{ object.content_object }}
+            </h3>
+            <div class="mt-1 submission-meta">
+                <span class="inline-flex items-center">
+                    <i class="mr-1 fas fa-user"></i>
+                    {{ object.user.username }}
+                </span>
+                <span class="mx-2">*</span>
+                <span class="inline-flex items-center">
+                    <i class="mr-1 fas fa-clock"></i>
+                    {{ object.created_at|date:"M d, Y H:i" }}
+                </span>
+                {% if object.date_taken %}
+                <span class="mx-2">*</span>
+                <span class="inline-flex items-center">
+                    <i class="mr-1 fas fa-calendar"></i>
+                    Taken: {{ object.date_taken|date:"M d, Y" }}
+                </span>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+
+    <!-- Photo display -->
+    <div class="mt-4 overflow-hidden bg-gray-100 rounded-lg aspect-w-16 aspect-h-9 dark:bg-gray-800">
+        <img src="{{ object.photo.url }}"
+             alt="{{ object.caption|default:'Submitted photo' }}"
+             class="object-contain w-full h-full">
+    </div>
+
+    {% if object.caption %}
+    <div class="p-4 mt-2 rounded-lg bg-gray-50 dark:bg-gray-700/50">
+        <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Caption:</div>
+        <div class="mt-1 text-gray-600 dark:text-gray-400">{{ object.caption }}</div>
+    </div>
+    {% endif %}
+
+    {% if object.notes %}
+    <div class="p-4 mt-4 border rounded-lg bg-blue-50 dark:bg-blue-900/30 border-blue-200/50 dark:border-blue-700/50">
+        <div class="text-sm font-medium text-blue-900 dark:text-blue-300">Review Notes:</div>
+        <div class="mt-1.5 text-blue-800 dark:text-blue-200">{{ object.notes }}</div>
+    </div>
+    {% endif %}
+
+    <!-- FSM Actions -->
+    {% if object.status == 'PENDING' or object.status == 'ESCALATED' and user.role in 'ADMIN','SUPERUSER' %}
+    <div class="mt-4 review-notes" x-data="{ showNotes: false }">
+        <textarea x-show="showNotes"
+                  name="notes"
+                  class="w-full p-3 border border-gray-300 rounded-lg resize-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+                  placeholder="Add review notes (optional)"
+                  rows="3"></textarea>
+
+        <div class="flex items-center justify-end gap-3 mt-4 action-buttons">
+            <button class="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+                    @click="showNotes = !showNotes">
+                <i class="mr-2 fas fa-comment-alt"></i>
+                Add Notes
+            </button>
+
+            <!-- History Button -->
+            <button type="button"
+                    class="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+                    hx-get="{% url 'moderation:moderation-reports-all-history' %}?model_type=photosubmission&object_id={{ object.id }}"
+                    hx-target="#history-detail-body"
+                    hx-swap="innerHTML"
+                    @click="$dispatch('open-history-modal')">
+                <i class="mr-2 fas fa-history"></i>
+                History
+            </button>
+
+            <!-- FSM-based transition actions -->
+            {% include 'htmx/status_with_actions.html' with object=object user=user target_id="submission-"|add:object.id|stringformat:"s" show_badge=False %}
+        </div>
+    </div>
+    {% endif %}
+</div>