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

src/pages/TariffsPage.tsx

@@ -1,11 +1,14 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import {
   Plus, Edit2, Trash2, ToggleLeft, ToggleRight, Coffee, Utensils,
   Wifi, Car, Waves, Sparkles, Plane, Package, Check, X, Info, Tag,
-  ChevronDown, ChevronUp, Pencil,
+  ChevronDown, ChevronUp, Pencil, Loader2,
 } from 'lucide-react'
 import { Modal } from '../components/ui/Modal'
 import { cn } from '../lib/utils'
+import { useAuth } from '../contexts/AuthContext'
+import { api } from '../lib/api'
+import type { TariffApi } from '../lib/api'
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -50,7 +53,19 @@ interface Tariff {
   isActive: boolean
 }
 
-// ─── Mock ─────────────────────────────────────────────────────────────────────
+// ─── Converter ────────────────────────────────────────────────────────────────
+
+function fromApi(t: TariffApi): Tariff {
+  return {
+    id: t.id, name: t.name, code: t.code,
+    mealPlan: t.meal_plan, inclusions: t.inclusions,
+    modifierType: t.modifier_type, modifierValue: t.modifier_value,
+    minNights: t.min_nights, cancellationPolicy: t.cancellation_policy,
+    description: t.description, isActive: t.is_active,
+  }
+}
+
+// ─── Mock (fallback, will be replaced by API) ─────────────────────────────────
 
 const MOCK_TARIFFS: Tariff[] = [
   {
@@ -374,10 +389,22 @@ function TariffModal({
 // ─── Main Page ────────────────────────────────────────────────────────────────
 
 export function TariffsPage() {
-  const [tariffs, setTariffs] = useState<Tariff[]>(MOCK_TARIFFS)
+  const { user } = useAuth()
+  const slug = user?.hotelSlug ?? ''
+
+  const [tariffs, setTariffs] = useState<Tariff[]>([])
+  const [loading, setLoading] = useState(true)
   const [modal, setModal] = useState<'create' | Tariff | null>(null)
   const [deleteTarget, setDeleteTarget] = useState<Tariff | null>(null)
 
+  useEffect(() => {
+    if (!slug) return
+    api.tariffs.list(slug)
+      .then(rows => setTariffs(rows.map(fromApi)))
+      .catch(console.error)
+      .finally(() => setLoading(false))
+  }, [slug])
+
   // Editable meal plans & inclusions
   const [mealPlans, setMealPlans] = useState<Array<{ id: string; label: string; description: string; inclusions: string[] }>>(MEAL_PLANS)
   const [allInclusions, setAllInclusions] = useState(ALL_INCLUSIONS)
@@ -397,21 +424,46 @@ export function TariffsPage() {
   const DEFAULT_MEAL_IDS = MEAL_PLANS.map(m => m.id)
   const DEFAULT_INC_IDS  = ALL_INCLUSIONS.map(i => i.id)
 
-  const save = (data: Omit<Tariff, 'id'>) => {
-    if (typeof modal === 'object' && modal !== null) {
-      setTariffs(prev => prev.map(t => t.id === modal.id ? { ...data, id: modal.id } : t))
-    } else {
-      setTariffs(prev => [...prev, { ...data, id: `t-${Date.now()}` }])
+  const save = async (data: Omit<Tariff, 'id'>) => {
+    if (!slug) return
+    const payload = {
+      name: data.name, code: data.code, meal_plan: data.mealPlan,
+      inclusions: data.inclusions, modifier_type: data.modifierType,
+      modifier_value: data.modifierValue, min_nights: data.minNights,
+      cancellation_policy: data.cancellationPolicy,
+      description: data.description, is_active: data.isActive,
     }
+    const isEdit = typeof modal === 'object' && modal !== null
+    const saved = isEdit
+      ? await api.tariffs.update(slug, modal.id, payload)
+      : await api.tariffs.create(slug, payload)
+    const converted = fromApi(saved)
+    setTariffs(prev => isEdit
+      ? prev.map(t => t.id === modal.id ? converted : t)
+      : [...prev, converted],
+    )
     setModal(null)
   }
 
-  const toggleActive = (id: string) =>
-    setTariffs(prev => prev.map(t => t.id === id ? { ...t, isActive: !t.isActive } : t))
+  const toggleActive = async (id: string) => {
+    if (!slug) return
+    const t = tariffs.find(x => x.id === id)
+    if (!t) return
+    const saved = await api.tariffs.update(slug, id, { is_active: !t.isActive })
+    setTariffs(prev => prev.map(x => x.id === id ? fromApi(saved) : x))
+  }
 
   const activeTariffs   = tariffs.filter(t => t.isActive)
   const inactiveTariffs = tariffs.filter(t => !t.isActive)
 
+  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-6">
       {/* Header */}
@@ -689,7 +741,9 @@ export function TariffsPage() {
             <div className="flex justify-end gap-2">
               <button onClick={() => setDeleteTarget(null)} className="btn-secondary">Отмена</button>
               <button
-                onClick={() => {
+                onClick={async () => {
+                  if (!slug) return
+                  await api.tariffs.delete(slug, deleteTarget.id)
                   setTariffs(prev => prev.filter(t => t.id !== deleteTarget.id))
                   setDeleteTarget(null)
                 }}