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

2026-03-23 11:42:29 +03:00
parent b494224af0
commit 5c40b154d0
7 changed files with 459 additions and 64 deletions
--- a/src/pages/RoomCategoriesPage.tsx
+++ b/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 && (
--- a/src/pages/TariffsPage.tsx
+++ b/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)
                }}