refactoring: TypeScript migration, security fixes,

client/src/components/Packing/PackingListPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useRef } from 'react'
+import { useState, useMemo, useRef } from 'react'
 import { useTripStore } from '../../store/tripStore'
 import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
@@ -6,6 +6,7 @@ import {
   CheckSquare, Square, Trash2, Plus, ChevronDown, ChevronRight,
   Sparkles, X, Pencil, Check, MoreHorizontal, CheckCheck, RotateCcw, Luggage,
 } from 'lucide-react'
+import type { PackingItem } from '../../types'
 
 const VORSCHLAEGE = [
   { name: 'Passport', category: 'Documents' },
@@ -64,7 +65,14 @@ function katColor(kat, allCategories) {
 }
 
 // ── Artikel-Zeile ──────────────────────────────────────────────────────────
-function ArtikelZeile({ item, tripId, categories, onCategoryChange }) {
+interface ArtikelZeileProps {
+  item: PackingItem
+  tripId: number
+  categories: string[]
+  onCategoryChange: () => void
+}
+
+function ArtikelZeile({ item, tripId, categories, onCategoryChange }: ArtikelZeileProps) {
   const [editing, setEditing] = useState(false)
   const [editName, setEditName] = useState(item.name)
   const [hovered, setHovered] = useState(false)
@@ -178,7 +186,16 @@ function ArtikelZeile({ item, tripId, categories, onCategoryChange }) {
 }
 
 // ── Kategorie-Gruppe ───────────────────────────────────────────────────────
-function KategorieGruppe({ kategorie, items, tripId, allCategories, onRename, onDeleteAll }) {
+interface KategorieGruppeProps {
+  kategorie: string
+  items: PackingItem[]
+  tripId: number
+  allCategories: string[]
+  onRename: (oldName: string, newName: string) => Promise<void>
+  onDeleteAll: (items: PackingItem[]) => Promise<void>
+}
+
+function KategorieGruppe({ kategorie, items, tripId, allCategories, onRename, onDeleteAll }: KategorieGruppeProps) {
   const [offen, setOffen] = useState(true)
   const [editingName, setEditingName] = useState(false)
   const [editKatName, setEditKatName] = useState(kategorie)
@@ -198,12 +215,12 @@ function KategorieGruppe({ kategorie, items, tripId, allCategories, onRename, on
   }
 
   const handleCheckAll = async () => {
-    for (const item of items) {
+    for (const item of Array.from(items)) {
       if (!item.checked) await togglePackingItem(tripId, item.id, true)
     }
   }
   const handleUncheckAll = async () => {
-    for (const item of items) {
+    for (const item of Array.from(items)) {
       if (item.checked) await togglePackingItem(tripId, item.id, false)
     }
   }
@@ -272,7 +289,14 @@ function KategorieGruppe({ kategorie, items, tripId, allCategories, onRename, on
   )
 }
 
-function MenuItem({ icon, label, onClick, danger }) {
+interface MenuItemProps {
+  icon: React.ReactNode
+  label: string
+  onClick: () => void
+  danger: boolean
+}
+
+function MenuItem({ icon, label, onClick, danger }: MenuItemProps) {
   return (
     <button onClick={onClick} style={{
       display: 'flex', alignItems: 'center', gap: 8, width: '100%',
@@ -289,7 +313,12 @@ function MenuItem({ icon, label, onClick, danger }) {
 }
 
 // ── Haupt-Panel ────────────────────────────────────────────────────────────
-export default function PackingListPanel({ tripId, items }) {
+interface PackingListPanelProps {
+  tripId: number
+  items: PackingItem[]
+}
+
+export default function PackingListPanel({ tripId, items }: PackingListPanelProps) {
   const [neuerName, setNeuerName] = useState('')
   const [neueKategorie, setNeueKategorie] = useState('')
   const [zeigeVorschlaege, setZeigeVorschlaege] = useState(false)