refactoring: TypeScript migration, security fixes,

client/src/components/Files/FileManager.tsx

@@ -1,9 +1,11 @@
-import React, { useState, useCallback } from 'react'
 import ReactDOM from 'react-dom'
+import { useState, useCallback } from 'react'
+import DOM from 'react-dom'
 import { useDropzone } from 'react-dropzone'
 import { Upload, Trash2, ExternalLink, X, FileText, FileImage, File, MapPin, Ticket, StickyNote } from 'lucide-react'
 import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
+import type { Place, Reservation, TripFile } from '../../types'
 
 function isImage(mimeType) {
   if (!mimeType) return false
@@ -32,7 +34,12 @@ function formatDateWithLocale(dateStr, locale) {
 }
 
 // Image lightbox
-function ImageLightbox({ file, onClose }) {
+interface ImageLightboxProps {
+  file: TripFile & { url: string }
+  onClose: () => void
+}
+
+function ImageLightbox({ file, onClose }: ImageLightboxProps) {
   const { t } = useTranslation()
   return (
     <div
@@ -62,7 +69,12 @@ function ImageLightbox({ file, onClose }) {
 }
 
 // Source badge — unified style for both place and reservation
-function SourceBadge({ icon: Icon, label }) {
+interface SourceBadgeProps {
+  icon: React.ComponentType<{ size?: number; style?: React.CSSProperties }>
+  label: string
+}
+
+function SourceBadge({ icon: Icon, label }: SourceBadgeProps) {
   return (
     <span style={{
       display: 'inline-flex', alignItems: 'center', gap: 4,
@@ -77,7 +89,18 @@ function SourceBadge({ icon: Icon, label }) {
   )
 }
 
-export default function FileManager({ files = [], onUpload, onDelete, onUpdate, places, reservations = [], tripId, allowedFileTypes }) {
+interface FileManagerProps {
+  files?: TripFile[]
+  onUpload: (fd: FormData) => Promise<void>
+  onDelete: (fileId: number) => Promise<void>
+  onUpdate: (fileId: number, data: Partial<TripFile>) => Promise<void>
+  places: Place[]
+  reservations?: Reservation[]
+  tripId: number
+  allowedFileTypes: Record<string, string[]>
+}
+
+export default function FileManager({ files = [], onUpload, onDelete, onUpdate, places, reservations = [], tripId, allowedFileTypes }: FileManagerProps) {
   const [uploading, setUploading] = useState(false)
   const [filterType, setFilterType] = useState('all')
   const [lightboxFile, setLightboxFile] = useState(null)
@@ -112,7 +135,7 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
     const items = e.clipboardData?.items
     if (!items) return
     const files = []
-    for (const item of items) {
+    for (const item of Array.from(items)) {
       if (item.kind === 'file') {
         const file = item.getAsFile()
         if (file) files.push(file)