Coaches, seats, schedules, and pricing related updates

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

@@ -0,0 +1,309 @@
+'use client';
+
+import { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { Plus, Edit, Trash2, Search } from 'lucide-react';
+import DataTable from '@/components/ui/DataTable';
+import Badge from '@/components/ui/Badge';
+import ActionButton from '@/components/ui/ActionButton';
+import Modal from '@/components/ui/Modal';
+import ConfirmDialog from '@/components/ui/ConfirmDialog';
+import { seatClassesApi, apiClient } from '@/lib/api';
+import { formatCurrency } from '@/lib/utils';
+
+export default function ClassesPage() {
+  const [filters, setFilters] = useState({ search: '' });
+  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 queryClient = useQueryClient();
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['classes', filters],
+    queryFn: () => seatClassesApi.getAll(),
+  });
+
+  const { data: coachTypes } = useQuery<any>({
+    queryKey: ['coach-types'],
+    queryFn: () => apiClient.get('/fleet/coach-types'),
+  });
+
+  const createMutation = useMutation({
+    mutationFn: seatClassesApi.create,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['classes'] });
+      setShowModal(false);
+      setEditingClass(null);
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: ({ id, data }: { id: string; data: any }) => seatClassesApi.update(id, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['classes'] });
+      setShowModal(false);
+      setEditingClass(null);
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: seatClassesApi.delete,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['classes'] });
+    },
+  });
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    const classData = {
+      coachTypeId: formData.get('coachTypeId') as string,
+      name: formData.get('name') as string,
+      description: formData.get('description') as string,
+      baseFareMinor: parseInt(formData.get('baseFareMinor') as string) || 0,
+    };
+
+    if (editingClass) {
+      await updateMutation.mutateAsync({ id: editingClass.id, data: classData });
+    } else {
+      await createMutation.mutateAsync(classData);
+    }
+  };
+
+  const handleDelete = (cls: any) => {
+    setDeleteConfirm({ isOpen: true, class: cls });
+  };
+
+  const confirmDelete = async () => {
+    if (deleteConfirm.class) {
+      await deleteMutation.mutateAsync(deleteConfirm.class.id);
+      setDeleteConfirm({ isOpen: false, class: null });
+    }
+  };
+
+  const coachTypesArray = Array.isArray(coachTypes) ? coachTypes : ((coachTypes as any)?.data || (coachTypes as any)?.items || []);
+  const coachTypeMap = coachTypesArray.reduce((map: any, ct: any) => {
+    map[ct.id] = ct.name;
+    return map;
+  }, {});
+
+  const filteredClasses = (data as any)?.items || (Array.isArray(data) ? data : []);
+  const displayedClasses = filteredClasses.filter((cls: any) => {
+    if (!filters.search) return true;
+    const searchLower = filters.search.toLowerCase();
+    return (
+      cls.name?.toLowerCase().includes(searchLower) ||
+      cls.coachType?.name?.toLowerCase().includes(searchLower) ||
+      cls.description?.toLowerCase().includes(searchLower)
+    );
+  });
+
+  const columns = [
+    {
+      key: 'coachType',
+      label: 'Coach Type',
+      render: (cls: any) => (
+        <span className="text-sm">{cls.coachType?.name || coachTypeMap[cls.coachTypeId] || 'N/A'}</span>
+      ),
+    },
+    {
+      key: 'name',
+      label: 'Class Name',
+      render: (cls: any) => <span className="font-medium">{cls.name}</span>,
+    },
+    {
+      key: 'description',
+      label: 'Description',
+      render: (cls: any) => (
+        <span className="text-sm text-muted-foreground">{cls.description || '-'}</span>
+      ),
+    },
+    {
+      key: 'baseFareMinor',
+      label: 'Base Fare (ETB)',
+      render: (cls: any) => (
+        <span className="font-mono text-sm">{formatCurrency(cls.baseFareMinor, 'ETB')}</span>
+      ),
+    },
+    {
+      key: 'isActive',
+      label: 'Status',
+      render: (cls: any) => (
+        <Badge variant="status" status={cls.isActive ? 'CONFIRMED' : 'CANCELLED'}>
+          {cls.isActive ? 'Active' : 'Inactive'}
+        </Badge>
+      ),
+    },
+  ];
+
+  const actions = [
+    {
+      label: 'Edit',
+      onClick: (cls: any) => {
+        setEditingClass(cls);
+        setShowModal(true);
+      },
+      variant: 'secondary' as const,
+      icon: Edit,
+    },
+    {
+      label: 'Delete',
+      onClick: handleDelete,
+      variant: 'danger' as const,
+      icon: Trash2,
+    },
+  ];
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-foreground">Classes</h1>
+          <p className="text-muted-foreground">Manage class configurations by coach type</p>
+        </div>
+        <ActionButton
+          icon={Plus}
+          onClick={() => {
+            setEditingClass(null);
+            setShowModal(true);
+          }}
+        >
+          Add Class
+        </ActionButton>
+      </div>
+
+      <div className="card">
+        <div className="relative mb-6">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <input
+            type="text"
+            placeholder="Search by name, coach type, or description..."
+            className="input pl-10 w-full"
+            value={filters.search}
+            onChange={(e) => setFilters({ ...filters, search: e.target.value })}
+          />
+        </div>
+      </div>
+
+      <DataTable
+        data={displayedClasses}
+        columns={columns}
+        actions={actions}
+        loading={isLoading}
+        emptyMessage={filters.search ? "No classes match your search" : "No classes found"}
+      />
+
+      {/* Delete Confirmation */}
+      <ConfirmDialog
+        isOpen={deleteConfirm.isOpen}
+        onClose={() => setDeleteConfirm({ isOpen: false, class: null })}
+        onConfirm={confirmDelete}
+        title="Delete Class"
+        message={`Are you sure you want to delete ${deleteConfirm.class?.name}?`}
+        confirmText="Delete"
+        isDanger={true}
+        warning="This class may be used by coaches and fare rules. Deleting it may impact seat assignments and pricing."
+      />
+
+      {/* Add/Edit Modal */}
+      <Modal
+        isOpen={showModal}
+        onClose={() => {
+          setShowModal(false);
+          setEditingClass(null);
+        }}
+        title={`${editingClass ? 'Edit' : 'Add'} Class`}
+        size="lg"
+      >
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="grid grid-cols-1 gap-4">
+            <div>
+              <label className="label">Coach Type *</label>
+              <select
+                name="coachTypeId"
+                className="input"
+                defaultValue={editingClass?.coachTypeId || ''}
+                required
+              >
+                <option value="">Select Coach Type</option>
+                {coachTypesArray.map((ct: any) => (
+                  <option key={ct.id} value={ct.id}>
+                    {ct.code} - {ct.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div>
+              <label className="label">Class Name *</label>
+              <input
+                type="text"
+                name="name"
+                className="input"
+                defaultValue={editingClass?.name || ''}
+                required
+                placeholder="e.g., Economy Regular"
+              />
+            </div>
+
+            <div>
+              <label className="label">Description</label>
+              <textarea
+                name="description"
+                className="input"
+                rows={3}
+                defaultValue={editingClass?.description || ''}
+                placeholder="Describe this class..."
+              />
+            </div>
+
+            <div>
+              <label className="label">Base Fare (ETB cents) *</label>
+              <input
+                type="number"
+                name="baseFareMinor"
+                className="input"
+                defaultValue={editingClass?.baseFareMinor || ''}
+                required
+                min="0"
+                placeholder="e.g., 45000 (450 ETB)"
+              />
+              <p className="text-xs text-muted-foreground mt-1">Enter amount in cents (100 cents = 1 ETB)</p>
+            </div>
+
+            <div>
+              <label className="label">Status</label>
+              <select
+                name="isActive"
+                className="input"
+                defaultValue={editingClass?.isActive?.toString() || 'true'}
+              >
+                <option value="true">Active</option>
+                <option value="false">Inactive</option>
+              </select>
+            </div>
+          </div>
+
+          <div className="flex justify-end gap-2 pt-4">
+            <ActionButton
+              type="button"
+              variant="secondary"
+              onClick={() => {
+                setShowModal(false);
+                setEditingClass(null);
+              }}
+            >
+              Cancel
+            </ActionButton>
+            <ActionButton
+              type="submit"
+              loading={createMutation.isPending || updateMutation.isPending}
+            >
+              {editingClass ? 'Update' : 'Create'} Class
+            </ActionButton>
+          </div>
+        </form>
+      </Modal>
+    </div>
+  );
+}

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

@@ -2,141 +2,251 @@
 
 import { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { fleetApi } from '@/lib/api';
+import { Plus, Search, Grid3x3, Edit, Trash2 } from 'lucide-react';
 import DataTable from '@/components/ui/DataTable';
 import ActionButton from '@/components/ui/ActionButton';
 import Modal from '@/components/ui/Modal';
 import ConfirmDialog from '@/components/ui/ConfirmDialog';
-import { Plus, Search, Grid3x3, Train, Edit, Trash2 } from 'lucide-react';
+import { fleetApi, apiClient } from '@/lib/api';
+
+type Tab = 'types' | 'coaches';
 
 export default function CoachesPage() {
+  const [activeTab, setActiveTab] = useState<Tab>('coaches');
   const [search, setSearch] = useState('');
   const [showModal, setShowModal] = useState(false);
-  const [editingCoach, setEditingCoach] = useState<any>(null);
-  const [deleteConfirm, setDeleteConfirm] = useState<{ isOpen: boolean; coach: any | null }>({ isOpen: false, coach: null });
+  const [editingItem, setEditingItem] = useState<any>(null);
+  const [deleteConfirm, setDeleteConfirm] = useState<{ isOpen: boolean; item: any | null }>({ isOpen: false, item: null });
   const queryClient = useQueryClient();
 
-  const { data, isLoading } = useQuery({
-    queryKey: ['coaches', search],
-    queryFn: () => fleetApi.getCoaches({ search }),
+  // Coach Types Queries
+  const { data: coachTypesData, isLoading: typesLoading } = useQuery({
+    queryKey: ['coach-types'],
+    queryFn: () => apiClient.get('/fleet/coach-types'),
   });
 
-  const createMutation = useMutation({
+  // Coaches Queries
+  const { data: coachesData, isLoading: coachesLoading } = useQuery({
+    queryKey: ['coaches'],
+    queryFn: () => fleetApi.getCoaches({}),
+  });
+
+  // Coach Type Mutations
+  const createCoachTypeMutation = useMutation({
+    mutationFn: (data: any) => apiClient.post('/fleet/coach-types', data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['coach-types'] });
+      setShowModal(false);
+      setEditingItem(null);
+    },
+  });
+
+  const updateCoachTypeMutation = useMutation({
+    mutationFn: ({ id, data }: { id: string; data: any }) => apiClient.patch(`/fleet/coach-types/${id}`, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['coach-types'] });
+      setShowModal(false);
+      setEditingItem(null);
+    },
+  });
+
+  const deleteCoachTypeMutation = useMutation({
+    mutationFn: (id: string) => apiClient.delete(`/fleet/coach-types/${id}`),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['coach-types'] });
+    },
+  });
+
+  // Coach Mutations
+  const createCoachMutation = useMutation({
     mutationFn: fleetApi.createCoach,
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['coaches'] });
       setShowModal(false);
-      setEditingCoach(null);
+      setEditingItem(null);
     },
   });
 
-  const updateMutation = useMutation({
+  const updateCoachMutation = useMutation({
     mutationFn: ({ id, data }: { id: string; data: any }) => fleetApi.updateCoach(id, data),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['coaches'] });
       setShowModal(false);
-      setEditingCoach(null);
+      setEditingItem(null);
     },
   });
 
-  const deleteMutation = useMutation({
+  const deleteCoachMutation = useMutation({
     mutationFn: fleetApi.deleteCoach,
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['coaches'] });
     },
   });
 
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+  const handleCoachTypeSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const formData = new FormData(e.currentTarget);
-    const coachData = {
-      coachNumber: formData.get('coachNumber') as string,
-      label: formData.get('label') as string,
-      seatClassId: formData.get('seatClassId') as string,
-      coachType: formData.get('coachType') as string,
-      mode: formData.get('mode') as string,
-      seatArrangement: formData.get('seatArrangement') as string,
-      totalUnits: parseInt(formData.get('totalUnits') as string),
-      isActive: formData.get('isActive') === 'true',
+    const data = {
+      code: formData.get('code') as string,
+      name: formData.get('name') as string,
+      type: formData.get('type') as string,
     };
 
-    if (editingCoach) {
-      await updateMutation.mutateAsync({ id: editingCoach.id, data: coachData });
+    if (editingItem?.isCoachType) {
+      await updateCoachTypeMutation.mutateAsync({ id: editingItem.id, data });
     } else {
-      await createMutation.mutateAsync(coachData);
+      await createCoachTypeMutation.mutateAsync(data);
     }
   };
 
-  const handleDelete = (coach: any) => {
-    setDeleteConfirm({ isOpen: true, coach });
+  const handleCoachSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    const data = {
+      number: formData.get('number') as string,
+      coachTypeId: formData.get('coachTypeId') as string,
+      arrangement: formData.get('arrangement') as string,
+      capacity: parseInt(formData.get('capacity') as string),
+      status: formData.get('status') as string,
+    };
+
+    if (editingItem?.isCoach) {
+      await updateCoachMutation.mutateAsync({ id: editingItem.id, data });
+    } else {
+      await createCoachMutation.mutateAsync(data);
+    }
+  };
+
+  const handleDelete = (item: any, isCoachType: boolean) => {
+    setDeleteConfirm({ isOpen: true, item: { ...item, isCoachType } });
   };
 
   const confirmDelete = async () => {
-    if (deleteConfirm.coach) {
-      await deleteMutation.mutateAsync(deleteConfirm.coach.id);
-      setDeleteConfirm({ isOpen: false, coach: null });
+    if (deleteConfirm.item?.isCoachType) {
+      await deleteCoachTypeMutation.mutateAsync(deleteConfirm.item.id);
+    } else {
+      await deleteCoachMutation.mutateAsync(deleteConfirm.item.id);
     }
+    setDeleteConfirm({ isOpen: false, item: null });
   };
 
-  const coaches = data?.items || data?.data || [];
+  const coachTypesArray = Array.isArray(coachTypesData) ? coachTypesData : (coachTypesData as any)?.items || (coachTypesData as any)?.data || [];
+  const coaches = coachesData?.items || coachesData?.data || [];
 
-  const columns = [
+  const filteredCoachTypes = coachTypesArray.filter((ct: any) => {
+    if (!search) return true;
+    const searchLower = search.toLowerCase();
+    return (
+      ct.code?.toLowerCase().includes(searchLower) ||
+      ct.name?.toLowerCase().includes(searchLower) ||
+      ct.type?.toLowerCase().includes(searchLower)
+    );
+  });
+
+  const filteredCoaches = coaches.filter((coach: any) => {
+    if (!search) return true;
+    const searchLower = search.toLowerCase();
+    return (
+      coach.number?.toLowerCase().includes(searchLower) ||
+      coach.coachNumber?.toLowerCase().includes(searchLower) ||
+      coach.coachType?.name?.toLowerCase().includes(searchLower) ||
+      coach.arrangement?.toLowerCase().includes(searchLower)
+    );
+  });
+
+  const typeColorMap: Record<string, string> = {
+    passenger: 'edr-badge-info',
+    sleeper: 'edr-badge-warning',
+    dining: 'edr-badge-success',
+    baggage: 'edr-badge-danger',
+  };
+
+  const statusMap: Record<string, string> = {
+    ACTIVE: 'edr-badge-success',
+    MAINTENANCE: 'edr-badge-warning',
+    INACTIVE: 'edr-badge-danger',
+  };
+
+  // Coach Types Columns
+  const coachTypeColumns = [
     {
-      key: 'coachNumber',
-      label: 'Coach Number',
+      key: 'code',
+      label: 'Code',
+      sortable: true,
+      render: (ct: any) => (
+        <div className="flex items-center gap-2">
+          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-[rgb(20,113,76)]">
+            <Grid3x3 className="h-4 w-4 text-white" />
+          </div>
+          <span className="font-mono font-medium">{ct.code}</span>
+        </div>
+      ),
+    },
+    {
+      key: 'name',
+      label: 'Name',
+      sortable: true,
+      render: (ct: any) => <span className="font-medium">{ct.name}</span>,
+    },
+    {
+      key: 'type',
+      label: 'Type',
+      render: (ct: any) => (
+        <span className={`edr-badge ${typeColorMap[ct.type] || 'edr-badge-info'}`}>
+          {ct.type}
+        </span>
+      ),
+    },
+    {
+      key: 'coaches',
+      label: 'Coaches',
+      render: (ct: any) => (
+        <span className="text-sm font-medium">{ct.coaches?.length || 0}</span>
+      ),
+    },
+  ];
+
+  // Coaches Columns
+  const coachColumns = [
+    {
+      key: 'number',
+      label: 'Number',
       sortable: true,
       render: (coach: any) => (
         <div className="flex items-center gap-2">
           <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-[rgb(20,113,76)]">
             <Grid3x3 className="h-4 w-4 text-white" />
           </div>
-          <span className="font-medium">{coach.coachNumber}</span>
+          <span className="font-medium">{coach.number || coach.coachNumber}</span>
         </div>
       ),
     },
     {
-      key: 'seatClass',
-      label: 'Seat Class',
-      render: (coach: any) => {
-        const seatClass = coach.seatClass?.name || coach.serviceClass || 'N/A';
-        const colorMap: Record<string, string> = {
-          'ECONOMY_REGULAR': 'edr-badge-info',
-          'ECONOMY_BED': 'edr-badge-warning',
-          'VIP_BED': 'edr-badge-success',
-        };
-        return (
-          <span className={`edr-badge ${colorMap[seatClass] || 'edr-badge-info'}`}>
-            {seatClass.replace(/_/g, ' ')}
-          </span>
-        );
-      },
-    },
-    {
-      key: 'totalSeats',
-      label: 'Total Seats',
+      key: 'coachType',
+      label: 'Coach Type',
       render: (coach: any) => (
-        <span className="font-mono text-sm">{coach.totalSeats || coach.totalUnits || 0}</span>
+        <span className="text-sm">{coach.coachType?.name || 'N/A'}</span>
       ),
     },
     {
-      key: 'layout',
-      label: 'Layout',
+      key: 'arrangement',
+      label: 'Arrangement',
       render: (coach: any) => (
-        <span className="text-sm text-muted-foreground">
-          {coach.layout || coach.seatLayout || coach.seatArrangement || 'N/A'}
-        </span>
+        <span className="text-sm font-mono">{coach.arrangement || 'N/A'}</span>
+      ),
+    },
+    {
+      key: 'capacity',
+      label: 'Capacity',
+      render: (coach: any) => (
+        <span className="font-mono text-sm font-medium">{coach.capacity || 0}</span>
       ),
     },
     {
       key: 'status',
       label: 'Status',
       render: (coach: any) => {
-        const status = coach.isActive ? 'ACTIVE' : 'INACTIVE';
-        const statusMap: Record<string, string> = {
-          ACTIVE: 'edr-badge-success',
-          MAINTENANCE: 'edr-badge-warning',
-          INACTIVE: 'edr-badge-danger',
-        };
+        const status = coach.status || 'ACTIVE';
         return (
           <span className={`edr-badge ${statusMap[status] || 'edr-badge-info'}`}>
             {status}
@@ -146,11 +256,11 @@ export default function CoachesPage() {
     },
   ];
 
-  const actions = [
+  const coachTypeActions = [
     {
       label: 'Edit',
-      onClick: (coach: any) => {
-        setEditingCoach(coach);
+      onClick: (item: any) => {
+        setEditingItem({ ...item, isCoachType: true });
         setShowModal(true);
       },
       variant: 'secondary' as const,
@@ -158,7 +268,25 @@ export default function CoachesPage() {
     },
     {
       label: 'Delete',
-      onClick: handleDelete,
+      onClick: (item: any) => handleDelete(item, true),
+      variant: 'danger' as const,
+      icon: Trash2,
+    },
+  ];
+
+  const coachActions = [
+    {
+      label: 'Edit',
+      onClick: (item: any) => {
+        setEditingItem({ ...item, isCoach: true });
+        setShowModal(true);
+      },
+      variant: 'secondary' as const,
+      icon: Edit,
+    },
+    {
+      label: 'Delete',
+      onClick: (item: any) => handleDelete(item, false),
       variant: 'danger' as const,
       icon: Trash2,
     },
@@ -169,51 +297,112 @@ export default function CoachesPage() {
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-3xl font-bold text-foreground">Coach Management</h1>
-          <p className="text-muted-foreground mt-1">Manage train coaches and configurations</p>
+          <p className="text-muted-foreground mt-1">Manage coach types and train coaches</p>
         </div>
         <ActionButton
           icon={Plus}
           onClick={() => {
-            setEditingCoach(null);
+            setEditingItem(null);
+            setSearch('');
             setShowModal(true);
           }}
         >
-          Add Coach
+          {activeTab === 'types' ? 'Add Coach Type' : 'Add Coach'}
         </ActionButton>
       </div>
 
+      {/* Tabs */}
       <div className="card">
-        <div className="flex items-center gap-4 mb-6">
-          <div className="relative flex-1">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-            <input
-              type="text"
-              placeholder="Search coaches..."
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              className="input pl-10"
-            />
-          </div>
+        <div className="flex border-b border-border">
+          <button
+            onClick={() => {
+              setActiveTab('types');
+              setSearch('');
+            }}
+            className={`px-4 py-3 font-medium transition-colors ${
+              activeTab === 'types'
+                ? 'border-b-2 border-primary text-primary'
+                : 'text-muted-foreground hover:text-foreground'
+            }`}
+          >
+            Coach Types
+          </button>
+          <button
+            onClick={() => {
+              setActiveTab('coaches');
+              setSearch('');
+            }}
+            className={`px-4 py-3 font-medium transition-colors ${
+              activeTab === 'coaches'
+                ? 'border-b-2 border-primary text-primary'
+                : 'text-muted-foreground hover:text-foreground'
+            }`}
+          >
+            Coaches
+          </button>
         </div>
 
-        <DataTable
-          columns={columns}
-          data={coaches}
-          actions={actions}
-          loading={isLoading}
-        />
+        {/* Coach Types Tab */}
+        {activeTab === 'types' && (
+          <div className="pt-6 space-y-4">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <input
+                type="text"
+                placeholder="Search by code, name, or type..."
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                className="input pl-10 w-full"
+              />
+            </div>
+            <DataTable
+              columns={coachTypeColumns}
+              data={filteredCoachTypes}
+              actions={coachTypeActions}
+              loading={typesLoading}
+              emptyMessage={search ? "No coach types match your search" : "No coach types found. Create one to get started."}
+            />
+          </div>
+        )}
+
+        {/* Coaches Tab */}
+        {activeTab === 'coaches' && (
+          <div className="pt-6 space-y-4">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <input
+                type="text"
+                placeholder="Search by coach number, type, or arrangement..."
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                className="input pl-10 w-full"
+              />
+            </div>
+            <DataTable
+              columns={coachColumns}
+              data={filteredCoaches}
+              actions={coachActions}
+              loading={coachesLoading}
+              emptyMessage={search ? "No coaches match your search" : "No coaches found. Create one to get started."}
+            />
+          </div>
+        )}
       </div>
 
       {/* Delete Confirmation */}
       <ConfirmDialog
         isOpen={deleteConfirm.isOpen}
-        onClose={() => setDeleteConfirm({ isOpen: false, coach: null })}
+        onClose={() => setDeleteConfirm({ isOpen: false, item: null })}
         onConfirm={confirmDelete}
-        title="Delete Coach"
-        message={`Are you sure you want to delete coach ${deleteConfirm.coach?.coachNumber}?`}
+        title={`Delete ${deleteConfirm.item?.isCoachType ? 'Coach Type' : 'Coach'}`}
+        message={`Are you sure you want to delete ${deleteConfirm.item?.name || deleteConfirm.item?.number}?`}
         confirmText="Delete"
         isDanger={true}
-        warning="This coach may be assigned to schedules and trips. Deleting it may impact these systems."
+        warning={
+          deleteConfirm.item?.isCoachType
+            ? 'This coach type may have coaches assigned. Deleting it may impact these systems.'
+            : 'This coach may be assigned to schedules. Deleting it may impact these systems.'
+        }
       />
 
       {/* Add/Edit Modal */}
@@ -221,106 +410,170 @@ export default function CoachesPage() {
         isOpen={showModal}
         onClose={() => {
           setShowModal(false);
-          setEditingCoach(null);
+          setEditingItem(null);
         }}
-        title={`${editingCoach ? 'Edit' : 'Add'} Coach`}
-        size="lg"
+        title={
+          activeTab === 'types'
+            ? `${editingItem?.isCoachType ? 'Edit' : 'Add'} Coach Type`
+            : `${editingItem?.isCoach ? 'Edit' : 'Add'} Coach`
+        }
+        size={activeTab === 'types' ? 'md' : 'lg'}
       >
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div>
-              <label className="label">Coach Number *</label>
-              <input
-                type="text"
-                name="coachNumber"
-                className="input"
-                defaultValue={editingCoach?.coachNumber}
-                required
-                placeholder="e.g., C001"
-              />
+        {/* Coach Type Form */}
+        {activeTab === 'types' && (
+          <form onSubmit={handleCoachTypeSubmit} className="space-y-4">
+            <div className="grid grid-cols-1 gap-4">
+              <div>
+                <label className="label">Code</label>
+                <input
+                  type="text"
+                  name="code"
+                  className="input"
+                  defaultValue={editingItem?.code || ''}
+                  required
+                  placeholder="e.g., HSC"
+                />
+              </div>
+
+              <div>
+                <label className="label">Name</label>
+                <input
+                  type="text"
+                  name="name"
+                  className="input"
+                  defaultValue={editingItem?.name || ''}
+                  required
+                  placeholder="e.g., Hard Seat Coach"
+                />
+              </div>
+
+              <div>
+                <label className="label">Type</label>
+                <input
+                  type="text"
+                  name="type"
+                  className="input"
+                  defaultValue={editingItem?.type || ''}
+                  required
+                  placeholder="e.g., Regular Seat"
+                />
+              </div>
             </div>
-            <div>
-              <label className="label">Label *</label>
-              <input
-                type="text"
-                name="label"
-                className="input"
-                defaultValue={editingCoach?.label}
-                required
-                placeholder="e.g., Coach 1"
-              />
-            </div>
-            <div>
-              <label className="label">Coach Type</label>
-              <select name="coachType" className="input" defaultValue={editingCoach?.coachType}>
-                <option value="passenger">Passenger</option>
-                <option value="sleeper">Sleeper</option>
-                <option value="dining">Dining</option>
-                <option value="baggage">Baggage</option>
-              </select>
-            </div>
-            <div>
-              <label className="label">Mode *</label>
-              <select name="mode" className="input" defaultValue={editingCoach?.mode || 'seat'}>
-                <option value="seat">Seat</option>
-                <option value="bed">Bed</option>
-                <option value="convertible">Convertible</option>
-              </select>
-            </div>
-            <div>
-              <label className="label">Seat Arrangement</label>
-              <input
-                type="text"
-                name="seatArrangement"
-                className="input"
-                defaultValue={editingCoach?.seatArrangement}
-                placeholder="e.g., 2+2"
-              />
-            </div>
-            <div>
-              <label className="label">Total Units *</label>
-              <input
-                type="number"
-                name="totalUnits"
-                className="input"
-                defaultValue={editingCoach?.totalUnits}
-                required
-                min="1"
-                placeholder="60"
-              />
-            </div>
-            <div>
-              <label className="label">Status</label>
-              <select
-                name="isActive"
-                className="input"
-                defaultValue={editingCoach?.isActive?.toString() || 'true'}
+
+            <div className="flex justify-end gap-2 pt-4">
+              <ActionButton
+                type="button"
+                variant="secondary"
+                onClick={() => {
+                  setShowModal(false);
+                  setEditingItem(null);
+                }}
               >
-                <option value="true">Active</option>
-                <option value="false">Inactive</option>
-              </select>
+                Cancel
+              </ActionButton>
+              <ActionButton
+                type="submit"
+                loading={createCoachTypeMutation.isPending || updateCoachTypeMutation.isPending}
+              >
+                {editingItem?.isCoachType ? 'Update' : 'Create'} Coach Type
+              </ActionButton>
             </div>
-          </div>
-          
-          <div className="flex justify-end gap-2 pt-4">
-            <ActionButton
-              type="button"
-              variant="secondary"
-              onClick={() => {
-                setShowModal(false);
-                setEditingCoach(null);
-              }}
-            >
-              Cancel
-            </ActionButton>
-            <ActionButton
-              type="submit"
-              loading={createMutation.isPending || updateMutation.isPending}
-            >
-              {editingCoach ? 'Update' : 'Create'} Coach
-            </ActionButton>
-          </div>
-        </form>
+          </form>
+        )}
+
+        {/* Coach Form */}
+        {activeTab === 'coaches' && (
+          <form onSubmit={handleCoachSubmit} className="space-y-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <label className="label">Coach Type</label>
+                <select
+                  name="coachTypeId"
+                  className="input"
+                  defaultValue={editingItem?.coachTypeId || ''}
+                  required
+                >
+                  <option value="">Select Coach Type</option>
+                  {coachTypesArray.map((ct: any) => (
+                    <option key={ct.id} value={ct.id}>
+                      {ct.code} - {ct.name} - {ct.type}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              <div>
+                <label className="label">Number</label>
+                <input
+                  type="text"
+                  name="number"
+                  className="input"
+                  defaultValue={editingItem?.number || editingItem?.coachNumber || ''}
+                  required
+                  placeholder="e.g., A-001"
+                />
+              </div>
+
+              <div>
+                <label className="label">Arrangement</label>
+                <input
+                  type="text"
+                  name="arrangement"
+                  className="input"
+                  defaultValue={editingItem?.arrangement || editingItem?.seatArrangement || '2+2'}
+                  required
+                  placeholder="e.g., 2+2, 3+2"
+                />
+                <p className="text-xs text-muted-foreground mt-1">Format: separate columns with +</p>
+              </div>
+
+              <div>
+                <label className="label">Capacity</label>
+                <input
+                  type="number"
+                  name="capacity"
+                  className="input"
+                  defaultValue={editingItem?.capacity || editingItem?.totalUnits || ''}
+                  required
+                  min="1"
+                  placeholder="60"
+                />
+              </div>
+
+              <div className="md:col-span-2">
+                <label className="label">Status</label>
+                <select
+                  name="status"
+                  className="input"
+                  defaultValue={editingItem?.status || 'ACTIVE'}
+                >
+                  <option value="ACTIVE">Active</option>
+                  <option value="MAINTENANCE">Maintenance</option>
+                  <option value="INACTIVE">Inactive</option>
+                </select>
+              </div>
+            </div>
+
+            <div className="flex justify-end gap-2 pt-4">
+              <ActionButton
+                type="button"
+                variant="secondary"
+                onClick={() => {
+                  setShowModal(false);
+                  setEditingItem(null);
+                }}
+              >
+                Cancel
+              </ActionButton>
+              <ActionButton
+                type="submit"
+                loading={createCoachMutation.isPending || updateCoachMutation.isPending}
+              >
+                {editingItem?.isCoach ? 'Update' : 'Create'} Coach
+              </ActionButton>
+            </div>
+          </form>
+        )}
       </Modal>
     </div>
   );

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

@@ -6,8 +6,8 @@ import { useAuthStore } from '@/lib/auth-store';
 import { Train } from 'lucide-react';
 
 export default function LoginPage() {
-  const [email, setEmail] = useState('admin@edr-platform.com');
-  const [password, setPassword] = useState('admin123');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
   const router = useRouter();

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

@@ -18,6 +18,7 @@ export default function PassengersPage() {
     page: 1,
     pageSize: 20,
     search: '',
+    role: 'PASSENGER',
   });
   const [selectedPassenger, setSelectedPassenger] = useState<any>(null);
   const [deleteConfirm, setDeleteConfirm] = useState<{ isOpen: boolean; passenger: any | null }>({ isOpen: false, passenger: null });

apps/edr-passenger-web/backoffice/src/app/pricing/layout.tsx

@@ -1,5 +1,54 @@
-import DashboardLayout from '../dashboard/layout';
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import Sidebar from '@/components/layout/Sidebar';
+import Header from '@/components/layout/Header';
+import { useAuthStore } from '@/lib/auth-store';
 
 export default function PricingLayout({ children }: { children: React.ReactNode }) {
-  return <DashboardLayout>{children}</DashboardLayout>;
+  const router = useRouter();
+  const { isAuthenticated } = useAuthStore();
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 100);
+    
+    return () => clearTimeout(timer);
+  }, []);
+
+  useEffect(() => {
+    if (!isLoading && !isAuthenticated) {
+      router.push('/login');
+    }
+  }, [isAuthenticated, router, isLoading]);
+
+  if (isLoading) {
+    return (
+      <div className="flex h-screen items-center justify-center bg-gray-50 dark:bg-slate-950">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-edr-green-600 mx-auto"></div>
+          <p className="mt-4 text-gray-600 dark:text-gray-400">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return null;
+  }
+
+  return (
+    <div className="flex h-screen overflow-hidden bg-gray-50 dark:bg-slate-950">
+      <Sidebar />
+      <div className="flex flex-1 flex-col overflow-hidden">
+        <Header />
+        <main className="flex-1 overflow-y-auto bg-gray-50 dark:bg-slate-950 p-6">
+          {children}
+        </main>
+      </div>
+    </div>
+  );
 }

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

@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { Plus, Edit, Trash2, X } from 'lucide-react';
+import { Plus, Edit, Trash2, X, Search } from 'lucide-react';
 import DataTable from '@/components/ui/DataTable';
 import Badge from '@/components/ui/Badge';
 import ActionButton from '@/components/ui/ActionButton';
@@ -26,6 +26,7 @@ export default function RoutesPage() {
   const [destinationStationId, setDestinationStationId] = useState('');
   const [destinationDistance, setDestinationDistance] = useState<number | undefined>(undefined);
   const [deleteConfirm, setDeleteConfirm] = useState<{ isOpen: boolean; route: any | null }>({ isOpen: false, route: null });
+  const [search, setSearch] = useState('');
   const queryClient = useQueryClient();
 
   const { data: routes, isLoading: routesLoading } = useQuery({
@@ -176,6 +177,17 @@ export default function RoutesPage() {
     },
   ];
 
+  const filteredRoutes = (routes as any)?.items || (Array.isArray(routes) ? routes : []);
+  const displayedRoutes = filteredRoutes.filter((route: any) => {
+    if (!search) return true;
+    const searchLower = search.toLowerCase();
+    return (
+      route.code?.toLowerCase().includes(searchLower) ||
+      route.name?.toLowerCase().includes(searchLower) ||
+      route.description?.toLowerCase().includes(searchLower)
+    );
+  });
+
   const routeActions = [
     {
       label: 'Edit',
@@ -238,6 +250,7 @@ export default function RoutesPage() {
             setDestinationStationId('');
             setDestinationDistance(undefined);
             setStops([]);
+            setSearch('');
             setShowModal(true);
           }}
         >
@@ -245,12 +258,23 @@ export default function RoutesPage() {
         </ActionButton>
       </div>
 
+      <div className="relative mb-6">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+        <input
+          type="text"
+          placeholder="Search by code, name, or description..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="input pl-10 w-full"
+        />
+      </div>
+
       <DataTable
-        data={(routes as any)?.items || (Array.isArray(routes) ? routes : [])}
+        data={displayedRoutes}
         columns={routeColumns}
         actions={routeActions}
         loading={routesLoading}
-        emptyMessage="No routes found"
+        emptyMessage={search ? "No routes match your search" : "No routes found"}
       />
 
       {/* Delete Confirmation */}
@@ -275,6 +299,7 @@ export default function RoutesPage() {
           setDestinationStationId('');
           setDestinationDistance(undefined);
           setStops([]);
+          setSearch('');
         }}
         title={`${editingRoute ? 'Edit' : 'Add'} Route`}
         size="lg"
@@ -516,6 +541,7 @@ export default function RoutesPage() {
                 setDestinationStationId('');
                 setDestinationDistance(undefined);
                 setStops([]);
+                setSearch('');
               }}
             >
               Cancel

apps/edr-passenger-web/backoffice/src/app/schedules/layout.tsx

@@ -1,5 +1,54 @@
-import DashboardLayout from '../dashboard/layout';
+'use client';
 
-export default function Layout({ children }: { children: React.ReactNode }) {
-  return <DashboardLayout>{children}</DashboardLayout>;
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import Sidebar from '@/components/layout/Sidebar';
+import Header from '@/components/layout/Header';
+import { useAuthStore } from '@/lib/auth-store';
+
+export default function SchedulesLayout({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+  const { isAuthenticated } = useAuthStore();
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 100);
+    
+    return () => clearTimeout(timer);
+  }, []);
+
+  useEffect(() => {
+    if (!isLoading && !isAuthenticated) {
+      router.push('/login');
+    }
+  }, [isAuthenticated, router, isLoading]);
+
+  if (isLoading) {
+    return (
+      <div className="flex h-screen items-center justify-center bg-gray-50 dark:bg-slate-950">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-edr-green-600 mx-auto"></div>
+          <p className="mt-4 text-gray-600 dark:text-gray-400">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return null;
+  }
+
+  return (
+    <div className="flex h-screen overflow-hidden bg-gray-50 dark:bg-slate-950">
+      <Sidebar />
+      <div className="flex flex-1 flex-col overflow-hidden">
+        <Header />
+        <main className="flex-1 overflow-y-auto bg-gray-50 dark:bg-slate-950 p-6">
+          {children}
+        </main>
+      </div>
+    </div>
+  );
 }

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

@@ -1,236 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { Download, Plus, Edit, Trash2 } from 'lucide-react';
-import DataTable from '@/components/ui/DataTable';
-import Badge from '@/components/ui/Badge';
-import ActionButton from '@/components/ui/ActionButton';
-import Modal from '@/components/ui/Modal';
-import ConfirmDialog from '@/components/ui/ConfirmDialog';
-import { seatClassesApi } from '@/lib/api';
-import { formatDateTime, formatCurrency } from '@/lib/utils';
-
-export default function SeatClassesPage() {
-  const [filters, setFilters] = useState({ search: '' });
-  const [showModal, setShowModal] = useState(false);
-  const [editingSeatClass, setEditingSeatClass] = useState<any>(null);
-  const [deleteConfirm, setDeleteConfirm] = useState<{ isOpen: boolean; seatClass: any | null }>({ isOpen: false, seatClass: null });
-  const queryClient = useQueryClient();
-
-  const { data, isLoading } = useQuery({
-    queryKey: ['seat-classes', filters],
-    queryFn: () => seatClassesApi.getAll(),
-  });
-
-  const createMutation = useMutation({
-    mutationFn: seatClassesApi.create,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['seat-classes'] });
-      setShowModal(false);
-      setEditingSeatClass(null);
-    },
-  });
-
-  const updateMutation = useMutation({
-    mutationFn: ({ id, data }: { id: string; data: any }) => seatClassesApi.update(id, data),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['seat-classes'] });
-      setShowModal(false);
-      setEditingSeatClass(null);
-    },
-  });
-
-  const deleteMutation = useMutation({
-    mutationFn: seatClassesApi.delete,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['seat-classes'] });
-    },
-  });
-
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    const formData = new FormData(e.currentTarget);
-    const seatClassData = {
-      name: formData.get('name') as string,
-      description: formData.get('description') as string,
-      basePrice: Math.round(parseFloat(formData.get('basePrice') as string) * 100), // Convert to minor units
-      isActive: formData.get('isActive') === 'true',
-    };
-
-    if (editingSeatClass) {
-      await updateMutation.mutateAsync({ id: editingSeatClass.id, data: seatClassData });
-    } else {
-      await createMutation.mutateAsync(seatClassData);
-    }
-  };
-
-  const handleDelete = (seatClass: any) => {
-    setDeleteConfirm({ isOpen: true, seatClass });
-  };
-
-  const confirmDelete = async () => {
-    if (deleteConfirm.seatClass) {
-      await deleteMutation.mutateAsync(deleteConfirm.seatClass.id);
-      setDeleteConfirm({ isOpen: false, seatClass: null });
-    }
-  };
-
-  const columns = [
-    { key: 'name', label: 'Name', render: (cls: any) => <span className="font-medium">{cls.name}</span> },
-    { key: 'description', label: 'Description', render: (cls: any) => cls.description || 'N/A' },
-    { key: 'basePrice', label: 'Base Price', render: (cls: any) => formatCurrency(cls.basePrice, 'ETB') },
-    { key: 'isActive', label: 'Status', render: (cls: any) => <Badge variant="status" status={cls.isActive ? 'CONFIRMED' : 'CANCELLED'}>{cls.isActive ? 'Active' : 'Inactive'}</Badge> },
-  ];
-
-  const actions = [
-    {
-      label: 'Edit',
-      onClick: (seatClass: any) => {
-        setEditingSeatClass(seatClass);
-        setShowModal(true);
-      },
-      variant: 'secondary' as const,
-      icon: Edit,
-    },
-    {
-      label: 'Delete',
-      onClick: handleDelete,
-      variant: 'danger' as const,
-      icon: Trash2,
-    },
-  ];
-
-  return (
-    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-foreground">Classes</h1>
-          <p className="text-muted-foreground">Manage seat class configurations</p>
-        </div>
-        <div className="flex gap-2">
-          <ActionButton icon={Download} variant="secondary">Export</ActionButton>
-          <ActionButton
-            icon={Plus}
-            onClick={() => {
-              setEditingSeatClass(null);
-              setShowModal(true);
-            }}
-          >
-            Add Seat Class
-          </ActionButton>
-        </div>
-      </div>
-
-      <div className="card">
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <div>
-            <label className="label">Search</label>
-            <input type="text" placeholder="Search..." className="input" value={filters.search} onChange={(e) => setFilters({ ...filters, search: e.target.value })} />
-          </div>
-        </div>
-      </div>
-
-      <DataTable
-        data={(data as any)?.items || (Array.isArray(data) ? data : [])}
-        columns={columns}
-        actions={actions}
-        loading={isLoading}
-        emptyMessage="No seat classes found"
-      />
-
-      {/* Delete Confirmation */}
-      <ConfirmDialog
-        isOpen={deleteConfirm.isOpen}
-        onClose={() => setDeleteConfirm({ isOpen: false, seatClass: null })}
-        onConfirm={confirmDelete}
-        title="Delete Seat Class"
-        message={`Are you sure you want to delete ${deleteConfirm.seatClass?.name}?`}
-        confirmText="Delete"
-        isDanger={true}
-        warning="This seat class may be used by coaches and trips. Deleting it may impact fare calculations and seat assignments."
-      />
-
-      {/* Add/Edit Modal */}
-      <Modal
-        isOpen={showModal}
-        onClose={() => {
-          setShowModal(false);
-          setEditingSeatClass(null);
-        }}
-        title={`${editingSeatClass ? 'Edit' : 'Add'} Seat Class`}
-        size="lg"
-      >
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div className="grid grid-cols-1 gap-4">
-            <div>
-              <label className="label">Class Name *</label>
-              <input
-                type="text"
-                name="name"
-                className="input"
-                defaultValue={editingSeatClass?.name}
-                required
-                placeholder="e.g., Economy Regular"
-              />
-            </div>
-            <div>
-              <label className="label">Description</label>
-              <textarea
-                name="description"
-                className="input"
-                rows={3}
-                defaultValue={editingSeatClass?.description}
-                placeholder="Describe the seat class..."
-              />
-            </div>
-            <div>
-              <label className="label">Base Price (ETB) *</label>
-              <input
-                type="number"
-                name="basePrice"
-                className="input"
-                defaultValue={editingSeatClass?.basePrice ? (editingSeatClass.basePrice / 100).toFixed(2) : ''}
-                required
-                min="0"
-                step="0.01"
-                placeholder="e.g., 450.00"
-              />
-              <p className="text-xs text-gray-500 mt-1">Enter amount in ETB (e.g., 450.00)</p>
-            </div>
-            <div>
-              <label className="label">Status</label>
-              <select
-                name="isActive"
-                className="input"
-                defaultValue={editingSeatClass?.isActive?.toString() || 'true'}
-              >
-                <option value="true">Active</option>
-                <option value="false">Inactive</option>
-              </select>
-            </div>
-          </div>
-          
-          <div className="flex justify-end gap-2 pt-4">
-            <ActionButton
-              type="button"
-              variant="secondary"
-              onClick={() => {
-                setShowModal(false);
-                setEditingSeatClass(null);
-              }}
-            >
-              Cancel
-            </ActionButton>
-            <ActionButton
-              type="submit"
-              loading={createMutation.isPending || updateMutation.isPending}
-            >
-              {editingSeatClass ? 'Update' : 'Create'} Seat Class
-            </ActionButton>
-          </div>
-        </form>
-      </Modal>
-    </div>
-  );
-}

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

@@ -4,14 +4,14 @@ import { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { seatsApi, schedulesApi } from '@/lib/api';
 import Modal from '@/components/ui/Modal';
-import ActionButton from '@/components/ui/ActionButton';
+import ActionButton from '@/components/ui/ActionButton'
 import Badge from '@/components/ui/Badge';
-import { Search, Armchair, Lock, Unlock, ChevronRight } from 'lucide-react';
+import { Armchair, Lock, Unlock, Bed, X, RotateCcw } from 'lucide-react';
 
 export default function SeatsPage() {
-  const [search, setSearch] = useState('');
   const [selectedSchedule, setSelectedSchedule] = useState('');
   const [showBlockModal, setShowBlockModal] = useState(false);
+  const [showRemoveModal, setShowRemoveModal] = useState(false);
   const [selectedSeat, setSelectedSeat] = useState<any>(null);
   const [blockReason, setBlockReason] = useState('');
   const queryClient = useQueryClient();
@@ -44,6 +44,22 @@ export default function SeatsPage() {
     },
   });
 
+  const removeSeatMutation = useMutation({
+    mutationFn: (seatId: string) => seatsApi.removeSeat(seatId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['seatmap'] });
+      setShowRemoveModal(false);
+      setSelectedSeat(null);
+    },
+  });
+
+  const undoRemoveMutation = useMutation({
+    mutationFn: (seatId: string) => seatsApi.undoRemove(seatId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['seatmap'] });
+    },
+  });
+
   const schedules = schedulesData?.items || schedulesData?.data || [];
   const coaches = seatMapData?.coaches || [];
 
@@ -58,6 +74,17 @@ export default function SeatsPage() {
     }
   };
 
+  const handleRemoveSeat = (seat: any) => {
+    setSelectedSeat(seat);
+    setShowRemoveModal(true);
+  };
+
+  const handleUndoRemove = async (seat: any) => {
+    if (confirm('Restore this removed seat?')) {
+      await undoRemoveMutation.mutateAsync(seat.id);
+    }
+  };
+
   const submitBlock = async () => {
     if (!blockReason.trim()) {
       alert('Please provide a reason for blocking');
@@ -66,6 +93,10 @@ export default function SeatsPage() {
     await blockMutation.mutateAsync({ seatId: selectedSeat.id, reason: blockReason });
   };
 
+  const submitRemoveSeat = async () => {
+    await removeSeatMutation.mutateAsync(selectedSeat.id);
+  };
+
   const getSeatStatus = (seat: any) => {
     if (seat.status === 'BLOCKED' || seat.isBlocked) return 'BLOCKED';
     if (seat.status === 'BOOKED' || seat.isBooked) return 'BOOKED';
@@ -83,9 +114,221 @@ export default function SeatsPage() {
     }
   };
 
-  const filteredCoaches = coaches.filter((coach: any) =>
-    search ? coach.coachNumber?.toLowerCase().includes(search.toLowerCase()) : true
-  );
+  const parseSeatArrangement = (arrangement: string | null): number[] => {
+    if (!arrangement) return [2, 2];
+    const parts = arrangement.split('+').map(p => parseInt(p.trim()));
+    return parts.length === 2 ? parts : [2, 2];
+  };
+
+  const getBedLabel = (bedPosition: string | null): string => {
+    if (bedPosition === 'upper') return 'U';
+    if (bedPosition === 'middle') return 'M';
+    if (bedPosition === 'lower') return 'L';
+    return '';
+  };
+
+  const renderCoachSeats = (coach: any, isBedCoach: boolean) => {
+    const allSeats = coach.seats || [];
+    const validSeats = allSeats.filter((s: any) => s.seatNumber && !s.seatNumber.startsWith('-'));
+    const removedSeats = allSeats.filter((s: any) => s.seatNumber && s.seatNumber.startsWith('-'));
+
+    if (validSeats.length === 0 && removedSeats.length === 0) {
+      return <div className="text-xs text-muted-foreground">No seats</div>;
+    }
+
+    const hasBedPositionData = validSeats.some((s: any) => s.bedPosition);
+
+    if (isBedCoach && hasBedPositionData) {
+      // Render bed coach with flipping effect and bed position labels
+      const arrangement = parseSeatArrangement(coach.seatArrangement);
+      const seatsPerRow = arrangement[0] + (arrangement[1] || 0);
+      const allSeatsForLayout = [...validSeats, ...removedSeats];
+      const rows = [];
+      
+      for (let i = 0; i < allSeatsForLayout.length; i += seatsPerRow) {
+        rows.push(allSeatsForLayout.slice(i, i + seatsPerRow));
+      }
+
+      return (
+        <div className="space-y-0">
+          {rows.map((rowSeats: any[], idx: number) => {
+            const rowNumber = rowSeats[0]?.row || (idx + 1);
+            const shouldFlipIcon = rowNumber % 2 === 0;
+            const showSpacing = idx % 2 === 1;
+            
+            return (
+              <div key={`bed-row-${idx}`}>
+                {shouldFlipIcon && (
+                  <div className="flex gap-0.5 justify-start text-xs text-muted-foreground mb-1">
+                    {rowSeats.map((seat: any) => (
+                      <div key={`num-before-${seat.id}`} className="w-12 h-4 flex items-center justify-center">
+                        {seat.seatNumber && !seat.seatNumber.startsWith('-') ? `${seat.seatNumber}${getBedLabel(seat.bedPosition)}` : ''}
+                      </div>
+                    ))}
+                  </div>
+                )}
+                <div className="flex gap-0.5 justify-start">
+                  {rowSeats.map((seat: any) => (
+                    <SeatIcon
+                      key={seat.id}
+                      seat={seat}
+                      coach={coach}
+                      isBedCoach={true}
+                      shouldFlipIcon={shouldFlipIcon}
+                      getSeatStatus={getSeatStatus}
+                      getSeatColor={getSeatColor}
+                      handleBlock={handleBlock}
+                      handleRemoveSeat={handleRemoveSeat}
+                      handleUnblock={handleUnblock}
+                      handleUndoRemove={handleUndoRemove}
+                      hideNumber={true}
+                    />
+                  ))}
+                </div>
+                {!shouldFlipIcon && (
+                  <div className="flex gap-0.5 justify-start text-xs text-muted-foreground mb-1">
+                    {rowSeats.map((seat: any) => (
+                      <div key={`num-after-${seat.id}`} className="w-12 h-4 flex items-center justify-center">
+                        {seat.seatNumber && !seat.seatNumber.startsWith('-') ? `${seat.seatNumber}${getBedLabel(seat.bedPosition)}` : ''}
+                      </div>
+                    ))}
+                  </div>
+                )}
+                {showSpacing && <div className="h-2" />}
+              </div>
+            );
+          })}
+        </div>
+      );
+    }
+
+    // Regular armchair layout
+    const arrangement = parseSeatArrangement(coach.seatArrangement);
+    const leftCount = arrangement[0];
+    const rightCount = arrangement[1] || 0;
+
+    const rows = [];
+    const processedRows = new Set();
+    const allSeatsForLayout = [...validSeats, ...removedSeats];
+    for (const seat of allSeatsForLayout) {
+      if (!processedRows.has(seat.row)) {
+        rows.push(allSeatsForLayout.filter((s: any) => s.row === seat.row).sort((a: any, b: any) => {
+          const colA = a.col.charCodeAt(0);
+          const colB = b.col.charCodeAt(0);
+          return colA - colB;
+        }));
+        processedRows.add(seat.row);
+      }
+    }
+
+    return (
+      <div className="space-y-0">
+        {rows.map((rowSeats: any[], rowIdx: number) => {
+          const leftSeats = rowSeats.slice(0, leftCount);
+          const rightSeats = rowSeats.slice(leftCount);
+          const rowNumber = rowSeats[0]?.row || 1;
+          const shouldFlipArmchair = rowNumber % 2 === 0;
+          const showSpacing = rowIdx % 2 === 1;
+
+          return (
+            <div key={`row-${rowSeats[0]?.id}`}>
+              {shouldFlipArmchair && (
+                <div className="flex gap-0.5 justify-start text-xs text-muted-foreground mb-1">
+                  <div className="flex gap-0.5">
+                    {leftSeats.map((seat: any) => (
+                      <div key={`num-before-left-${seat.id}`} className="w-11 h-4 flex items-center justify-center">
+                        {seat.seatNumber && !seat.seatNumber.startsWith('-') ? seat.seatNumber : ''}
+                      </div>
+                    ))}
+                  </div>
+                  {rightSeats.length > 0 && <div className="w-3" />}
+                  {rightSeats.length > 0 && (
+                    <div className="flex gap-0.5">
+                      {rightSeats.map((seat: any) => (
+                        <div key={`num-before-right-${seat.id}`} className="w-11 h-4 flex items-center justify-center">
+                          {seat.seatNumber && !seat.seatNumber.startsWith('-') ? seat.seatNumber : ''}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              )}
+              <div className="flex gap-0.5 justify-start">
+                <div className="flex gap-0.5">
+                  {leftSeats.map((seat: any) => (
+                    <SeatIcon
+                      key={seat.id}
+                      seat={seat}
+                      coach={coach}
+                      isBedCoach={false}
+                      shouldFlipIcon={shouldFlipArmchair}
+                      getSeatStatus={getSeatStatus}
+                      getSeatColor={getSeatColor}
+                      handleBlock={handleBlock}
+                      handleRemoveSeat={handleRemoveSeat}
+                      handleUnblock={handleUnblock}
+                      handleUndoRemove={handleUndoRemove}
+                      hideNumber={true}
+                    />
+                  ))}
+                </div>
+                {rightSeats.length > 0 && <div className="w-3" />}
+                {rightSeats.length > 0 && (
+                  <div className="flex gap-0.5">
+                    {rightSeats.map((seat: any) => (
+                      <SeatIcon
+                        key={seat.id}
+                        seat={seat}
+                        coach={coach}
+                        isBedCoach={false}
+                        shouldFlipIcon={shouldFlipArmchair}
+                        getSeatStatus={getSeatStatus}
+                        getSeatColor={getSeatColor}
+                        handleBlock={handleBlock}
+                        handleRemoveSeat={handleRemoveSeat}
+                        handleUnblock={handleUnblock}
+                        handleUndoRemove={handleUndoRemove}
+                        hideNumber={true}
+                      />
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              {!shouldFlipArmchair && (
+                <div className="flex gap-0.5 justify-start text-xs text-muted-foreground mb-1">
+                  <div className="flex gap-0.5">
+                    {leftSeats.map((seat: any) => (
+                      <div key={`num-left-${seat.id}`} className="w-11 h-4 flex items-center justify-center">
+                        {seat.seatNumber && !seat.seatNumber.startsWith('-') ? seat.seatNumber : ''}
+                      </div>
+                    ))}
+                  </div>
+                  {rightSeats.length > 0 && <div className="w-3" />}
+                  {rightSeats.length > 0 && (
+                    <div className="flex gap-0.5">
+                      {rightSeats.map((seat: any) => (
+                        <div key={`num-right-${seat.id}`} className="w-11 h-4 flex items-center justify-center">
+                          {seat.seatNumber && !seat.seatNumber.startsWith('-') ? seat.seatNumber : ''}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {showSpacing && <div className="h-2" />}
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  const coachesWithSeats = coaches.filter((coach: any) => {
+    const seats = (coach.seats || []).filter((s: any) => s.seatNumber);
+    return seats.length > 0;
+  });
 
   return (
     <div className="space-y-6">
@@ -97,40 +340,25 @@ export default function SeatsPage() {
       </div>
 
       <div className="card">
-        <div className="flex items-center gap-4 mb-6">
-          <div className="flex-1">
-            <label className="label">Select Schedule</label>
-            <select
-              value={selectedSchedule}
-              onChange={(e) => setSelectedSchedule(e.target.value)}
-              className="input"
-            >
-              <option value="">Select a schedule...</option>
-              {schedules.map((schedule: any) => {
-                const trainNumber = schedule.train?.trainNumber || schedule.train?.name || 'N/A';
-                const routeName = schedule.route?.name || 'N/A';
-                const date = schedule.departureAt ? new Date(schedule.departureAt).toLocaleDateString() : 'N/A';
-                return (
-                  <option key={schedule.id} value={schedule.id}>
-                    {trainNumber} - {routeName} - {date}
-                  </option>
-                );
-              })}
-            </select>
-          </div>
-          <div className="relative flex-1">
-            <label className="label">Search Coaches</label>
-            <div className="relative">
-              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-              <input
-                type="text"
-                placeholder="Search by coach number..."
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-                className="input pl-10"
-              />
-            </div>
-          </div>
+        <div className="mb-6">
+          <label className="label">Select Schedule</label>
+          <select
+            value={selectedSchedule}
+            onChange={(e) => setSelectedSchedule(e.target.value)}
+            className="input"
+          >
+            <option value="">Select a schedule...</option>
+            {schedules.map((schedule: any) => {
+              const trainNumber = schedule.train?.trainNumber || schedule.train?.name || 'N/A';
+              const routeName = schedule.route?.name || 'N/A';
+              const date = schedule.departureAt ? new Date(schedule.departureAt).toLocaleDateString() : 'N/A';
+              return (
+                <option key={schedule.id} value={schedule.id}>
+                  {trainNumber} - {routeName} - {date}
+                </option>
+              );
+            })}
+          </select>
         </div>
 
         {!selectedSchedule ? (
@@ -143,13 +371,12 @@ export default function SeatsPage() {
             <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
             <p className="text-muted-foreground mt-3">Loading seats...</p>
           </div>
-        ) : filteredCoaches.length === 0 ? (
+        ) : coachesWithSeats.length === 0 ? (
           <div className="text-center py-12 text-muted-foreground">
-            <p>No coaches found for this schedule</p>
+            <p>No coaches with seats found for this schedule</p>
           </div>
         ) : (
           <div className="space-y-6">
-            {/* Legend */}
             <div className="flex items-center gap-6 p-4 bg-muted/50 rounded-lg">
               <div className="flex items-center gap-2">
                 <div className="w-4 h-4 rounded bg-green-500"></div>
@@ -167,86 +394,35 @@ export default function SeatsPage() {
                 <div className="w-4 h-4 rounded bg-gray-500"></div>
                 <span className="text-sm">Blocked</span>
               </div>
+              <div className="flex items-center gap-2">
+                <div className="w-4 h-4 rounded border-2 border-dashed border-gray-400"></div>
+                <span className="text-sm">Removed</span>
+              </div>
             </div>
 
-            {/* Coaches */}
-            {filteredCoaches.map((coach: any) => {
-              const seats = coach.seats || [];
-              const seatClass = coach.seatClass?.name || 'N/A';
-              const availableCount = seats.filter((s: any) => getSeatStatus(s) === 'AVAILABLE').length;
-              const bookedCount = seats.filter((s: any) => getSeatStatus(s) === 'BOOKED').length;
-              const blockedCount = seats.filter((s: any) => getSeatStatus(s) === 'BLOCKED').length;
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+              {coachesWithSeats.map((coach: any) => {
+                const isBedCoach = (coach.seatClass && coach.seatClass.toLowerCase().includes('bed')) || 
+                                   (coach.mode && coach.mode.toLowerCase().includes('bed'));
+                const seats = (coach.seats || []).filter((s: any) => s.seatNumber);
 
-              return (
-                <div key={coach.id} className="border rounded-lg p-4">
-                  <div className="flex items-center justify-between mb-4">
-                    <div>
-                      <h3 className="text-lg font-semibold">
-                        Coach {coach.coachNumber} - {coach.label}
-                      </h3>
-                      <p className="text-sm text-muted-foreground">
-                        {seatClass} • {seats.length} seats
-                      </p>
+                return (
+                  <div key={coach.id} className="border rounded-lg p-3 bg-white dark:bg-card">
+                    <div className="mb-3">
+                      <h3 className="font-semibold text-sm">Coach {coach.coachNumber}</h3>
                     </div>
-                    <div className="flex gap-3 text-sm">
-                      <span className="text-green-600">Available: {availableCount}</span>
-                      <span className="text-red-600">Booked: {bookedCount}</span>
-                      <span className="text-gray-600">Blocked: {blockedCount}</span>
+
+                    <div className="bg-gray-50 dark:bg-gray-900/30 py-2 rounded-lg">
+                      {renderCoachSeats(coach, isBedCoach)}
                     </div>
                   </div>
-
-                  <div className="grid grid-cols-8 gap-2">
-                    {seats.map((seat: any) => {
-                      const status = getSeatStatus(seat);
-                      const color = getSeatColor(status);
-                      const canBlock = status === 'AVAILABLE';
-                      const canUnblock = status === 'BLOCKED';
-
-                      return (
-                        <div
-                          key={seat.id}
-                          className="relative group"
-                        >
-                          <div
-                            className={`${color} text-white rounded-lg p-2 text-center text-sm font-medium cursor-pointer hover:opacity-80 transition-opacity`}
-                            title={`${seat.seatNumber} - ${status}`}
-                          >
-                            {seat.seatNumber}
-                          </div>
-                          {(canBlock || canUnblock) && (
-                            <div className="absolute inset-0 bg-black/60 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-1">
-                              {canBlock && (
-                                <button
-                                  onClick={() => handleBlock(seat)}
-                                  className="p-1 bg-white rounded hover:bg-gray-100"
-                                  title="Block seat"
-                                >
-                                  <Lock className="h-3 w-3 text-gray-700" />
-                                </button>
-                              )}
-                              {canUnblock && (
-                                <button
-                                  onClick={() => handleUnblock(seat)}
-                                  className="p-1 bg-white rounded hover:bg-gray-100"
-                                  title="Unblock seat"
-                                >
-                                  <Unlock className="h-3 w-3 text-gray-700" />
-                                </button>
-                              )}
-                            </div>
-                          )}
-                        </div>
-                      );
-                    })}
-                  </div>
-                </div>
-              );
-            })}
+                );
+              })}
+            </div>
           </div>
         )}
       </div>
 
-      {/* Block Modal */}
       <Modal
         isOpen={showBlockModal}
         onClose={() => {
@@ -293,6 +469,162 @@ export default function SeatsPage() {
           </div>
         </div>
       </Modal>
+
+      <Modal
+        isOpen={showRemoveModal}
+        onClose={() => {
+          setShowRemoveModal(false);
+          setSelectedSeat(null);
+        }}
+        title="Remove Seat"
+        size="md"
+      >
+        <div className="space-y-4">
+          <p className="text-sm text-muted-foreground">
+            Remove seat <strong>{selectedSeat?.seatNumber}</strong> from Coach{' '}
+            <strong>{selectedSeat?.coach?.coachNumber}</strong>
+          </p>
+          <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
+            <p className="text-sm text-yellow-800">
+              This will mark the seat as removed. The seat will show as an empty space on the seat map.
+              You can undo this action anytime by clicking the undo button on the removed seat.
+            </p>
+          </div>
+          <div className="flex justify-end gap-2">
+            <ActionButton
+              variant="secondary"
+              onClick={() => {
+                setShowRemoveModal(false);
+                setSelectedSeat(null);
+              }}
+            >
+              Cancel
+            </ActionButton>
+            <ActionButton
+              variant="danger"
+              onClick={submitRemoveSeat}
+              loading={removeSeatMutation.isPending}
+            >
+              Remove Seat
+            </ActionButton>
+          </div>
+        </div>
+      </Modal>
+    </div>
+  );
+}
+
+interface SeatIconProps {
+  seat: any;
+  coach: any;
+  isBedCoach: boolean;
+  shouldFlipIcon?: boolean;
+  hideNumber?: boolean;
+  getSeatStatus: (seat: any) => string;
+  getSeatColor: (status: string) => string;
+  handleBlock: (seat: any) => void;
+  handleRemoveSeat: (seat: any) => void;
+  handleUnblock: (seat: any) => void;
+  handleUndoRemove: (seat: any) => void;
+}
+
+function SeatIcon({
+  seat,
+  coach,
+  isBedCoach,
+  shouldFlipIcon = false,
+  hideNumber = false,
+  getSeatStatus,
+  getSeatColor,
+  handleBlock,
+  handleRemoveSeat,
+  handleUnblock,
+  handleUndoRemove,
+}: SeatIconProps) {
+  const isRemoved = seat.seatNumber && seat.seatNumber.startsWith('-');
+  
+  if (!seat.seatNumber) {
+    return <div className="w-7 h-7" />;
+  }
+
+  if (isRemoved) {
+    return (
+      <div className="relative group flex flex-col items-center">
+        <div className="w-11 h-11 rounded border-2 border-dashed border-gray-400 flex items-center justify-center hover:opacity-80 transition-opacity" title="Removed seat">
+        </div>
+        <div className="absolute top-full mt-1 bg-black/80 rounded shadow-lg flex items-center gap-1 p-1 z-20 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none group-hover:pointer-events-auto">
+          <button
+            onClick={() => handleUndoRemove(seat)}
+            className="p-1 bg-white rounded hover:bg-gray-100 pointer-events-auto"
+            title="Undo remove"
+          >
+            <RotateCcw className="h-3 w-3 text-gray-700" />
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  const status = getSeatStatus(seat);
+  const color = getSeatColor(status);
+  const canBlock = status === 'AVAILABLE';
+  const canUnblock = status === 'BLOCKED';
+
+  return (
+    <div className="relative group flex flex-col items-center">
+      {!hideNumber && (
+        <span className="text-xs font-bold mb-0.5 h-3 leading-3 text-foreground">
+          {seat.seatNumber}
+        </span>
+      )}
+
+      {isBedCoach ? (
+        <div
+          className={`w-11 h-11 rounded flex items-center justify-center cursor-pointer hover:opacity-80 transition-opacity ${color}`}
+          title={`${seat.seatNumber} - ${seat.bedPosition} - ${status}`}
+        >
+          <Bed className="w-7 h-7 text-white" style={shouldFlipIcon ? { transform: 'scaleY(-1)' } : undefined} />
+        </div>
+      ) : (
+        <div
+          className={`w-11 h-11 rounded flex items-center justify-center cursor-pointer hover:opacity-80 transition-opacity ${color}`}
+          title={`${seat.seatNumber} - ${status}`}
+        >
+          <Armchair className="w-7 h-7 text-white" style={shouldFlipIcon ? { transform: 'scaleY(-1)' } : undefined} />
+        </div>
+      )}
+
+      {(canBlock || canUnblock) && (
+        <div className="absolute top-full mt-1 bg-black/80 rounded shadow-lg flex items-center gap-1 p-1 z-20 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none group-hover:pointer-events-auto">
+          {canBlock && (
+            <>
+              <button
+                onClick={() => handleBlock(seat)}
+                className="p-1 bg-white rounded hover:bg-gray-100 pointer-events-auto"
+                title="Block seat"
+              >
+                <Lock className="h-3 w-3 text-gray-700" />
+              </button>
+              <button
+                onClick={() => handleRemoveSeat(seat)}
+                className="p-1 bg-white rounded hover:bg-gray-100 pointer-events-auto"
+                title="Remove seat"
+              >
+                <X className="h-3 w-3 text-gray-700" />
+              </button>
+            </>
+          )}
+          {canUnblock && (
+            <button
+              onClick={() => handleUnblock(seat)}
+              className="p-1 bg-white rounded hover:bg-gray-100 pointer-events-auto"
+              title="Unblock seat"
+            >
+              <Unlock className="h-3 w-3 text-gray-700" />
+            </button>
+          )}
+        </div>
+      )}
     </div>
   );
 }

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

@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { Plus, Edit, Trash2, Train } from 'lucide-react';
+import { Plus, Edit, Trash2, Train, Search } from 'lucide-react';
 import DataTable from '@/components/ui/DataTable';
 import ActionButton from '@/components/ui/ActionButton';
 import Modal from '@/components/ui/Modal';
@@ -15,6 +15,7 @@ import { formatDate } from '@/lib/utils';
 export default function TrainsPage() {
   const [showModal, setShowModal] = useState(false);
   const [editingTrain, setEditingTrain] = useState<TrainType | null>(null);
+  const [search, setSearch] = useState('');
   const [deleteConfirm, setDeleteConfirm] = useState<{ isOpen: boolean; train: TrainType | null }>({ isOpen: false, train: null });
   
   const queryClient = useQueryClient();
@@ -86,6 +87,19 @@ export default function TrainsPage() {
     }
   };
 
+  const trains = trainsData?.items || [];
+  
+  const filteredTrains = trains.filter((train: any) => {
+    if (!search) return true;
+    const searchLower = search.toLowerCase();
+    return (
+      train.number.toLowerCase().includes(searchLower) ||
+      train.name.toLowerCase().includes(searchLower) ||
+      train.operatorName?.toLowerCase().includes(searchLower) ||
+      train.description?.toLowerCase().includes(searchLower)
+    );
+  });
+
   const trainColumns = [
     {
       key: 'number',
@@ -168,13 +182,27 @@ export default function TrainsPage() {
         </ActionButton>
       </div>
 
+  {/* Search Filter */}
+      <div className="mb-6">
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <input
+            type="text"
+            placeholder="Search by number, name, or operator..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="input pl-10 w-full"
+          />
+        </div>
+      </div>
+
       {/* Trains Table */}
       <DataTable
-        data={trainsData?.items || []}
+        data={filteredTrains}
         columns={trainColumns}
         actions={actions}
         loading={trainsLoading}
-        emptyMessage="No trains found"
+        emptyMessage={search ? "No trains match your search" : "No trains found"}
       />
 
       {/* Delete Confirmation */}

apps/edr-passenger-web/backoffice/src/components/layout/Sidebar.tsx

@@ -57,12 +57,12 @@ const navigationSections = [
     title: 'Master Data',
     items: [
       { name: 'Stations', href: '/stations', icon: MapPin },
-      { name: 'Routes', href: '/routes', icon: Route },
       { name: 'Trains', href: '/trains', icon: Train },
       { name: 'Coaches', href: '/coaches', icon: Grid3x3 },
       { name: 'Seats', href: '/seats', icon: Armchair },
+      { name: 'Classes', href: '/classes', icon: Settings },
+      { name: 'Routes', href: '/routes', icon: Route },
       { name: 'Schedules', href: '/schedules', icon: Calendar },
-      { name: 'Classes', href: '/seat-classes', icon: Settings },
     ]
   },
   {

apps/edr-passenger-web/backoffice/src/components/ui/Pagination.tsx

@@ -7,8 +7,12 @@ interface PaginationProps {
 }
 
 export default function Pagination({ currentPage, totalPages, onPageChange }: PaginationProps) {
+  if (totalPages <= 1) {
+    return null;
+  }
+
   return (
-    <div className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6">
+    <div className="flex items-center justify-between border-t border-border bg-card px-4 py-3 sm:px-6">
       <div className="flex flex-1 justify-between sm:hidden">
         <button
           onClick={() => onPageChange(currentPage - 1)}
@@ -27,7 +31,7 @@ export default function Pagination({ currentPage, totalPages, onPageChange }: Pa
       </div>
       <div className="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
         <div>
-          <p className="text-sm text-gray-700">
+          <p className="text-sm text-foreground">
             Page <span className="font-medium">{currentPage}</span> of{' '}
             <span className="font-medium">{totalPages}</span>
           </p>
@@ -51,4 +55,4 @@ export default function Pagination({ currentPage, totalPages, onPageChange }: Pa
       </div>
     </div>
   );
-}
+}

apps/edr-passenger-web/backoffice/src/components/ui/Tabs.tsx

@@ -0,0 +1,43 @@
+import React, { ReactNode } from 'react';
+
+interface TabItem {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+  content: ReactNode;
+}
+
+interface TabsProps {
+  tabs: TabItem[];
+  defaultTab?: string;
+}
+
+export default function Tabs({ tabs, defaultTab }: TabsProps) {
+  const [activeTab, setActiveTab] = React.useState(defaultTab || tabs[0]?.id);
+
+  return (
+    <div>
+      <div className="border-b border-gray-200">
+        <div className="flex gap-1 -mb-px">
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`px-4 py-2 font-medium text-sm border-b-2 transition-colors ${
+                activeTab === tab.id
+                  ? 'border-blue-600 text-blue-600'
+                  : 'border-transparent text-gray-600 hover:text-gray-900 hover:border-gray-300'
+              } flex items-center gap-2`}
+            >
+              {tab.icon}
+              {tab.label}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className="mt-6">
+        {tabs.find((tab) => tab.id === activeTab)?.content}
+      </div>
+    </div>
+  );
+}

apps/edr-passenger-web/backoffice/src/lib/api/index.ts

@@ -147,6 +147,8 @@ export const seatsApi = {
   release: (holdId: string) => apiClient.delete(`/seats/hold/${holdId}`),
   block: (seatId: string, data: any) => apiClient.post<any>(`/seats/${seatId}/block`, data),
   unblock: (seatId: string) => apiClient.delete(`/seats/${seatId}/block`),
+  removeSeat: (seatId: string) => apiClient.patch<any>(`/seats/${seatId}/remove`, {}),
+  undoRemove: (seatId: string) => apiClient.patch<any>(`/seats/${seatId}/undo-remove`, {}),
 };
 
 // Payments API
@@ -332,13 +334,13 @@ export const liveApi = {
   getCrowdSignals: () => apiClient.get<any[]>('/live/crowd-signals'),
 };
 
-// Seat Classes API
+// Classes API (formerly Seat Classes)
 export const seatClassesApi = {
-  getAll: () => apiClient.get<any[]>('/seat-classes'),
-  getById: (id: string) => apiClient.get<any>(`/seat-classes/${id}`),
-  create: (data: any) => apiClient.post<any>('/seat-classes', data),
-  update: (id: string, data: any) => apiClient.patch<any>(`/seat-classes/${id}`, data),
-  delete: (id: string) => apiClient.delete(`/seat-classes/${id}`),
+  getAll: () => apiClient.get<any[]>('/fleet/classes'),
+  getById: (id: string) => apiClient.get<any>(`/fleet/classes/${id}`),
+  create: (data: any) => apiClient.post<any>('/fleet/classes', data),
+  update: (id: string, data: any) => apiClient.patch<any>(`/fleet/classes/${id}`, data),
+  delete: (id: string) => apiClient.delete(`/fleet/classes/${id}`),
 };
 
 // Food & Dining API

apps/edr-passenger-web/backoffice/src/lib/api/passengers.ts

@@ -7,6 +7,7 @@ export const passengersApi = {
     const params = new URLSearchParams();
     if (filters?.search) params.append('search', filters.search);
     if (filters?.verified !== undefined) params.append('verified', filters.verified.toString());
+    if (filters?.role) params.append('role', filters.role);
     if (filters?.page) params.append('page', filters.page.toString());
     if (filters?.pageSize) params.append('pageSize', filters.pageSize.toString());
     

apps/edr-passenger-web/backoffice/src/types/index.ts

@@ -56,6 +56,7 @@ export interface BookingFilters {
 export interface PassengerFilters {
   search?: string;
   verified?: boolean;
+  role?: string;
   page?: number;
   pageSize?: number;
 }

apps/edr-passenger-web/portal/src/app/booking/results/page.tsx

@@ -280,7 +280,7 @@ export default function ResultsPage() {
 
                   {isExpanded && (
                     <div className="mt-6 pt-6 border-t dark:border-gray-700">
-                      <h4 className="font-semibold text-gray-900 dark:text-gray-100 mb-3">Select Seat Class</h4>
+                      <h4 className="font-semibold text-gray-900 dark:text-gray-100 mb-3">Select Class</h4>
                       <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                         {schedule.faresByClass && Array.isArray(schedule.faresByClass) && schedule.faresByClass.length > 0 ? (
                           schedule.faresByClass.map((fareClass: any) => {

apps/edr-passenger-web/portal/src/app/booking/search/page.tsx

@@ -276,7 +276,7 @@ export default function SearchPage() {
                         <div className="border-t border-gray-200 dark:border-gray-700 pt-4">
                           <div className="flex items-center justify-between">
                             <div>
-                              <div className="text-sm font-medium text-gray-900 dark:text-gray-100">Children</div>
+                              <div className="text-sm font-medium text-gray-900 dark:text-gray-100 text-left">Children</div>
                               <div className="text-xs text-gray-500 dark:text-gray-400">&lt;5 years • First free</div>
                             </div>
                             <div className="flex items-center gap-2">

apps/edr-passenger-web/portal/src/app/booking/seats/page.tsx

@@ -7,30 +7,39 @@ import { useBookingStore } from '@/lib/booking-store';
 import { useQuery, useMutation } from '@tanstack/react-query';
 import { apiClient } from '@/lib/api-client';
 import { useState, useEffect, useCallback, useMemo, memo } from 'react';
+import { Armchair, Bed, ChevronLeft } from 'lucide-react';
 
 import CustomModal from '@/components/CustomModal';
 
-// Separate component for seat button to prevent re-render issues
-const SeatButton = memo(({ seat, isSelected, onToggle }: any) => {
+const SeatButton = memo(({ seat, isSelected, onToggle, isBedCoach, bedLabel }: any) => {
   const seatLabel = seat.number || seat.label || seat.seatNumber || '?';
   
   return (
-    <button
-      onClick={() => onToggle(seat.id)}
-      disabled={seat.status !== 'AVAILABLE'}
-      className={`w-12 h-12 rounded flex items-center justify-center text-xs font-semibold transition-all ${
-        isSelected
-          ? 'bg-primary text-white shadow-md scale-105'
-          : seat.status === 'AVAILABLE'
-          ? 'bg-green-100 dark:bg-green-900/40 hover:bg-green-200 dark:hover:bg-green-800/50 text-green-800 dark:text-green-200 hover:shadow-md cursor-pointer'
-          : seat.status === 'HELD'
-          ? 'bg-yellow-100 dark:bg-yellow-900/40 text-yellow-700 dark:text-yellow-200 cursor-not-allowed opacity-75'
-          : 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed opacity-60'
-      }`}
-      title={`Seat ${seatLabel} - ${seat.status}`}
-    >
-      {seatLabel}
-    </button>
+    <div className="flex flex-col items-center">
+      <span className="text-xs font-bold mb-0.5 text-gray-900 dark:text-gray-100">
+        {seatLabel}{bedLabel}
+      </span>
+      <button
+        onClick={() => onToggle(seat.id)}
+        disabled={seat.status !== 'AVAILABLE'}
+        className={`w-11 h-11 rounded flex items-center justify-center transition-all ${
+          isSelected
+            ? 'bg-[rgb(20_113_76)] text-white shadow-md scale-105'
+            : seat.status === 'AVAILABLE'
+            ? 'bg-green-500 hover:bg-green-600 text-white cursor-pointer hover:shadow-md'
+            : seat.status === 'HELD'
+            ? 'bg-yellow-500 text-white cursor-not-allowed opacity-75'
+            : 'bg-gray-500 text-white cursor-not-allowed opacity-60'
+        }`}
+        title={`Seat ${seatLabel}${bedLabel} - ${seat.status}`}
+      >
+        {isBedCoach ? (
+          <Bed className="w-7 h-7" style={seat.bedFlip ? { transform: 'scaleY(-1)' } : undefined} />
+        ) : (
+          <Armchair className="w-7 h-7" style={seat.armchairFlip ? { transform: 'scaleY(-1)' } : undefined} />
+        )}
+      </button>
+    </div>
   );
 });
 
@@ -38,10 +47,9 @@ SeatButton.displayName = 'SeatButton';
 
 export default function SeatsPage() {
   const router = useRouter();
-  const { selectedSchedule, passengers, setSeatHold, setPassengers, searchCriteria } = useBookingStore();
+  const { selectedSchedule, passengers, setSeatHold, setPassengers, searchCriteria, bookingId } = useBookingStore();
   const [selectedSeats, setSelectedSeats] = useState<string[]>([]);
   const [selectedCoach, setSelectedCoach] = useState<string | null>(null);
-  const [_timeLeft, _setTimeLeft] = useState<number | null>(null);
   const [modalState, setModalState] = useState({
     isOpen: false,
     title: '',
@@ -77,10 +85,23 @@ export default function SeatsPage() {
     },
   });
 
+  // Mutation to book seats permanently (called after payment)
+  const bookSeatsMutation = useMutation({
+    mutationFn: async (seatIds: string[]) => {
+      return Promise.all(
+        seatIds.map((seatId) =>
+          apiClient.patch(`/seats/${seatId}`, {
+            status: 'BOOKED',
+          }).catch(() => null) // Ignore errors, seats are already booked via booking system
+        )
+      );
+    },
+  });
+
   const coaches = useMemo(() => (seatMapData as any)?.coaches || [], [seatMapData]);
   
   const filteredCoaches = useMemo(() => {
-    return selectedSchedule?.selectedSeatClass
+    let filtered = selectedSchedule?.selectedSeatClass
       ? coaches.filter((c: any) => {
           const seatClassName = typeof c.seatClass === 'string' ? c.seatClass : (c.seatClass?.name || c.coachClass || '');
           return seatClassName === selectedSchedule.selectedSeatClass || 
@@ -88,10 +109,12 @@ export default function SeatsPage() {
                  seatClassName.toLowerCase() === selectedSchedule.selectedSeatClass?.toLowerCase();
         })
       : coaches;
+    return filtered.filter((c: any) => c.seats && c.seats.length > 0);
   }, [coaches, selectedSchedule?.selectedSeatClass]);
   
   const selectedCoachData = useMemo(() => filteredCoaches.find((c: any) => c.id === selectedCoach), [filteredCoaches, selectedCoach]);
-  const seats = useMemo(() => selectedCoachData?.seats || [], [selectedCoachData]);
+  const allSeats = useMemo(() => selectedCoachData?.seats || [], [selectedCoachData]);
+  const validSeats = useMemo(() => allSeats.filter((s: any) => s.seatNumber && !s.seatNumber.startsWith('-')), [allSeats]);
 
   useEffect(() => {
     if (filteredCoaches && filteredCoaches.length > 0 && !selectedCoach) {
@@ -114,7 +137,7 @@ export default function SeatsPage() {
     if (selectedSeats.length > 0) {
       await holdMutation.mutateAsync(selectedSeats);
       const updatedPassengers = passengers.map((p, i) => {
-        const seatData = seats?.find((s: any) => s.id === selectedSeats[i]);
+        const seatData = validSeats?.find((s: any) => s.id === selectedSeats[i]);
         return {
           ...p,
           seatId: selectedSeats[i],
@@ -127,7 +150,7 @@ export default function SeatsPage() {
   };
 
   const handleAutoAssign = async () => {
-    const availableSeats = seats?.filter((s: any) => s.status === 'AVAILABLE') || [];
+    const availableSeats = validSeats?.filter((s: any) => s.status === 'AVAILABLE') || [];
     if (availableSeats.length < passengers.length) {
       setModalState({
         isOpen: true,
@@ -164,12 +187,155 @@ export default function SeatsPage() {
     }
   };
 
+  const handleBackToPassengers = () => {
+    router.push('/booking/passengers');
+  };
+
   useEffect(() => {
     if (!selectedSchedule || !passengers.length) {
       router.push('/booking/search');
     }
   }, [selectedSchedule, passengers.length, router]);
 
+  // Auto-book seats when booking is confirmed (after payment)
+  useEffect(() => {
+    if (bookingId && selectedSeats.length > 0) {
+      bookSeatsMutation.mutate(selectedSeats);
+    }
+  }, [bookingId]);
+
+  const parseSeatArrangement = (arrangement: string | null): number[] => {
+    if (!arrangement) return [2, 2];
+    const parts = arrangement.split('+').map(p => parseInt(p.trim()));
+    return parts.length === 2 ? parts : [2, 2];
+  };
+
+  const getBedLabel = (bedPosition: string | null): string => {
+    if (bedPosition === 'upper') return 'U';
+    if (bedPosition === 'middle') return 'M';
+    if (bedPosition === 'lower') return 'L';
+    return '';
+  };
+
+  const renderCoachSeats = (coach: any, isBedCoach: boolean) => {
+    const arrangement = parseSeatArrangement(coach.seatArrangement);
+    const leftCount = arrangement[0];
+
+    const rows = [];
+    const processedRows = new Set();
+    for (const seat of allSeats) {
+      if (!processedRows.has(seat.row)) {
+        rows.push(allSeats.filter((s: any) => s.row === seat.row).sort((a: any, b: any) => {
+          const colA = a.col.charCodeAt(0);
+          const colB = b.col.charCodeAt(0);
+          return colA - colB;
+        }));
+        processedRows.add(seat.row);
+      }
+    }
+
+    return (
+      <div className="space-y-0">
+        {rows.map((rowSeats: any[], rowIdx: number) => {
+          const leftSeats = rowSeats.slice(0, leftCount);
+          const rightSeats = rowSeats.slice(leftCount);
+          const rowNumber = rowSeats[0]?.row || 1;
+          const shouldFlipIcon = rowNumber % 2 === 0;
+          const showSpacing = rowIdx % 2 === 1;
+
+          return (
+            <div key={`row-${rowSeats[0]?.id}`}>
+              {shouldFlipIcon && (
+                <div className="flex gap-0.5 justify-center text-xs text-muted-foreground mb-1">
+                  <div className="flex gap-0.5">
+                    {leftSeats.map((seat: any) => (
+                      <div key={`num-before-left-${seat.id}`} className="w-11 h-4 flex items-center justify-center">
+                        {seat.seatNumber && !seat.seatNumber.startsWith('-') ? `${seat.seatNumber}${getBedLabel(seat.bedPosition)}` : ''}
+                      </div>
+                    ))}
+                  </div>
+                  {rightSeats.length > 0 && <div className="w-3" />}
+                  {rightSeats.length > 0 && (
+                    <div className="flex gap-0.5">
+                      {rightSeats.map((seat: any) => (
+                        <div key={`num-before-right-${seat.id}`} className="w-11 h-4 flex items-center justify-center">
+                          {seat.seatNumber && !seat.seatNumber.startsWith('-') ? `${seat.seatNumber}${getBedLabel(seat.bedPosition)}` : ''}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              )}
+              <div className="flex gap-0.5 justify-center">
+                <div className="flex gap-0.5">
+                  {leftSeats.map((seat: any) => (
+                    seat.seatNumber && !seat.seatNumber.startsWith('-') ? (
+                      <SeatButton
+                        key={seat.id}
+                        seat={seat}
+                        isSelected={selectedSeats.includes(seat.id)}
+                        onToggle={toggleSeat}
+                        isBedCoach={isBedCoach}
+                        bedLabel={getBedLabel(seat.bedPosition)}
+                      />
+                    ) : (
+                      <div key={seat.id} className="w-11 h-11" />
+                    )
+                  ))}
+                </div>
+                {rightSeats.length > 0 && <div className="w-3" />}
+                {rightSeats.length > 0 && (
+                  <div className="flex gap-0.5">
+                    {rightSeats.map((seat: any) => (
+                      seat.seatNumber && !seat.seatNumber.startsWith('-') ? (
+                        <SeatButton
+                          key={seat.id}
+                          seat={seat}
+                          isSelected={selectedSeats.includes(seat.id)}
+                          onToggle={toggleSeat}
+                          isBedCoach={isBedCoach}
+                          bedLabel={getBedLabel(seat.bedPosition)}
+                        />
+                      ) : (
+                        <div key={seat.id} className="w-11 h-11" />
+                      )
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              {!shouldFlipIcon && (
+                <div className="flex gap-0.5 justify-center text-xs text-muted-foreground mb-1">
+                  <div className="flex gap-0.5">
+                    {leftSeats.map((seat: any) => (
+                      <div key={`num-left-${seat.id}`} className="w-11 h-4 flex items-center justify-center">
+                        {seat.seatNumber && !seat.seatNumber.startsWith('-') ? `${seat.seatNumber}${getBedLabel(seat.bedPosition)}` : ''}
+                      </div>
+                    ))}
+                  </div>
+                  {rightSeats.length > 0 && <div className="w-3" />}
+                  {rightSeats.length > 0 && (
+                    <div className="flex gap-0.5">
+                      {rightSeats.map((seat: any) => (
+                        <div key={`num-right-${seat.id}`} className="w-11 h-4 flex items-center justify-center">
+                          {seat.seatNumber && !seat.seatNumber.startsWith('-') ? `${seat.seatNumber}${getBedLabel(seat.bedPosition)}` : ''}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {showSpacing && <div className="h-2" />}
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  const isBedCoach = selectedCoachData && (selectedCoachData.seatClass?.toLowerCase().includes('bed') || selectedCoachData.mode?.toLowerCase().includes('bed'));
+
   if (!selectedSchedule || !passengers.length) return null;
 
   return (
@@ -182,143 +348,151 @@ export default function SeatsPage() {
         type={modalState.type}
       />
       <div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-12">
-      <div className="container mx-auto px-4">
-        <div className="max-w-6xl mx-auto">
-          <h1 className="text-3xl font-bold mb-6 text-gray-900 dark:text-gray-100">Select seats</h1>
-
-          <div className="grid lg:grid-cols-3 gap-6">
-            <div className="lg:col-span-2">
-              <div className="card mb-4">
-                <h3 className="font-semibold mb-3 text-gray-900 dark:text-gray-100">Select coach</h3>
-                {selectedSchedule?.selectedSeatClassName && (
-                  <div className="mb-3 text-sm text-gray-600 dark:text-gray-400">
-                    Showing coaches for: <span className="font-semibold text-primary">{selectedSchedule.selectedSeatClassName.replace(/_/g, ' ')}</span>
-                  </div>
-                )}
-                <div className="flex gap-2 overflow-x-auto pb-2">
-                  {filteredCoaches?.map((coach: any) => {
-                    const availableCount = coach.seats?.filter((s: any) => s.status === 'AVAILABLE').length || 0;
-                    const seatClassName = typeof coach.seatClass === 'string' ? coach.seatClass : (coach.seatClass?.name || coach.coachClass || '');
-                    return (
-                      <button
-                        key={coach.id}
-                        onClick={() => setSelectedCoach(coach.id)}
-                        className={`px-4 py-2 rounded whitespace-nowrap ${
-                          selectedCoach === coach.id
-                            ? 'bg-primary text-white'
-                            : 'bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600'
-                        }`}
-                      >
-                        <div>{coach.label || coach.name || coach.coachNumber}</div>
-                        <div className="text-xs opacity-75">{seatClassName}</div>
-                        <div className="text-xs opacity-75">{availableCount} available</div>
-                      </button>
-                    );
-                  })}
-                </div>
-              </div>
-
-              <div className="card">
-                <h3 className="font-semibold mb-4 text-gray-900 dark:text-gray-100">Seat map - {selectedCoachData?.name || selectedCoachData?.label || selectedCoachData?.coachNumber}</h3>
-                {isLoading ? (
-                  <div className="text-center py-8 text-gray-500 dark:text-gray-400">
-                    <p>Loading seats...</p>
-                  </div>
-                ) : error ? (
-                  <div className="text-center py-8 text-red-500 dark:text-red-400">
-                    <p>Error loading seats</p>
-                    <p className="text-sm mt-2">{error?.message || 'Please try again'}</p>
-                  </div>
-                ) : seats.length === 0 ? (
-                  <div className="text-center py-8 text-gray-500 dark:text-gray-400">
-                    <p>No seats available in this coach</p>
-                    <p className="text-sm mt-2\">Please select a different coach</p>
-                  </div>
-                ) : (
-                  <>
-                    {/* Seat Grid */}
-                    <div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg mb-4 overflow-x-auto">
-                      <div className="inline-grid gap-2" style={{ gridTemplateColumns: `repeat(4, minmax(0, 1fr))` }}>
-                        {seats?.map((seat: any) => (
-                          <SeatButton
-                            key={seat.id}
-                            seat={seat}
-                            isSelected={selectedSeats.includes(seat.id)}
-                            onToggle={toggleSeat}
-                          />
-                        ))}
-                      </div>
-                    </div>
-
-                    {/* Legend */}
-                    <div className="flex flex-wrap gap-4 text-sm text-gray-700 dark:text-gray-300">
-                      <div className="flex items-center gap-2">
-                        <div className="w-6 h-6 bg-green-100 dark:bg-green-900/40 rounded"></div>
-                        <span>Available</span>
-                      </div>
-                      <div className="flex items-center gap-2">
-                        <div className="w-6 h-6 bg-primary rounded"></div>
-                        <span>Selected</span>
-                      </div>
-                      <div className="flex items-center gap-2">
-                        <div className="w-6 h-6 bg-yellow-100 dark:bg-yellow-900/40 rounded"></div>
-                        <span>Held</span>
-                      </div>
-                      <div className="flex items-center gap-2">
-                        <div className="w-6 h-6 bg-gray-200 dark:bg-gray-700 rounded"></div>
-                        <span>Booked</span>
-                      </div>
-                    </div>
-                  </>
-                )}
-              </div>
+        <div className="container mx-auto px-4">
+          <div className="max-w-6xl mx-auto">
+            <div className="flex items-center gap-3 mb-6">
+              <button
+                onClick={handleBackToPassengers}
+                className="flex items-center gap-2 text-[rgb(20_113_76)] hover:text-[rgb(10_80_50)] font-semibold transition-colors"
+              >
+                <ChevronLeft className="w-5 h-5" />
+                Back to passenger details
+              </button>
             </div>
+            
+            <h1 className="text-3xl font-bold mb-6 text-gray-900 dark:text-gray-100">Select seats</h1>
 
-            <div>
-              <div className="card sticky top-4">
-                <h3 className="font-semibold mb-4 text-gray-900 dark:text-gray-100">Selection summary</h3>
-                <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
-                  Select {passengers.length} seat(s) for your passengers
-                </p>
-                <p className="text-lg font-semibold mb-4 text-gray-900 dark:text-gray-100">
-                  {selectedSeats.length} / {passengers.length} selected
-                </p>
-
-                <div className="space-y-2 mb-6">
-                  {passengers.map((p, i) => {
-                    const assignedSeat = selectedSeats[i] ? seats?.find((s: any) => s.id === selectedSeats[i]) : null;
-                    const seatLabel = assignedSeat ? (assignedSeat.number || assignedSeat.label || assignedSeat.seatNumber || '-') : '-';
-                    return (
-                      <div key={i} className="flex justify-between text-sm text-gray-700 dark:text-gray-300">
-                        <span>{p.name}</span>
-                        <span className="font-medium">
-                          {seatLabel}
-                        </span>
-                      </div>
-                    );
-                  })}
+            <div className="grid lg:grid-cols-3 gap-6">
+              <div className="lg:col-span-2">
+                <div className="bg-white dark:bg-gray-800 rounded-lg p-4 mb-4">
+                  <h3 className="font-semibold mb-3 text-gray-900 dark:text-gray-100">Select coach</h3>
+                  {selectedSchedule?.selectedSeatClassName && (
+                    <div className="mb-3 text-sm text-gray-600 dark:text-gray-400">
+                      Showing coaches for: <span className="font-semibold text-[rgb(20_113_76)]">{selectedSchedule.selectedSeatClassName.replace(/_/g, ' ')}</span>
+                    </div>
+                  )}
+                  <div className="flex gap-2 overflow-x-auto pb-2">
+                    {filteredCoaches?.map((coach: any) => {
+                      const availableCount = coach.seats?.filter((s: any) => s.status === 'AVAILABLE').length || 0;
+                      const seatClassName = typeof coach.seatClass === 'string' ? coach.seatClass : (coach.seatClass?.name || coach.coachClass || '');
+                      return (
+                        <button
+                          key={coach.id}
+                          onClick={() => setSelectedCoach(coach.id)}
+                          className={`px-4 py-2 rounded whitespace-nowrap transition-all ${
+                            selectedCoach === coach.id
+                              ? 'bg-[rgb(20_113_76)] text-white shadow-lg'
+                              : 'bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100'
+                          }`}
+                        >
+                          <div className="font-semibold">{coach.label || coach.name || coach.coachNumber}</div>
+                          <div className="text-xs opacity-75">{seatClassName}</div>
+                          <div className="text-xs opacity-75">{availableCount} available</div>
+                        </button>
+                      );
+                    })}
+                  </div>
                 </div>
 
-                <button
-                  onClick={handleContinue}
-                  disabled={selectedSeats.length === 0}
-                  className="btn-primary w-full mb-2"
-                >
-                  Continue with selected seats
-                </button>
-                <button 
-                  onClick={handleAutoAssign}
-                  disabled={holdMutation.isPending}
-                  className="btn-secondary w-full"
-                >
-                  {holdMutation.isPending ? 'Assigning...' : 'Auto-assign seats'}
-                </button>
+                <div className="bg-white dark:bg-gray-800 rounded-lg p-4">
+                  <h3 className="font-semibold mb-4 text-gray-900 dark:text-gray-100">
+                    Seat map - {selectedCoachData?.name || selectedCoachData?.label || selectedCoachData?.coachNumber}
+                  </h3>
+                  {selectedCoachData && (
+                    <p className="text-xs text-gray-500 dark:text-gray-400 mb-4">
+                      Arrangement: {selectedCoachData.seatArrangement} • Total: {selectedCoachData.totalSeats} seats
+                    </p>
+                  )}
+                  
+                  {isLoading ? (
+                    <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+                      <p>Loading seats...</p>
+                    </div>
+                  ) : error ? (
+                    <div className="text-center py-8 text-red-500 dark:text-red-400">
+                      <p>Error loading seats</p>
+                      <p className="text-sm mt-2">{error?.message || 'Please try again'}</p>
+                    </div>
+                  ) : validSeats.length === 0 ? (
+                    <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+                      <p>No seats available in this coach</p>
+                      <p className="text-sm mt-2">Please select a different coach</p>
+                    </div>
+                  ) : (
+                    <>
+                      <div className="flex flex-wrap gap-4 mb-6 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-sm">
+                        <div className="flex items-center gap-2">
+                          <div className="w-4 h-4 bg-green-500 rounded"></div>
+                          <span className="text-gray-700 dark:text-gray-300">Available</span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <div className="w-4 h-4 bg-[rgb(20_113_76)] rounded"></div>
+                          <span className="text-gray-700 dark:text-gray-300">Selected</span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <div className="w-4 h-4 bg-yellow-500 rounded"></div>
+                          <span className="text-gray-700 dark:text-gray-300">Held</span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <div className="w-4 h-4 bg-gray-500 rounded"></div>
+                          <span className="text-gray-700 dark:text-gray-300">Booked</span>
+                        </div>
+                      </div>
+
+                      <div className="bg-gray-50 dark:bg-gray-700/30 p-6 rounded-lg overflow-x-auto">
+                        {renderCoachSeats(selectedCoachData, isBedCoach)}
+                      </div>
+                    </>
+                  )}
+                </div>
+              </div>
+
+              <div>
+                <div className="bg-white dark:bg-gray-800 rounded-lg p-4 sticky top-4">
+                  <h3 className="font-semibold mb-4 text-gray-900 dark:text-gray-100">Selection summary</h3>
+                  <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+                    Select {passengers.length} seat(s) for your passengers
+                  </p>
+                  <p className="text-lg font-semibold mb-4 text-gray-900 dark:text-gray-100">
+                    {selectedSeats.length} / {passengers.length} selected
+                  </p>
+
+                  <div className="space-y-2 mb-6 max-h-48 overflow-y-auto">
+                    {passengers.map((p, i) => {
+                      const assignedSeat = selectedSeats[i] ? validSeats?.find((s: any) => s.id === selectedSeats[i]) : null;
+                      const seatLabel = assignedSeat ? (assignedSeat.number || assignedSeat.label || assignedSeat.seatNumber || '-') : '-';
+                      const bedLabel = assignedSeat ? getBedLabel(assignedSeat.bedPosition) : '';
+                      return (
+                        <div key={i} className="flex justify-between text-sm text-gray-700 dark:text-gray-300">
+                          <span>{p.name}</span>
+                          <span className="font-medium text-[rgb(20_113_76)]">
+                            {seatLabel}{bedLabel}
+                          </span>
+                        </div>
+                      );
+                    })}
+                  </div>
+
+                  <button
+                    onClick={handleContinue}
+                    disabled={selectedSeats.length === 0}
+                    className="w-full bg-[rgb(20_113_76)] hover:bg-[rgb(10_80_50)] disabled:bg-gray-400 text-white font-semibold py-2 rounded mb-2 transition-colors"
+                  >
+                    Continue with selected seats
+                  </button>
+                  <button 
+                    onClick={handleAutoAssign}
+                    disabled={holdMutation.isPending}
+                    className="w-full bg-gray-600 hover:bg-gray-700 disabled:bg-gray-400 text-white font-semibold py-2 rounded transition-colors"
+                  >
+                    {holdMutation.isPending ? 'Assigning...' : 'Auto-assign seats'}
+                  </button>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-      </div>
     </>
   );
 }