fix: RoomsPage load categories from API instead of mock

src/pages/RoomsPage.tsx

@@ -3,8 +3,7 @@ import { BedDouble, Users, Wifi, Plus, Search, Pencil, ChevronDown, ChevronUp, C
 import { useAmenities } from '../contexts/AmenitiesContext'
 import { useAuth } from '../contexts/AuthContext'
 import { api } from '../lib/api'
-import { MOCK_CATEGORIES } from './RoomCategoriesPage'
-import type { Room } from '../types'
+import type { Room, RoomCategory } from '../types'
 import { cn, ROOM_STATUS_COLORS, ROOM_STATUS_LABELS, HK_STATUS_COLORS, HK_STATUS_LABELS, formatCurrency } from '../lib/utils'
 import { Badge } from '../components/ui/Badge'
 import { RoomModal } from '../components/rooms/RoomModal'
@@ -14,6 +13,7 @@ export function RoomsPage() {
   const slug = user?.hotelSlug ?? ''
 
   const [rooms, setRooms] = useState<Room[]>([])
+  const [categories, setCategories] = useState<RoomCategory[]>([])
   const [loading, setLoading] = useState(true)
   const [search, setSearch] = useState('')
   const [floorFilter, setFloorFilter] = useState<number | 'all'>('all')
@@ -28,8 +28,15 @@ export function RoomsPage() {
 
   useEffect(() => {
     if (!slug) return
-    api.rooms.list(slug)
-      .then(setRooms)
+    Promise.all([
+      api.rooms.list(slug),
+      api.categories.list(slug).then(rows => rows.map(c => ({
+        id: c.id, hotelId: c.hotel_id, name: c.name,
+        description: c.description, color: c.color,
+        amenities: c.amenities, photos: c.photos,
+      } as RoomCategory))),
+    ])
+      .then(([r, cats]) => { setRooms(r); setCategories(cats) })
       .catch(console.error)
       .finally(() => setLoading(false))
   }, [slug])
@@ -296,7 +303,7 @@ export function RoomsPage() {
         room={editingRoom}
         onClose={() => { setModalOpen(false); setSaveError(null) }}
         onSave={handleSave}
-        categories={MOCK_CATEGORIES}
+        categories={categories}
         error={saveError}
       />
     </div>