feat: categories + tariffs — migration, API routes, frontend integration

src/pages/RoomCategoriesPage.tsx

@@ -1,8 +1,11 @@
-import { useState, useRef } from 'react'
-import { Plus, Pencil, Trash2, ImagePlus, X as XIcon, Tag, ChevronRight } from 'lucide-react'
+import { useState, useRef, useEffect } from 'react'
+import { Plus, Pencil, Trash2, ImagePlus, X as XIcon, Tag, ChevronRight, Loader2 } from 'lucide-react'
 import { cn } from '../lib/utils'
 import type { RoomCategory } from '../types'
 import { useAmenities } from '../contexts/AmenitiesContext'
+import { useAuth } from '../contexts/AuthContext'
+import { api } from '../lib/api'
+import type { CategoryApi } from '../lib/api'
 
 // ── Mock data ─────────────────────────────────────────────────────────────────
 
@@ -11,41 +14,16 @@ const CATEGORY_COLORS = [
   '#DC2626', '#D97706', '#DB2777', '#475569',
 ]
 
-export const MOCK_CATEGORIES: RoomCategory[] = [
-  {
-    id: 'cat1',
-    hotelId: 'hotel-1',
-    name: 'Стандарт',
-    description: 'Уютные номера с базовым набором удобств. Идеально для деловых поездок и короткого отдыха.',
-    photos: [],
-    color: '#4F46E5',
-    amenities: ['Wi-Fi', 'TV', 'AC'],
-  },
-  {
-    id: 'cat2',
-    hotelId: 'hotel-1',
-    name: 'Делюкс',
-    description: 'Просторные номера с улучшенным интерьером, панорамными окнами и расширенным набором услуг.',
-    photos: [],
-    color: '#059669',
-    amenities: ['Wi-Fi', 'TV', 'AC', 'Mini-bar', 'Bathrobe'],
-  },
-  {
-    id: 'cat3',
-    hotelId: 'hotel-1',
-    name: 'Люкс & Пентхаус',
-    description: 'Роскошные апартаменты на верхних этажах с потрясающими видами, джакузи и персональным дворецким.',
-    photos: [],
-    color: '#7C3AED',
-    amenities: ['Wi-Fi', 'TV', 'AC', 'Mini-bar', 'Bathrobe', 'Jacuzzi', 'Panoramic view', 'Butler', 'Terrace'],
-  },
-]
-
-// Mock room counts per category
-const MOCK_ROOM_COUNTS: Record<string, number> = {
-  cat1: 8,
-  cat2: 5,
-  cat3: 2,
+function fromApi(c: CategoryApi): RoomCategory {
+  return {
+    id: c.id,
+    hotelId: c.hotel_id,
+    name: c.name,
+    description: c.description,
+    color: c.color,
+    amenities: c.amenities,
+    photos: c.photos,
+  }
 }
 
 // ── Category Form Modal ────────────────────────────────────────────────────────
@@ -261,24 +239,53 @@ function CategoryForm({ category, onClose, onSave }: CategoryFormProps) {
 // ── Main page ─────────────────────────────────────────────────────────────────
 
 export function RoomCategoriesPage() {
-  const [categories, setCategories] = useState<RoomCategory[]>(MOCK_CATEGORIES)
+  const { user } = useAuth()
+  const slug = user?.hotelSlug ?? ''
+
+  const [categories, setCategories] = useState<RoomCategory[]>([])
+  const [loading, setLoading]       = useState(true)
   const [editingCat, setEditingCat] = useState<RoomCategory | undefined>(undefined)
   const [formOpen, setFormOpen]     = useState(false)
 
+  useEffect(() => {
+    if (!slug) return
+    api.categories.list(slug)
+      .then(rows => setCategories(rows.map(fromApi)))
+      .catch(console.error)
+      .finally(() => setLoading(false))
+  }, [slug])
+
   const openCreate = () => { setEditingCat(undefined); setFormOpen(true) }
   const openEdit   = (cat: RoomCategory) => { setEditingCat(cat); setFormOpen(true) }
 
-  const handleSave = (cat: RoomCategory) => {
-    setCategories(prev => {
-      const idx = prev.findIndex(c => c.id === cat.id)
-      if (idx >= 0) { const next = [...prev]; next[idx] = cat; return next }
-      return [...prev, cat]
-    })
+  const handleSave = async (cat: RoomCategory) => {
+    if (!slug) return
+    const payload = {
+      name: cat.name, description: cat.description,
+      color: cat.color, amenities: cat.amenities, photos: cat.photos,
+    }
+    const isNew = !categories.find(c => c.id === cat.id)
+    const saved = isNew
+      ? await api.categories.create(slug, payload)
+      : await api.categories.update(slug, cat.id, payload)
+    const converted = fromApi(saved)
+    setCategories(prev => isNew ? [...prev, converted] : prev.map(c => c.id === cat.id ? converted : c))
     setFormOpen(false)
   }
 
-  const handleDelete = (id: string) =>
+  const handleDelete = async (id: string) => {
+    if (!slug) return
+    await api.categories.delete(slug, id)
     setCategories(prev => prev.filter(c => c.id !== id))
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <Loader2 size={24} className="animate-spin text-brand-600" />
+      </div>
+    )
+  }
 
   return (
     <div className="p-4 md:p-6 space-y-5">
@@ -313,7 +320,6 @@ export function RoomCategoriesPage() {
       {/* Categories list */}
       <div className="space-y-4">
         {categories.map(cat => {
-          const roomCount = MOCK_ROOM_COUNTS[cat.id] ?? 0
           return (
             <div key={cat.id} className="card p-5">
               <div className="flex items-start gap-4">
@@ -331,12 +337,6 @@ export function RoomCategoriesPage() {
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-3 mb-1">
                     <h3 className="text-lg font-bold text-slate-900 dark:text-slate-100">{cat.name}</h3>
-                    <span
-                      className="text-xs px-2 py-0.5 rounded-full font-medium"
-                      style={{ background: cat.color + '20', color: cat.color }}
-                    >
-                      {roomCount} {roomCount === 1 ? 'номер' : roomCount < 5 ? 'номера' : 'номеров'}
-                    </span>
                   </div>
 
                   {cat.description && (