From 5540d0cdfa1e12dab9f29bfe3e70645f363b7ec9 Mon Sep 17 00:00:00 2001
From: HotelSync <admin@hotelsync.ru>
Date: Mon, 23 Mar 2026 12:17:53 +0300
Subject: [PATCH] =?UTF-8?q?fix:=20category=20form=20=E2=80=94=20async=20sa?=
 =?UTF-8?q?ve=20with=20error=20display,=20drag-and-drop=20photos,=2020MB?=
 =?UTF-8?q?=20body=20limit?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/src/app.ts               |  1 +
 src/pages/RoomCategoriesPage.tsx | 99 ++++++++++++++++++++++++--------
 2 files changed, 77 insertions(+), 23 deletions(-)

diff --git a/backend/src/app.ts b/backend/src/app.ts
index 3c69828..83284e2 100644
--- a/backend/src/app.ts
+++ b/backend/src/app.ts
@@ -31,6 +31,7 @@ export async function buildApp() {
         transport: { target: 'pino-pretty', options: { colorize: true } },
       }),
     },
+    bodyLimit: 20 * 1024 * 1024, // 20MB — for base64 photo uploads
   })
 
   // ── Security ───────────────────────────────────────────────────────────────
diff --git a/src/pages/RoomCategoriesPage.tsx b/src/pages/RoomCategoriesPage.tsx
index 92fb6c7..82ef339 100644
--- a/src/pages/RoomCategoriesPage.tsx
+++ b/src/pages/RoomCategoriesPage.tsx
@@ -31,7 +31,7 @@ function fromApi(c: CategoryApi): RoomCategory {
 interface CategoryFormProps {
   category?: RoomCategory
   onClose: () => void
-  onSave: (cat: RoomCategory) => void
+  onSave: (cat: RoomCategory) => Promise<void>
 }
 
 function CategoryForm({ category, onClose, onSave }: CategoryFormProps) {
@@ -44,13 +44,17 @@ function CategoryForm({ category, onClose, onSave }: CategoryFormProps) {
   const [amenities, setAmenities] = useState<string[]>(category?.amenities ?? [])
   const [photos, setPhotos]   = useState<string[]>(category?.photos ?? [])
   const [photoIdx, setPhotoIdx] = useState(0)
+  const [saving, setSaving]   = useState(false)
+  const [saveError, setSaveError] = useState('')
+  const [dragging, setDragging] = useState(false)
   const fileRef               = useRef<HTMLInputElement>(null)
 
   const toggleAmenity = (a: string) =>
     setAmenities(prev => prev.includes(a) ? prev.filter(x => x !== a) : [...prev, a])
 
-  const handlePhotoUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
-    Array.from(e.target.files ?? []).forEach(file => {
+  const readFiles = (files: FileList | null) => {
+    Array.from(files ?? []).forEach(file => {
+      if (!file.type.startsWith('image/')) return
       const reader = new FileReader()
       reader.onload = ev => {
         const url = ev.target?.result as string
@@ -58,25 +62,42 @@ function CategoryForm({ category, onClose, onSave }: CategoryFormProps) {
       }
       reader.readAsDataURL(file)
     })
+  }
+
+  const handlePhotoUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    readFiles(e.target.files)
     e.target.value = ''
   }
 
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault()
+    setDragging(false)
+    readFiles(e.dataTransfer.files)
+  }
+
   const removePhoto = (i: number) => {
     setPhotos(prev => prev.filter((_, idx) => idx !== i))
     setPhotoIdx(p => Math.max(0, p - 1))
   }
 
-  const handleSave = () => {
-    if (!name.trim()) return
-    onSave({
-      id:       category?.id ?? `cat-${Date.now()}`,
-      hotelId:  category?.hotelId ?? 'hotel-1',
-      name:     name.trim(),
-      description,
-      color,
-      amenities,
-      photos,
-    })
+  const handleSave = async () => {
+    if (!name.trim() || saving) return
+    setSaving(true)
+    setSaveError('')
+    try {
+      await onSave({
+        id:       category?.id ?? `cat-${Date.now()}`,
+        hotelId:  category?.hotelId ?? '',
+        name:     name.trim(),
+        description,
+        color,
+        amenities,
+        photos,
+      })
+    } catch (err) {
+      setSaveError(err instanceof Error ? err.message : 'Ошибка сохранения')
+      setSaving(false)
+    }
   }
 
   return (
@@ -188,8 +209,22 @@ function CategoryForm({ category, onClose, onSave }: CategoryFormProps) {
             <>
               {photos.length > 0 ? (
                 <div className="space-y-3">
-                  <div className="relative rounded-xl overflow-hidden bg-slate-100 dark:bg-slate-700" style={{ height: 220 }}>
+                  <div
+                    className={cn(
+                      'relative rounded-xl overflow-hidden bg-slate-100 dark:bg-slate-700 transition-colors',
+                      dragging && 'ring-2 ring-brand-500 ring-offset-2',
+                    )}
+                    style={{ height: 220 }}
+                    onDragOver={e => { e.preventDefault(); setDragging(true) }}
+                    onDragLeave={() => setDragging(false)}
+                    onDrop={handleDrop}
+                  >
                     <img src={photos[photoIdx]} alt="" className="w-full h-full object-cover" />
+                    {dragging && (
+                      <div className="absolute inset-0 bg-brand-600/40 flex items-center justify-center">
+                        <p className="text-white font-semibold text-sm">Отпустите для добавления</p>
+                      </div>
+                    )}
                     <button
                       onClick={() => removePhoto(photoIdx)}
                       className="absolute top-2 right-2 w-7 h-7 rounded-full bg-red-600 text-white flex items-center justify-center"
@@ -210,9 +245,21 @@ function CategoryForm({ category, onClose, onSave }: CategoryFormProps) {
                   </div>
                 </div>
               ) : (
-                <div className="flex flex-col items-center justify-center h-40 rounded-xl border-2 border-dashed border-slate-300 dark:border-slate-600 text-slate-400">
-                  <ImagePlus size={28} className="mb-2 opacity-40" />
-                  <p className="text-sm">Фото категории не загружены</p>
+                <div
+                  className={cn(
+                    'flex flex-col items-center justify-center h-40 rounded-xl border-2 border-dashed transition-colors cursor-pointer',
+                    dragging
+                      ? 'border-brand-500 bg-brand-50 dark:bg-brand-900/20 text-brand-600'
+                      : 'border-slate-300 dark:border-slate-600 text-slate-400 hover:border-slate-400',
+                  )}
+                  onClick={() => fileRef.current?.click()}
+                  onDragOver={e => { e.preventDefault(); setDragging(true) }}
+                  onDragLeave={() => setDragging(false)}
+                  onDrop={handleDrop}
+                >
+                  <ImagePlus size={28} className="mb-2 opacity-60" />
+                  <p className="text-sm font-medium">{dragging ? 'Отпустите файлы' : 'Перетащите фото или нажмите'}</p>
+                  <p className="text-xs mt-0.5 opacity-60">JPG, PNG, WEBP</p>
                 </div>
               )}
               <input ref={fileRef} type="file" accept="image/*" multiple className="hidden" onChange={handlePhotoUpload} />
@@ -225,11 +272,17 @@ function CategoryForm({ category, onClose, onSave }: CategoryFormProps) {
         </div>
 
         {/* Footer */}
-        <div className="shrink-0 px-6 py-4 border-t border-slate-200 dark:border-slate-700 flex justify-end gap-3">
-          <button onClick={onClose} className="btn-secondary">Отмена</button>
-          <button onClick={handleSave} className="btn-primary" disabled={!name.trim()}>
-            {isEdit ? 'Сохранить' : 'Создать категорию'}
-          </button>
+        <div className="shrink-0 px-6 py-4 border-t border-slate-200 dark:border-slate-700">
+          {saveError && (
+            <p className="text-xs text-red-500 mb-3">{saveError}</p>
+          )}
+          <div className="flex justify-end gap-3">
+            <button onClick={onClose} className="btn-secondary" disabled={saving}>Отмена</button>
+            <button onClick={handleSave} className="btn-primary" disabled={!name.trim() || saving}>
+              {saving ? <Loader2 size={14} className="animate-spin" /> : null}
+              {isEdit ? 'Сохранить' : 'Создать категорию'}
+            </button>
+          </div>
         </div>
       </div>
     </div>