feat: deposit — history page, card info, cancel button, webhook notice, online booking email

- Migration 060: card_last4, card_brand columns in booking_deposits
- Backend: webhook saves card brand/last4 from YooKassa notification
- Backend: GET /api/hotels/:slug/deposits — payment history with guest/room info
- Backend: DELETE /api/hotels/:slug/bookings/:bookingId/deposit — cancel hold_created or paid_cash deposit
- Backend: auto-create YooKassa hold + send deposit email for source='online' bookings
- Frontend: DepositHistoryPage with filters, card display, retention reasons
- Frontend: deposit cancel button for hold_created and paid_cash states
- Frontend: show card last4/brand in hold_confirmed status
- Frontend: release form presets (full return / hold all) + improved UX
- Frontend: webhook setup instructions in DepositSettingsPage
- Frontend: "История платежей" link in deposit settings header

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/pages/DepositHistoryPage.tsx

@@ -0,0 +1,165 @@
+import { useState, useEffect } from 'react'
+import { Loader2, ShieldCheck, CreditCard, Banknote, RefreshCw } from 'lucide-react'
+import { api, type BookingDeposit } from '../lib/api'
+import { useAuth } from '../contexts/AuthContext'
+import { cn, formatCurrency } from '../lib/utils'
+import { format } from 'date-fns'
+
+const STATUS_LABEL: Record<string, { label: string; cls: string }> = {
+  hold_created:   { label: 'Ожидает оплаты',  cls: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400' },
+  hold_confirmed: { label: 'Холд подтверждён', cls: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400' },
+  paid_cash:      { label: 'Наличными',        cls: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400' },
+  captured:       { label: 'Списано',          cls: 'bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300' },
+  refunded:       { label: 'Возвращён',        cls: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400' },
+  cancelled:      { label: 'Отменён',          cls: 'bg-slate-100 text-slate-500 dark:bg-slate-700 dark:text-slate-400' },
+}
+
+export function DepositHistoryPage() {
+  const { user } = useAuth()
+  const slug = user?.hotelSlug ?? ''
+
+  const [deposits, setDeposits] = useState<BookingDeposit[]>([])
+  const [loading, setLoading] = useState(true)
+  const [filter, setFilter] = useState<string>('all')
+
+  const load = () => {
+    if (!slug) return
+    setLoading(true)
+    api.deposits.history(slug)
+      .then(setDeposits)
+      .catch(() => setDeposits([]))
+      .finally(() => setLoading(false))
+  }
+
+  useEffect(() => { load() }, [slug])
+
+  const filtered = filter === 'all'
+    ? deposits
+    : deposits.filter(d => d.status === filter)
+
+  return (
+    <div className="p-4 md:p-6 space-y-5 max-w-4xl">
+      <div className="flex items-center justify-between flex-wrap gap-2">
+        <h1 className="text-xl font-bold text-slate-900 dark:text-slate-100 flex items-center gap-2">
+          <ShieldCheck size={22} className="text-brand-600" />
+          История депозитов
+        </h1>
+        <button
+          onClick={load}
+          className="btn-secondary flex items-center gap-1.5 text-sm"
+        >
+          <RefreshCw size={14} />
+          Обновить
+        </button>
+      </div>
+
+      {/* Filter tabs */}
+      <div className="flex gap-1 flex-wrap">
+        {[
+          { id: 'all',            label: 'Все' },
+          { id: 'hold_created',   label: 'Ожидают' },
+          { id: 'hold_confirmed', label: 'Холд' },
+          { id: 'paid_cash',      label: 'Наличные' },
+          { id: 'captured',       label: 'Списаны' },
+          { id: 'refunded',       label: 'Возвращены' },
+        ].map(f => (
+          <button
+            key={f.id}
+            onClick={() => setFilter(f.id)}
+            className={cn(
+              'px-3 py-1.5 rounded-lg text-xs font-medium transition-colors',
+              filter === f.id
+                ? 'bg-brand-600 text-white'
+                : 'bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-600',
+            )}
+          >
+            {f.label}
+          </button>
+        ))}
+      </div>
+
+      {loading ? (
+        <div className="flex justify-center py-10">
+          <Loader2 size={24} className="animate-spin text-brand-600" />
+        </div>
+      ) : filtered.length === 0 ? (
+        <p className="text-sm text-slate-400 dark:text-slate-500 py-8 text-center">
+          Нет депозитов
+        </p>
+      ) : (
+        <div className="card overflow-hidden">
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-slate-100 dark:border-slate-700 text-xs text-slate-500 dark:text-slate-400 uppercase tracking-wide">
+                  <th className="text-left px-4 py-3 font-medium">Дата</th>
+                  <th className="text-left px-4 py-3 font-medium">Номер</th>
+                  <th className="text-left px-4 py-3 font-medium">Гость</th>
+                  <th className="text-left px-4 py-3 font-medium">Метод</th>
+                  <th className="text-right px-4 py-3 font-medium">Сумма</th>
+                  <th className="text-left px-4 py-3 font-medium">Статус</th>
+                  <th className="text-right px-4 py-3 font-medium">Удержано</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-slate-50 dark:divide-slate-800">
+                {filtered.map(dep => {
+                  const st = STATUS_LABEL[dep.status] ?? { label: dep.status, cls: 'bg-slate-100 text-slate-600' }
+                  return (
+                    <tr key={dep.id} className="hover:bg-slate-50 dark:hover:bg-slate-800/40 transition-colors">
+                      <td className="px-4 py-3 text-slate-600 dark:text-slate-300 whitespace-nowrap">
+                        {format(new Date(dep.createdAt), 'dd.MM.yyyy')}
+                      </td>
+                      <td className="px-4 py-3 text-slate-700 dark:text-slate-200 font-medium whitespace-nowrap">
+                        {dep.roomNumber ? `№${dep.roomNumber}` : '—'}
+                      </td>
+                      <td className="px-4 py-3 text-slate-700 dark:text-slate-200">
+                        <div>{dep.guestName ?? '—'}</div>
+                        {dep.guestEmail && (
+                          <div className="text-xs text-slate-400">{dep.guestEmail}</div>
+                        )}
+                      </td>
+                      <td className="px-4 py-3 whitespace-nowrap">
+                        {dep.paymentMethod === 'yookassa_hold' ? (
+                          <div className="flex items-center gap-1.5 text-slate-600 dark:text-slate-300">
+                            <CreditCard size={13} />
+                            <span>
+                              {dep.cardBrand ? `${dep.cardBrand} ` : ''}
+                              {dep.cardLast4 ? `•••• ${dep.cardLast4}` : 'ЮКасса'}
+                            </span>
+                          </div>
+                        ) : dep.paymentMethod === 'cash' ? (
+                          <div className="flex items-center gap-1.5 text-slate-600 dark:text-slate-300">
+                            <Banknote size={13} />
+                            <span>Наличные</span>
+                          </div>
+                        ) : '—'}
+                      </td>
+                      <td className="px-4 py-3 text-right font-medium text-slate-900 dark:text-slate-100 whitespace-nowrap">
+                        {formatCurrency(dep.amount)}
+                      </td>
+                      <td className="px-4 py-3">
+                        <span className={cn('inline-flex items-center text-xs px-2 py-0.5 rounded-full font-medium', st.cls)}>
+                          {st.label}
+                        </span>
+                        {dep.retentionReason && (
+                          <div className="text-xs text-slate-400 mt-0.5 max-w-[160px] truncate" title={dep.retentionReason}>
+                            {dep.retentionReason}
+                          </div>
+                        )}
+                      </td>
+                      <td className="px-4 py-3 text-right text-slate-600 dark:text-slate-300 whitespace-nowrap">
+                        {dep.capturedAmount != null && dep.capturedAmount > 0
+                          ? formatCurrency(dep.capturedAmount)
+                          : dep.status === 'refunded' ? '0 ₽' : '—'}
+                      </td>
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

src/pages/DepositSettingsPage.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react'
-import { Save, Eye, EyeOff, Loader2, ShieldCheck, Printer } from 'lucide-react'
+import { Save, Eye, EyeOff, Loader2, ShieldCheck, Printer, History, Info } from 'lucide-react'
 import { QRCodeSVG } from 'qrcode.react'
+import { Link } from 'react-router-dom'
 import { api, type DepositSettings } from '../lib/api'
 import { useAuth } from '../contexts/AuthContext'
 import { cn } from '../lib/utils'
@@ -84,14 +85,23 @@ export function DepositSettingsPage() {
 
   return (
     <div className="p-4 md:p-6 space-y-6 max-w-2xl">
-      <div>
-        <h1 className="text-xl font-bold text-slate-900 dark:text-slate-100 flex items-center gap-2">
-          <ShieldCheck size={22} className="text-brand-600" />
-          Депозит
-        </h1>
-        <p className="text-sm text-slate-500 dark:text-slate-400 mt-1">
-          Настройте предоплату или залог при заселении гостей.
-        </p>
+      <div className="flex items-start justify-between gap-4 flex-wrap">
+        <div>
+          <h1 className="text-xl font-bold text-slate-900 dark:text-slate-100 flex items-center gap-2">
+            <ShieldCheck size={22} className="text-brand-600" />
+            Депозит
+          </h1>
+          <p className="text-sm text-slate-500 dark:text-slate-400 mt-1">
+            Настройте предоплату или залог при заселении гостей.
+          </p>
+        </div>
+        <Link
+          to="/settings/deposit/history"
+          className="btn-secondary flex items-center gap-1.5 text-sm shrink-0"
+        >
+          <History size={15} />
+          История платежей
+        </Link>
       </div>
 
       {error && (
@@ -174,6 +184,26 @@ export function DepositSettingsPage() {
               </div>
             </div>
 
+            {/* Webhook notice */}
+            {shopId && (
+              <div className="border-t border-slate-100 dark:border-slate-700 pt-4">
+                <div className="rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 p-3 space-y-1.5">
+                  <p className="text-xs font-semibold text-blue-800 dark:text-blue-300 flex items-center gap-1.5">
+                    <Info size={13} /> Настройте webhook в ЮКасса
+                  </p>
+                  <p className="text-xs text-blue-700 dark:text-blue-400">
+                    Чтобы статус депозита обновлялся автоматически после оплаты, добавьте URL уведомлений в личном кабинете ЮКасса (Настройки → HTTP-уведомления):
+                  </p>
+                  <code className="block text-xs font-mono bg-blue-100 dark:bg-blue-900/40 text-blue-900 dark:text-blue-200 rounded px-2 py-1 break-all select-all">
+                    https://api.hotelsync.ru/api/webhooks/yookassa
+                  </code>
+                  <p className="text-xs text-blue-600 dark:text-blue-400">
+                    Подписки: <strong>payment.waiting_for_capture</strong>, <strong>payment.succeeded</strong>, <strong>payment.canceled</strong>
+                  </p>
+                </div>
+              </div>
+            )}
+
             {/* QR code section — only when shopId is configured */}
             {shopId && (
               <div className="border-t border-slate-100 dark:border-slate-700 pt-4">