Reapply "Add missing admin action files and navigation links"

This reverts commit 4d515bc400.

src/app/admin/import/badges/badge-editor-dialog.tsx

@@ -0,0 +1,108 @@
+'use client'
+
+import { Loader2 } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
+import { getBadgeData, updateBadge } from '@/actions/badges'
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { useServerAction } from '@/hooks/use-server-action'
+
+interface BadgeEditorDialogProps {
+  code: string
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /** Called after a successful save so the parent can refresh state */
+  onSaved?: () => void
+}
+
+export function BadgeEditorDialog({ code, open, onOpenChange, onSaved }: BadgeEditorDialogProps) {
+  const [name, setName] = useState('')
+  const [desc, setDesc] = useState('')
+  const [loading, setLoading] = useState(false)
+  const { run, isPending: saving } = useServerAction()
+
+  // Fetch current values when dialog opens
+  useEffect(() => {
+    if (!open || !code) return
+    setLoading(true)
+    getBadgeData({ code })
+      .then((result) => {
+        if (result.ok) {
+          const data = result.data as { name: string; desc: string }
+          setName(data.name ?? '')
+          setDesc(data.desc ?? '')
+        }
+      })
+      .catch(() => {
+        toast.error('Failed to load badge data')
+      })
+      .finally(() => setLoading(false))
+  }, [open, code])
+
+  function handleSave() {
+    run(() => updateBadge({ code, name, desc }), {
+      successMessage: `Badge ${code} updated`,
+      errorMessage: 'Save failed',
+      onSuccess: () => {
+        onSaved?.()
+        onOpenChange(false)
+      },
+    })
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">Edit Badge — {code}</DialogTitle>
+        </DialogHeader>
+
+        {loading ? (
+          <div className="flex items-center justify-center py-8">
+            <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+          </div>
+        ) : (
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="badge-name">Name</Label>
+              <Input
+                id="badge-name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="Badge name"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="badge-desc">Description</Label>
+              <Input
+                id="badge-desc"
+                value={desc}
+                onChange={(e) => setDesc(e.target.value)}
+                placeholder="Badge description"
+              />
+            </div>
+          </div>
+        )}
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={saving}>
+            Cancel
+          </Button>
+          <Button onClick={handleSave} disabled={loading || saving}>
+            {saving && <Loader2 className="w-4 h-4 animate-spin mr-1" />}
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

src/app/admin/import/badges/import-badges-client.tsx

@@ -0,0 +1,496 @@
+'use client'
+
+import {
+  AlertCircle,
+  BadgeCheck,
+  Check,
+  CheckCircle2,
+  Download,
+  Globe,
+  Loader2,
+  Package,
+  Pencil,
+  Search,
+  X,
+} from 'lucide-react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { toast } from 'sonner'
+import { importBadgeFromRemote } from '@/actions/import-badges'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import { cn } from '@/lib/utils'
+import { BadgeEditorDialog } from './badge-editor-dialog'
+
+interface BadgeItem {
+  id: number
+  code: string
+  name: string
+  description: string
+  hotel: string
+  url_habbo: string
+  url_habboassets: string
+  alreadyImported: boolean
+}
+
+const PAGE_SIZE = 100
+
+export function ImportBadgesClient() {
+  const [searchTerm, setSearchTerm] = useState('')
+  const [activeSearch, setActiveSearch] = useState('')
+  const [badges, setBadges] = useState<BadgeItem[]>([])
+  const [offset, setOffset] = useState(0)
+  const [hasMore, setHasMore] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [importingCode, setImportingCode] = useState<string | null>(null)
+  const [error, setError] = useState('')
+  const [allHotels, setAllHotels] = useState(true)
+  const [editingCode, setEditingCode] = useState<string | null>(null)
+  const [selected, setSelected] = useState<Set<string>>(new Set())
+  const [batchImporting, setBatchImporting] = useState(false)
+  const searchRef = useRef<HTMLInputElement>(null)
+
+  const fetchBadges = useCallback(async (search: string, off: number, all: boolean) => {
+    setLoading(true)
+    setError('')
+    try {
+      const params = new URLSearchParams({ offset: String(off) })
+      if (search) params.set('search', search)
+      if (all) params.set('allHotels', '1')
+      const res = await fetch(`/api/admin/import/badges?${params}`)
+      const data = await res.json()
+      if (!res.ok) {
+        setError(data.error || 'Failed to load')
+        return
+      }
+      const list = data.badges || []
+      setBadges(list)
+      setHasMore(list.length >= PAGE_SIZE)
+      setSelected(new Set())
+    } catch {
+      setError('Network error')
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  // Auto-load on mount and when allHotels changes
+  // biome-ignore lint/correctness/useExhaustiveDependencies: explicitly chosen here, see surrounding code
+  useEffect(() => {
+    setOffset(0)
+    fetchBadges(activeSearch, 0, allHotels)
+  }, [fetchBadges, allHotels])
+
+  // "/" keyboard shortcut to focus search
+  useEffect(() => {
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.key === '/' && !e.metaKey && !e.ctrlKey && !e.altKey) {
+        const tag = (e.target as HTMLElement)?.tagName
+        if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return
+        e.preventDefault()
+        searchRef.current?.focus()
+      }
+    }
+    document.addEventListener('keydown', onKeyDown)
+    return () => document.removeEventListener('keydown', onKeyDown)
+  }, [])
+
+  function doSearch() {
+    setActiveSearch(searchTerm)
+    setOffset(0)
+    fetchBadges(searchTerm, 0, allHotels)
+  }
+
+  function goPage(direction: 'prev' | 'next') {
+    const newOffset = direction === 'next' ? offset + PAGE_SIZE : Math.max(0, offset - PAGE_SIZE)
+    setOffset(newOffset)
+    fetchBadges(activeSearch, newOffset, allHotels)
+  }
+
+  async function doImport(badge: BadgeItem) {
+    setImportingCode(badge.code)
+    try {
+      const result = await importBadgeFromRemote({
+        code: badge.code,
+        name: badge.name,
+        description: badge.description,
+      })
+      if (result.ok) {
+        toast.success(`${badge.code} imported`)
+        setBadges((prev) =>
+          prev.map((b) => (b.code === badge.code ? { ...b, alreadyImported: true } : b)),
+        )
+        setSelected((prev) => {
+          const n = new Set(prev)
+          n.delete(badge.code)
+          return n
+        })
+      } else {
+        toast.error(result.error || `Failed to import ${badge.code}`)
+      }
+    } catch {
+      toast.error(`Network error importing ${badge.code}`)
+    } finally {
+      setImportingCode(null)
+    }
+  }
+
+  async function doBatchImport() {
+    const toImport = badges.filter((b) => selected.has(b.code) && !b.alreadyImported)
+    if (toImport.length === 0) return
+    setBatchImporting(true)
+    let ok = 0,
+      fail = 0
+    for (const badge of toImport) {
+      try {
+        const result = await importBadgeFromRemote({
+          code: badge.code,
+          name: badge.name,
+          description: badge.description,
+        })
+        if (result.ok) {
+          ok++
+          setBadges((prev) =>
+            prev.map((b) => (b.code === badge.code ? { ...b, alreadyImported: true } : b)),
+          )
+        } else {
+          fail++
+        }
+      } catch {
+        fail++
+      }
+    }
+    setBatchImporting(false)
+    setSelected(new Set())
+    if (ok > 0) toast.success(`${ok} badge(s) imported`)
+    if (fail > 0) toast.error(`${fail} failed`)
+  }
+
+  function toggleSelect(code: string) {
+    setSelected((prev) => {
+      const next = new Set(prev)
+      if (next.has(code)) next.delete(code)
+      else next.add(code)
+      return next
+    })
+  }
+
+  const importableBadges = useMemo(() => badges.filter((b) => !b.alreadyImported), [badges])
+
+  function toggleSelectAll() {
+    if (selected.size === importableBadges.length) {
+      setSelected(new Set())
+    } else {
+      setSelected(new Set(importableBadges.map((b) => b.code)))
+    }
+  }
+
+  // Stats
+  const importedCount = useMemo(() => badges.filter((b) => b.alreadyImported).length, [badges])
+  const currentPage = Math.floor(offset / PAGE_SIZE) + 1
+
+  return (
+    <TooltipProvider delayDuration={300}>
+      <div className="space-y-4">
+        {/* Stats bar */}
+        {badges.length > 0 && (
+          <div className="flex items-center gap-3 flex-wrap">
+            <div className="flex items-center gap-1.5 text-sm">
+              <Package className="h-4 w-4 text-muted-foreground" />
+              <span className="font-medium">{badges.length}</span>
+              <span className="text-muted-foreground">results</span>
+            </div>
+            <div className="flex items-center gap-1.5 text-sm">
+              <CheckCircle2 className="h-4 w-4 text-emerald-500" />
+              <span className="font-medium text-emerald-600">{importedCount}</span>
+              <span className="text-muted-foreground">imported</span>
+            </div>
+            {importableBadges.length > 0 && (
+              <div className="flex items-center gap-1.5 text-sm">
+                <Download className="h-4 w-4 text-muted-foreground" />
+                <span className="font-medium">{importableBadges.length}</span>
+                <span className="text-muted-foreground">available</span>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Search bar */}
+        <div className="flex gap-2">
+          <div className="relative flex-1 max-w-md">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input
+              ref={searchRef}
+              placeholder="Search badges by name...  /"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') doSearch()
+                if (e.key === 'Escape') {
+                  setSearchTerm('')
+                  searchRef.current?.blur()
+                }
+              }}
+              className="pl-9 pr-8"
+            />
+            {searchTerm && (
+              <button
+                type="button"
+                onClick={() => {
+                  setSearchTerm('')
+                  setActiveSearch('')
+                  fetchBadges('', 0, allHotels)
+                }}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+              >
+                <X className="h-3.5 w-3.5" />
+              </button>
+            )}
+          </div>
+          <Button onClick={doSearch} size="sm" disabled={loading}>
+            {loading ? (
+              <Loader2 className="w-4 h-4 animate-spin" />
+            ) : (
+              <Search className="w-4 h-4" />
+            )}
+          </Button>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant={allHotels ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => setAllHotels((v) => !v)}
+              >
+                <Globe className="w-4 h-4 mr-1" />
+                {allHotels ? 'All' : 'IT'}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>
+                {allHotels
+                  ? 'Showing all hotels — click for Italian only'
+                  : 'Showing Italian only — click for all hotels'}
+              </p>
+            </TooltipContent>
+          </Tooltip>
+        </div>
+
+        {/* Bulk actions */}
+        {importableBadges.length > 0 && (
+          <div className="flex items-center gap-2 flex-wrap">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={toggleSelectAll}
+              className="text-xs h-8"
+              disabled={batchImporting}
+            >
+              {selected.size === importableBadges.length
+                ? 'Deselect All'
+                : `Select All (${importableBadges.length})`}
+            </Button>
+            {selected.size > 0 && (
+              <Button size="sm" className="h-8" onClick={doBatchImport} disabled={batchImporting}>
+                {batchImporting ? (
+                  <Loader2 className="w-4 h-4 animate-spin mr-1" />
+                ) : (
+                  <Download className="w-4 h-4 mr-1" />
+                )}
+                Import {selected.size} selected
+              </Button>
+            )}
+          </div>
+        )}
+
+        {/* Error */}
+        {error && (
+          <div className="rounded-lg border px-4 py-3 text-sm bg-destructive/10 border-destructive/20 text-destructive flex items-center gap-2">
+            <AlertCircle className="w-4 h-4 shrink-0" />
+            {error}
+          </div>
+        )}
+
+        {/* Loading skeleton */}
+        {loading && badges.length === 0 && (
+          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
+            {Array.from({ length: 18 }).map((_, i) => (
+              // biome-ignore lint/suspicious/noArrayIndexKey: static skeleton placeholders
+              <div key={i} className="rounded-lg border bg-card p-3 animate-pulse">
+                <div className="h-12 w-12 bg-muted rounded mx-auto mb-2" />
+                <div className="h-4 bg-muted rounded w-3/4 mx-auto mb-1" />
+                <div className="h-3 bg-muted rounded w-1/2 mx-auto mb-2" />
+                <div className="h-7 bg-muted rounded" />
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Empty state */}
+        {!loading && badges.length === 0 && !error && (
+          <div className="text-center py-12 text-muted-foreground">
+            <BadgeCheck className="w-12 h-12 mx-auto mb-3 opacity-50" />
+            <p className="text-sm">No badges found{activeSearch ? ` for "${activeSearch}"` : ''}</p>
+            {!activeSearch && <p className="text-xs mt-1">Try searching by badge name or code</p>}
+          </div>
+        )}
+
+        {/* Badge grid */}
+        {badges.length > 0 && (
+          <div
+            className={cn(
+              'grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3',
+              loading && 'opacity-50',
+            )}
+          >
+            {badges.map((badge) => {
+              const isSelected = selected.has(badge.code)
+              return (
+                <div
+                  key={badge.code}
+                  className={cn(
+                    'rounded-lg border overflow-hidden bg-card group relative hover:border-border transition-all',
+                    badge.alreadyImported && 'shadow-[0_0_6px_rgba(34,197,94,0.15)]',
+                    isSelected && 'ring-2 ring-primary border-primary',
+                  )}
+                >
+                  {/* Checkbox for non-imported */}
+                  {!badge.alreadyImported && (
+                    <button
+                      type="button"
+                      onClick={() => toggleSelect(badge.code)}
+                      className={cn(
+                        'absolute top-1.5 left-1.5 z-10 w-5 h-5 rounded border-2 flex items-center justify-center transition-colors',
+                        isSelected
+                          ? 'bg-primary border-primary text-primary-foreground'
+                          : 'bg-background/80 border-muted-foreground/30 hover:border-muted-foreground',
+                      )}
+                    >
+                      {isSelected && <Check className="w-3 h-3" />}
+                    </button>
+                  )}
+
+                  {/* Badge image area */}
+                  <div className="flex items-center justify-center h-20 bg-accent/20">
+                    <img
+                      src={badge.url_habbo}
+                      alt={badge.code}
+                      className="image-pixelated drop-shadow-sm"
+                      style={{ maxHeight: 48, maxWidth: 48 }}
+                      onError={(e) => {
+                        const img = e.target as HTMLImageElement
+                        if (!img.dataset.fallback) {
+                          img.dataset.fallback = '1'
+                          img.src = badge.url_habboassets
+                        } else {
+                          img.style.opacity = '0.3'
+                        }
+                      }}
+                    />
+                  </div>
+
+                  {/* Info */}
+                  <div className="px-2.5 py-2 border-t space-y-1">
+                    <div className="text-xs font-bold truncate">{badge.code}</div>
+                    {badge.name && (
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <div className="text-[11px] text-muted-foreground truncate cursor-default">
+                            {badge.name}
+                          </div>
+                        </TooltipTrigger>
+                        <TooltipContent side="bottom" className="max-w-64">
+                          <p className="font-medium">{badge.name}</p>
+                          {badge.description && (
+                            <p className="text-muted-foreground text-xs mt-1">
+                              {badge.description}
+                            </p>
+                          )}
+                        </TooltipContent>
+                      </Tooltip>
+                    )}
+                    {allHotels && badge.hotel && (
+                      <Badge variant="outline" className="text-[9px] px-1 h-4">
+                        {badge.hotel.toUpperCase()}
+                      </Badge>
+                    )}
+
+                    {/* Action */}
+                    <div className="pt-1">
+                      {badge.alreadyImported ? (
+                        <div className="flex items-center gap-1">
+                          <Badge className="text-[10px] px-1.5 py-0 bg-emerald-500/15 text-emerald-500 border-0 gap-0.5 flex-1 justify-center">
+                            <Check className="w-2.5 h-2.5" />
+                            Imported
+                          </Badge>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-5 w-5 p-0 shrink-0"
+                            title="Edit badge name/description"
+                            onClick={() => setEditingCode(badge.code)}
+                          >
+                            <Pencil className="w-3 h-3" />
+                          </Button>
+                        </div>
+                      ) : (
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          className="w-full text-xs h-7"
+                          onClick={() => doImport(badge)}
+                          disabled={importingCode === badge.code || batchImporting}
+                        >
+                          {importingCode === badge.code ? (
+                            <Loader2 className="w-3 h-3 animate-spin mr-1" />
+                          ) : (
+                            <Download className="w-3 h-3 mr-1" />
+                          )}
+                          Import
+                        </Button>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        )}
+
+        {/* Pagination */}
+        {(offset > 0 || hasMore) && (
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-muted-foreground">Page {currentPage}</span>
+            <div className="flex gap-1">
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={offset <= 0 || loading}
+                onClick={() => goPage('prev')}
+              >
+                &larr; Prev
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={!hasMore || loading}
+                onClick={() => goPage('next')}
+              >
+                Next &rarr;
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Badge Editor Dialog */}
+        <BadgeEditorDialog
+          code={editingCode ?? ''}
+          open={!!editingCode}
+          onOpenChange={(open) => {
+            if (!open) setEditingCode(null)
+          }}
+        />
+      </div>
+    </TooltipProvider>
+  )
+}

src/app/admin/import/badges/loading.tsx

@@ -0,0 +1,21 @@
+import { Skeleton } from '@/components/ui/skeleton'
+
+export default function ImportBadgesLoading() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <Skeleton className="h-9 w-48" />
+        <Skeleton className="h-5 w-72 mt-2" />
+      </div>
+      <div className="rounded-lg border bg-card p-6 space-y-4">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <div key={i} className="space-y-2">
+            <Skeleton className="h-4 w-24" />
+            <Skeleton className="h-10 w-full" />
+          </div>
+        ))}
+        <Skeleton className="h-10 w-24 mt-4" />
+      </div>
+    </div>
+  )
+}

src/app/admin/import/badges/page.tsx

@@ -0,0 +1,12 @@
+import { redirect } from 'next/navigation'
+import { canAccess, getAdminContext, PERMS } from '@/lib/permissions'
+import { ImportBadgesClient } from './import-badges-client'
+
+export default async function ImportBadgesPage(_props: { params: Promise<{ locale: string }> }) {
+  const { session, permissions } = await getAdminContext()
+  if (!canAccess(permissions, PERMS.SETTINGS_EDIT, session.user.rank)) {
+    redirect('/admin')
+  }
+
+  return <ImportBadgesClient />
+}