Seatmap rendering and other updates

apps/edr-passenger-web/backoffice/src/app/classes/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { Plus, Edit, Trash2, Search } from 'lucide-react';
 import DataTable from '@/components/ui/DataTable';
@@ -16,6 +16,7 @@ export default function ClassesPage() {
   const [showModal, setShowModal] = useState(false);
   const [editingClass, setEditingClass] = useState<any>(null);
   const [deleteConfirm, setDeleteConfirm] = useState<{ isOpen: boolean; class: any | null }>({ isOpen: false, class: null });
+  const [selectedCoachTypeId, setSelectedCoachTypeId] = useState<string>('');
   const queryClient = useQueryClient();
 
   const { data, isLoading } = useQuery({
@@ -28,12 +29,19 @@ export default function ClassesPage() {
     queryFn: () => apiClient.get('/fleet/coach-types'),
   });
 
+  useEffect(() => {
+    if (showModal && editingClass) {
+      setSelectedCoachTypeId(editingClass.coachTypeId || '');
+    }
+  }, [showModal, editingClass]);
+
   const createMutation = useMutation({
     mutationFn: seatClassesApi.create,
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['classes'] });
       setShowModal(false);
       setEditingClass(null);
+      setSelectedCoachTypeId('');
     },
   });
 
@@ -43,6 +51,7 @@ export default function ClassesPage() {
       queryClient.invalidateQueries({ queryKey: ['classes'] });
       setShowModal(false);
       setEditingClass(null);
+      setSelectedCoachTypeId('');
     },
   });
 
@@ -55,12 +64,19 @@ export default function ClassesPage() {
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
+    
+    if (!selectedCoachTypeId) {
+      alert('Please select a coach type');
+      return;
+    }
+    
     const formData = new FormData(e.currentTarget);
     const classData = {
-      coachTypeId: formData.get('coachTypeId') as string,
+      coachTypeId: selectedCoachTypeId,
       name: formData.get('name') as string,
       description: formData.get('description') as string,
       baseFareMinor: parseInt(formData.get('baseFareMinor') as string) || 0,
+      isActive: formData.get('isActive') === 'true',
     };
 
     if (editingClass) {
@@ -136,13 +152,19 @@ export default function ClassesPage() {
     },
   ];
 
+  const handleOpenModal = (cls?: any) => {
+    if (cls) {
+      setEditingClass(cls);
+    } else {
+      setEditingClass(null);
+    }
+    setShowModal(true);
+  };
+
   const actions = [
     {
       label: 'Edit',
-      onClick: (cls: any) => {
-        setEditingClass(cls);
-        setShowModal(true);
-      },
+      onClick: (cls: any) => handleOpenModal(cls),
       variant: 'secondary' as const,
       icon: Edit,
     },
@@ -163,10 +185,7 @@ export default function ClassesPage() {
         </div>
         <ActionButton
           icon={Plus}
-          onClick={() => {
-            setEditingClass(null);
-            setShowModal(true);
-          }}
+          onClick={() => handleOpenModal()}
         >
           Add Class
         </ActionButton>
@@ -211,6 +230,7 @@ export default function ClassesPage() {
         onClose={() => {
           setShowModal(false);
           setEditingClass(null);
+          setSelectedCoachTypeId('');
         }}
         title={`${editingClass ? 'Edit' : 'Add'} Class`}
         size="lg"
@@ -222,7 +242,8 @@ export default function ClassesPage() {
               <select
                 name="coachTypeId"
                 className="input"
-                defaultValue={editingClass?.coachTypeId || ''}
+                value={selectedCoachTypeId}
+                onChange={(e) => setSelectedCoachTypeId(e.target.value)}
                 required
               >
                 <option value="">Select Coach Type</option>
@@ -276,7 +297,7 @@ export default function ClassesPage() {
               <select
                 name="isActive"
                 className="input"
-                defaultValue={editingClass?.isActive?.toString() || 'true'}
+                defaultValue={editingClass?.isActive !== undefined ? editingClass.isActive.toString() : 'true'}
               >
                 <option value="true">Active</option>
                 <option value="false">Inactive</option>
@@ -291,6 +312,7 @@ export default function ClassesPage() {
               onClick={() => {
                 setShowModal(false);
                 setEditingClass(null);
+                setSelectedCoachTypeId('');
               }}
             >
               Cancel