Reapply "Add missing admin action files and navigation links"
This reverts commit 4d515bc400.
This commit is contained in:
Simo committed
1 parent
96ed768f14
commit
5b4228261a
338 files changed
+28143
-5948
No files matched your search
@@ -0,0 +1,887 @@
|
||||
'use client'
|
||||
|
||||
import {
|
||||
AlertCircle,
|
||||
Check,
|
||||
CloudDownload,
|
||||
Download,
|
||||
Loader2,
|
||||
Package,
|
||||
Pencil,
|
||||
Plus,
|
||||
Search,
|
||||
Trash2,
|
||||
X,
|
||||
} from 'lucide-react'
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { toast } from 'sonner'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
// ── Types ─────────────────────────────────────────────────────────────────────
|
||||
|
||||
interface CloneSource {
|
||||
id: string
|
||||
name: string
|
||||
furnidataUrl: string
|
||||
nitroBaseUrl: string
|
||||
iconBaseUrl: string
|
||||
}
|
||||
|
||||
interface FurniItem {
|
||||
classname: string
|
||||
name: string
|
||||
description?: string
|
||||
revision?: number
|
||||
category?: string
|
||||
itemType: 's' | 'i'
|
||||
xdim: number
|
||||
ydim: number
|
||||
present: boolean
|
||||
}
|
||||
|
||||
interface CloneStats {
|
||||
total: number
|
||||
present: number
|
||||
clonable: number
|
||||
}
|
||||
|
||||
interface PageMeta {
|
||||
page: number
|
||||
perPage: number
|
||||
total: number
|
||||
}
|
||||
|
||||
// ── Shared SSE reader (mirrors import-clothing-client.tsx) ────────────────────
|
||||
|
||||
async function runSseImport(
|
||||
url: string,
|
||||
body: unknown,
|
||||
onDone: (classname: string) => void,
|
||||
onComplete: (succeeded: number, failed: number) => void,
|
||||
): Promise<void> {
|
||||
const res = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
})
|
||||
if (!res.body) {
|
||||
toast.error('No response stream')
|
||||
return
|
||||
}
|
||||
const reader = res.body.getReader()
|
||||
const decoder = new TextDecoder()
|
||||
let buf = ''
|
||||
let succeeded = 0
|
||||
let failed = 0
|
||||
while (true) {
|
||||
const { value, done: streamDone } = await reader.read()
|
||||
if (streamDone) break
|
||||
buf += decoder.decode(value, { stream: true })
|
||||
const parts = buf.split('\n\n')
|
||||
buf = parts.pop() ?? ''
|
||||
for (const part of parts) {
|
||||
if (!part.startsWith('data: ')) continue
|
||||
const evt = JSON.parse(part.slice(6))
|
||||
if (evt.type === 'item_progress' && (evt.status === 'done' || evt.status === 'failed')) {
|
||||
onDone(evt.classname)
|
||||
}
|
||||
if (evt.type === 'batch_complete') {
|
||||
succeeded = evt.succeeded
|
||||
failed = evt.failed
|
||||
}
|
||||
}
|
||||
}
|
||||
onComplete(succeeded, failed)
|
||||
}
|
||||
|
||||
// ── Source form ───────────────────────────────────────────────────────────────
|
||||
|
||||
interface SourceFormProps {
|
||||
initial?: Partial<CloneSource>
|
||||
onSave: (src: Partial<CloneSource>) => Promise<void>
|
||||
onCancel: () => void
|
||||
saving: boolean
|
||||
}
|
||||
|
||||
function SourceForm({ initial, onSave, onCancel, saving }: SourceFormProps) {
|
||||
const [name, setName] = useState(initial?.name ?? '')
|
||||
const [furnidataUrl, setFurnidataUrl] = useState(initial?.furnidataUrl ?? '')
|
||||
const [nitroBaseUrl, setNitroBaseUrl] = useState(initial?.nitroBaseUrl ?? '')
|
||||
const [iconBaseUrl, setIconBaseUrl] = useState(initial?.iconBaseUrl ?? '')
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
await onSave({ id: initial?.id, name, furnidataUrl, nitroBaseUrl, iconBaseUrl })
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-3 rounded-lg border p-4 bg-card">
|
||||
<div className="text-sm font-medium">{initial?.id ? 'Edit Source' : 'Add Source'}</div>
|
||||
<div className="grid gap-2">
|
||||
<Input
|
||||
placeholder="Name (e.g. HotelX)"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
placeholder="FurnitureData URL (e.g. https://x/FurnitureData.json)"
|
||||
value={furnidataUrl}
|
||||
onChange={(e) => setFurnidataUrl(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
placeholder="Nitro base URL (e.g. https://x/bundled/furniture)"
|
||||
value={nitroBaseUrl}
|
||||
onChange={(e) => setNitroBaseUrl(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
placeholder="Icon base URL (e.g. https://x/icons)"
|
||||
value={iconBaseUrl}
|
||||
onChange={(e) => setIconBaseUrl(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button type="submit" size="sm" disabled={saving}>
|
||||
{saving ? <Loader2 className="w-3 h-3 animate-spin mr-1" /> : null}
|
||||
Save
|
||||
</Button>
|
||||
<Button type="button" variant="outline" size="sm" onClick={onCancel} disabled={saving}>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Sources manager ───────────────────────────────────────────────────────────
|
||||
|
||||
interface SourcesManagerProps {
|
||||
sources: CloneSource[]
|
||||
activeSourceId: string | null
|
||||
onSelect: (src: CloneSource) => void
|
||||
onRefresh: () => Promise<void>
|
||||
}
|
||||
|
||||
function SourcesManager({ sources, activeSourceId, onSelect, onRefresh }: SourcesManagerProps) {
|
||||
const [showForm, setShowForm] = useState(false)
|
||||
const [editSrc, setEditSrc] = useState<CloneSource | null>(null)
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [deletingId, setDeletingId] = useState<string | null>(null)
|
||||
|
||||
async function handleSave(src: Partial<CloneSource>) {
|
||||
setSaving(true)
|
||||
try {
|
||||
const res = await fetch('/api/admin/import/clone', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(src),
|
||||
})
|
||||
const data = await res.json()
|
||||
if (!res.ok) {
|
||||
toast.error(data.error || 'Save failed')
|
||||
return
|
||||
}
|
||||
toast.success(src.id ? 'Source updated' : 'Source added')
|
||||
setShowForm(false)
|
||||
setEditSrc(null)
|
||||
await onRefresh()
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(src: CloneSource) {
|
||||
setDeletingId(src.id)
|
||||
try {
|
||||
const res = await fetch(`/api/admin/import/clone?id=${encodeURIComponent(src.id)}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
const data = await res.json()
|
||||
if (!res.ok) {
|
||||
toast.error(data.error || 'Delete failed')
|
||||
return
|
||||
}
|
||||
toast.success(`${src.name} removed`)
|
||||
await onRefresh()
|
||||
} finally {
|
||||
setDeletingId(null)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-muted-foreground">Clone Sources</span>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="h-7 text-xs"
|
||||
onClick={() => {
|
||||
setEditSrc(null)
|
||||
setShowForm(true)
|
||||
}}
|
||||
>
|
||||
<Plus className="w-3 h-3 mr-1" />
|
||||
Add Source
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{showForm && !editSrc && (
|
||||
<SourceForm onSave={handleSave} onCancel={() => setShowForm(false)} saving={saving} />
|
||||
)}
|
||||
|
||||
{sources.length === 0 && !showForm && (
|
||||
<div className="text-center py-6 text-muted-foreground text-sm">
|
||||
<CloudDownload className="w-8 h-8 mx-auto mb-2 opacity-40" />
|
||||
No sources yet. Add one to start cloning furni from another hotel.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{sources.map((src) => (
|
||||
<div key={src.id}>
|
||||
{editSrc?.id === src.id ? (
|
||||
<SourceForm
|
||||
initial={src}
|
||||
onSave={handleSave}
|
||||
onCancel={() => setEditSrc(null)}
|
||||
saving={saving}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className={cn(
|
||||
'w-full rounded-lg border px-3 py-2.5 flex items-center gap-2 transition-colors hover:border-border',
|
||||
activeSourceId === src.id && 'border-primary ring-1 ring-primary bg-primary/5',
|
||||
)}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="flex-1 min-w-0 flex items-center gap-2 text-left cursor-pointer"
|
||||
onClick={() => onSelect(src)}
|
||||
>
|
||||
<CloudDownload className="w-4 h-4 text-muted-foreground shrink-0" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm font-medium truncate">{src.name}</div>
|
||||
<div className="text-xs text-muted-foreground truncate">{src.furnidataUrl}</div>
|
||||
</div>
|
||||
</button>
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-6 w-6 p-0"
|
||||
title="Edit source"
|
||||
onClick={() => {
|
||||
setEditSrc(src)
|
||||
setShowForm(false)
|
||||
}}
|
||||
>
|
||||
<Pencil className="w-3 h-3" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-6 w-6 p-0 text-destructive hover:text-destructive"
|
||||
title="Delete source"
|
||||
disabled={deletingId === src.id}
|
||||
onClick={() => handleDelete(src)}
|
||||
>
|
||||
{deletingId === src.id ? (
|
||||
<Loader2 className="w-3 h-3 animate-spin" />
|
||||
) : (
|
||||
<Trash2 className="w-3 h-3" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Furni icon with fallback ──────────────────────────────────────────────────
|
||||
|
||||
function FurniIcon({
|
||||
sourceId,
|
||||
iconBaseUrl,
|
||||
classname,
|
||||
}: {
|
||||
sourceId: string
|
||||
iconBaseUrl: string
|
||||
classname: string
|
||||
}) {
|
||||
// 0 = source's standalone icon, 1 = icon extracted from the .nitro (our
|
||||
// endpoint), 2 = give up and show a placeholder.
|
||||
const [stage, setStage] = useState(0)
|
||||
if (stage >= 2) {
|
||||
return <Package className="w-8 h-8 text-muted-foreground/50" />
|
||||
}
|
||||
const src =
|
||||
stage === 0
|
||||
? `${iconBaseUrl}/${classname}_icon.png`
|
||||
: `/api/admin/import/clone/icon?source=${encodeURIComponent(sourceId)}&classname=${encodeURIComponent(classname)}`
|
||||
return (
|
||||
// biome-ignore lint/performance/noImgElement: remote icon from clone source, not a Next asset
|
||||
<img
|
||||
key={stage}
|
||||
src={src}
|
||||
alt={classname}
|
||||
className="max-h-full max-w-full object-contain image-pixelated"
|
||||
onError={() => setStage((s) => s + 1)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Furni grid view ───────────────────────────────────────────────────────────
|
||||
|
||||
interface FurniGridProps {
|
||||
source: CloneSource
|
||||
}
|
||||
|
||||
const PER_PAGE = 50
|
||||
|
||||
function FurniGrid({ source }: FurniGridProps) {
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
const [activeSearch, setActiveSearch] = useState('')
|
||||
const [items, setItems] = useState<FurniItem[]>([])
|
||||
const [stats, setStats] = useState<CloneStats | null>(null)
|
||||
const [meta, setMeta] = useState<PageMeta | null>(null)
|
||||
const [page, setPage] = useState(1)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [selected, setSelected] = useState<Set<string>>(new Set())
|
||||
const [batchProgress, setBatchProgress] = useState<{ done: number; total: number } | null>(null)
|
||||
const [busyClassname, setBusyClassname] = useState<string | null>(null)
|
||||
const [filter, setFilter] = useState<'all' | 'missing' | 'present'>('all')
|
||||
|
||||
const fetchItems = useCallback(
|
||||
async (search: string, pageNum: number, filterVal: 'all' | 'missing' | 'present' = 'all') => {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
source: source.id,
|
||||
page: String(pageNum),
|
||||
perPage: String(PER_PAGE),
|
||||
})
|
||||
if (search) params.set('search', search)
|
||||
if (filterVal !== 'all') params.set('filter', filterVal)
|
||||
const res = await fetch(`/api/admin/import/clone?${params}`)
|
||||
const data = await res.json()
|
||||
if (!res.ok) {
|
||||
setError(data.error || 'Failed to load')
|
||||
return
|
||||
}
|
||||
setItems(data.items || [])
|
||||
setMeta(data.meta || null)
|
||||
setStats(data.stats || null)
|
||||
setSelected(new Set())
|
||||
} catch {
|
||||
setError('Network error')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
},
|
||||
[source.id],
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
setPage(1)
|
||||
setSearchTerm('')
|
||||
setActiveSearch('')
|
||||
setItems([])
|
||||
setStats(null)
|
||||
setMeta(null)
|
||||
setFilter('all')
|
||||
fetchItems('', 1, 'all')
|
||||
}, [fetchItems])
|
||||
|
||||
function doSearch() {
|
||||
setActiveSearch(searchTerm)
|
||||
setPage(1)
|
||||
fetchItems(searchTerm, 1, filter)
|
||||
}
|
||||
|
||||
function goPage(dir: 'prev' | 'next') {
|
||||
const next = dir === 'next' ? page + 1 : Math.max(1, page - 1)
|
||||
setPage(next)
|
||||
fetchItems(activeSearch, next, filter)
|
||||
}
|
||||
|
||||
function changeFilter(f: 'all' | 'missing' | 'present') {
|
||||
setFilter(f)
|
||||
setPage(1)
|
||||
fetchItems(activeSearch, 1, f)
|
||||
}
|
||||
|
||||
const importable = items.filter((it) => !it.present)
|
||||
const total = meta?.total ?? 0
|
||||
const lastPage = Math.max(Math.ceil(total / PER_PAGE), 1)
|
||||
|
||||
function toggle(classname: string) {
|
||||
setSelected((prev) => {
|
||||
const n = new Set(prev)
|
||||
if (n.has(classname)) n.delete(classname)
|
||||
else n.add(classname)
|
||||
return n
|
||||
})
|
||||
}
|
||||
|
||||
function markDone(classname: string) {
|
||||
setItems((prev) =>
|
||||
prev.map((it) => (it.classname === classname ? { ...it, present: true } : it)),
|
||||
)
|
||||
}
|
||||
|
||||
async function cloneViaSse(toClone: FurniItem[]) {
|
||||
setBatchProgress({ done: 0, total: toClone.length })
|
||||
let done = 0
|
||||
await runSseImport(
|
||||
'/api/admin/import/clone/batch',
|
||||
{ sourceId: source.id, classnames: toClone.map((it) => it.classname), concurrency: 2 },
|
||||
(classname) => {
|
||||
done++
|
||||
markDone(classname)
|
||||
setBatchProgress({ done, total: toClone.length })
|
||||
},
|
||||
(succeeded, failed) => {
|
||||
setBatchProgress(null)
|
||||
setSelected(new Set())
|
||||
if (succeeded > 0) toast.success(`${succeeded} furni cloned`)
|
||||
if (failed > 0) toast.error(`${failed} failed`)
|
||||
// Refresh stats after batch
|
||||
fetchItems(activeSearch, page, filter)
|
||||
},
|
||||
)
|
||||
setBatchProgress(null)
|
||||
}
|
||||
|
||||
async function cloneOne(it: FurniItem) {
|
||||
setBusyClassname(it.classname)
|
||||
try {
|
||||
await cloneViaSse([it])
|
||||
} finally {
|
||||
setBusyClassname(null)
|
||||
}
|
||||
}
|
||||
|
||||
async function cloneSelected() {
|
||||
const toClone = items.filter((it) => selected.has(it.classname) && !it.present)
|
||||
if (toClone.length === 0) return
|
||||
await cloneViaSse(toClone)
|
||||
}
|
||||
|
||||
// Clone EVERY not-yet-present furni from the source (across all pages),
|
||||
// in chunks of 400 to stay under the batch endpoint's 500 cap.
|
||||
async function cloneAll() {
|
||||
let names: string[] = []
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/admin/import/clone?source=${encodeURIComponent(source.id)}&action=clonable`,
|
||||
)
|
||||
const data = await res.json()
|
||||
if (!res.ok) {
|
||||
toast.error(data.error || 'Failed to load clonable list')
|
||||
return
|
||||
}
|
||||
names = data.classnames || []
|
||||
} catch {
|
||||
toast.error('Network error')
|
||||
return
|
||||
}
|
||||
if (names.length === 0) {
|
||||
toast.info('Nothing to clone — everything is already present')
|
||||
return
|
||||
}
|
||||
if (
|
||||
!window.confirm(
|
||||
`Clone ALL ${names.length} furni from "${source.name}"? This can take a while.`,
|
||||
)
|
||||
) {
|
||||
return
|
||||
}
|
||||
const CHUNK = 400
|
||||
setBatchProgress({ done: 0, total: names.length })
|
||||
let done = 0
|
||||
let okCount = 0
|
||||
let failCount = 0
|
||||
for (let i = 0; i < names.length; i += CHUNK) {
|
||||
const chunk = names.slice(i, i + CHUNK)
|
||||
await runSseImport(
|
||||
'/api/admin/import/clone/batch',
|
||||
{ sourceId: source.id, classnames: chunk, concurrency: 2 },
|
||||
(classname) => {
|
||||
done++
|
||||
markDone(classname)
|
||||
setBatchProgress({ done, total: names.length })
|
||||
},
|
||||
(succeeded, failed) => {
|
||||
okCount += succeeded
|
||||
failCount += failed
|
||||
},
|
||||
)
|
||||
}
|
||||
setBatchProgress(null)
|
||||
setSelected(new Set())
|
||||
if (okCount > 0) toast.success(`${okCount} furni cloned`)
|
||||
if (failCount > 0) toast.error(`${failCount} failed`)
|
||||
fetchItems(activeSearch, page, filter)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Stats bar */}
|
||||
{stats && (
|
||||
<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">{stats.total}</span>
|
||||
<span className="text-muted-foreground">total</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 text-sm">
|
||||
<Check className="h-4 w-4 text-emerald-500" />
|
||||
<span className="font-medium text-emerald-600">{stats.present}</span>
|
||||
<span className="text-muted-foreground">present</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 text-sm">
|
||||
<Download className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="font-medium">{stats.clonable}</span>
|
||||
<span className="text-muted-foreground">clonable</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Search bar */}
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<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
|
||||
placeholder="Search by classname or name…"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') doSearch()
|
||||
if (e.key === 'Escape') {
|
||||
setSearchTerm('')
|
||||
setActiveSearch('')
|
||||
setPage(1)
|
||||
fetchItems('', 1, filter)
|
||||
}
|
||||
}}
|
||||
className="pl-9 pr-8"
|
||||
/>
|
||||
{searchTerm && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSearchTerm('')
|
||||
setActiveSearch('')
|
||||
setPage(1)
|
||||
fetchItems('', 1, filter)
|
||||
}}
|
||||
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>
|
||||
</div>
|
||||
|
||||
{/* Filter: all / not-present / present */}
|
||||
<div className="flex items-center gap-1 flex-wrap">
|
||||
{(
|
||||
[
|
||||
{ key: 'all', label: 'All', count: stats?.total },
|
||||
{ key: 'missing', label: "Not present (don't have)", count: stats?.clonable },
|
||||
{ key: 'present', label: 'Present', count: stats?.present },
|
||||
] as const
|
||||
).map((f) => (
|
||||
<Button
|
||||
key={f.key}
|
||||
type="button"
|
||||
size="sm"
|
||||
variant={filter === f.key ? 'default' : 'outline'}
|
||||
className="h-7 text-xs"
|
||||
disabled={loading || !!batchProgress}
|
||||
onClick={() => changeFilter(f.key)}
|
||||
>
|
||||
{f.label}
|
||||
{typeof f.count === 'number' ? ` (${f.count})` : ''}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Bulk actions */}
|
||||
{(importable.length > 0 || (stats?.clonable ?? 0) > 0) && (
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{importable.length > 0 && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-xs h-8"
|
||||
disabled={!!batchProgress}
|
||||
onClick={() =>
|
||||
setSelected((prev) =>
|
||||
prev.size === importable.length
|
||||
? new Set()
|
||||
: new Set(importable.map((it) => it.classname)),
|
||||
)
|
||||
}
|
||||
>
|
||||
{selected.size === importable.length
|
||||
? 'Deselect page'
|
||||
: `Select page (${importable.length})`}
|
||||
</Button>
|
||||
)}
|
||||
{selected.size > 0 && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-8"
|
||||
onClick={cloneSelected}
|
||||
disabled={!!batchProgress}
|
||||
>
|
||||
{batchProgress ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin mr-1" />
|
||||
) : (
|
||||
<CloudDownload className="w-4 h-4 mr-1" />
|
||||
)}
|
||||
Clone {selected.size} selected
|
||||
</Button>
|
||||
)}
|
||||
{(stats?.clonable ?? 0) > 0 && (
|
||||
<Button size="sm" className="h-8" onClick={cloneAll} disabled={!!batchProgress}>
|
||||
{batchProgress ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin mr-1" />
|
||||
) : (
|
||||
<CloudDownload className="w-4 h-4 mr-1" />
|
||||
)}
|
||||
Clone all clonable ({stats?.clonable})
|
||||
</Button>
|
||||
)}
|
||||
{batchProgress && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{batchProgress.done}/{batchProgress.total}
|
||||
</span>
|
||||
)}
|
||||
</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>
|
||||
)}
|
||||
|
||||
{/* Empty state */}
|
||||
{!loading && items.length === 0 && !error && (
|
||||
<div className="text-center py-12 text-muted-foreground">
|
||||
<CloudDownload className="w-12 h-12 mx-auto mb-3 opacity-50" />
|
||||
<p className="text-sm">No furni found{activeSearch ? ` for "${activeSearch}"` : ''}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Grid */}
|
||||
{items.length > 0 && (
|
||||
<div
|
||||
className={cn(
|
||||
'grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3',
|
||||
loading && 'opacity-50',
|
||||
)}
|
||||
>
|
||||
{items.map((it) => {
|
||||
const isSelected = selected.has(it.classname)
|
||||
return (
|
||||
<div
|
||||
key={it.classname}
|
||||
className={cn(
|
||||
'group rounded-lg border overflow-hidden bg-card relative hover:border-border transition-all',
|
||||
it.present && 'shadow-[0_0_6px_rgba(34,197,94,0.15)]',
|
||||
isSelected && 'ring-2 ring-primary border-primary',
|
||||
)}
|
||||
>
|
||||
{!it.present && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggle(it.classname)}
|
||||
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>
|
||||
)}
|
||||
{/* Type badge */}
|
||||
<div className="absolute top-1.5 right-1.5 z-10">
|
||||
<Badge variant="outline" className="text-[9px] px-1 py-0 bg-background/80">
|
||||
{it.itemType === 's' ? 'floor' : 'wall'}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="relative flex items-center justify-center h-28 bg-accent/20">
|
||||
<FurniIcon
|
||||
sourceId={source.id}
|
||||
iconBaseUrl={source.iconBaseUrl}
|
||||
classname={it.classname}
|
||||
/>
|
||||
{/* Hover detail tooltip */}
|
||||
<div className="absolute bottom-1 left-1 right-1 z-10 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
|
||||
<div className="bg-black/80 backdrop-blur-sm rounded px-2 py-1.5 text-[10px] text-white space-y-0.5">
|
||||
{it.description ? <p className="truncate">{it.description}</p> : null}
|
||||
<div className="flex gap-2 text-white/70">
|
||||
{it.revision ? <span>Rev: {it.revision}</span> : null}
|
||||
<span>{it.itemType === 's' ? 'Floor' : 'Wall'}</span>
|
||||
<span>
|
||||
{it.xdim}×{it.ydim}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-2.5 py-2 border-t space-y-1">
|
||||
<div className="text-xs font-bold truncate" title={it.name}>
|
||||
{it.name || it.classname}
|
||||
</div>
|
||||
<div className="text-[10px] text-muted-foreground truncate" title={it.classname}>
|
||||
{it.classname}
|
||||
</div>
|
||||
<div className="text-[10px] text-muted-foreground truncate">
|
||||
{it.itemType === 's' ? 'Floor' : 'Wall'} · {it.category || 'other'}
|
||||
</div>
|
||||
<div className="pt-1">
|
||||
{it.present ? (
|
||||
<Badge className="text-[10px] px-1.5 py-0 bg-emerald-500/15 text-emerald-500 border-0 gap-0.5 w-full justify-center">
|
||||
<Check className="w-2.5 h-2.5" />
|
||||
Present
|
||||
</Badge>
|
||||
) : (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="w-full text-xs h-7"
|
||||
disabled={busyClassname === it.classname || !!batchProgress}
|
||||
onClick={() => cloneOne(it)}
|
||||
>
|
||||
{busyClassname === it.classname ? (
|
||||
<Loader2 className="w-3 h-3 animate-spin mr-1" />
|
||||
) : (
|
||||
<CloudDownload className="w-3 h-3 mr-1" />
|
||||
)}
|
||||
Clone
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pagination */}
|
||||
{total > PER_PAGE && (
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Page {page} / {lastPage}
|
||||
</span>
|
||||
<div className="flex gap-1">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={page <= 1 || loading}
|
||||
onClick={() => goPage('prev')}
|
||||
>
|
||||
← Prev
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={page >= lastPage || loading}
|
||||
onClick={() => goPage('next')}
|
||||
>
|
||||
Next →
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Root component ────────────────────────────────────────────────────────────
|
||||
|
||||
export function ImportCloneClient() {
|
||||
const [sources, setSources] = useState<CloneSource[]>([])
|
||||
const [activeSource, setActiveSource] = useState<CloneSource | null>(null)
|
||||
const [loadingSources, setLoadingSources] = useState(true)
|
||||
|
||||
const fetchSources = useCallback(async () => {
|
||||
try {
|
||||
const res = await fetch('/api/admin/import/clone?action=sources')
|
||||
const data = await res.json()
|
||||
if (res.ok) {
|
||||
setSources(data.sources || [])
|
||||
}
|
||||
} catch {
|
||||
/* ignore */
|
||||
} finally {
|
||||
setLoadingSources(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
fetchSources()
|
||||
}, [fetchSources])
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Sources panel */}
|
||||
<div className="rounded-xl border bg-card p-4 space-y-4">
|
||||
{loadingSources ? (
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
Loading sources…
|
||||
</div>
|
||||
) : (
|
||||
<SourcesManager
|
||||
sources={sources}
|
||||
activeSourceId={activeSource?.id ?? null}
|
||||
onSelect={setActiveSource}
|
||||
onRefresh={fetchSources}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Furni grid panel */}
|
||||
{activeSource ? (
|
||||
<div className="rounded-xl border bg-card p-4">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<CloudDownload className="w-4 h-4 text-muted-foreground" />
|
||||
<span className="text-sm font-medium">{activeSource.name}</span>
|
||||
</div>
|
||||
<FurniGrid source={activeSource} />
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-xl border bg-card p-8 text-center text-muted-foreground text-sm">
|
||||
Select a source above to browse and clone furni.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import { redirect } from 'next/navigation'
|
||||
import { canAccess, getAdminContext, PERMS } from '@/lib/permissions'
|
||||
import { ImportCloneClient } from './import-clone-client'
|
||||
|
||||
export default async function ImportClonePage(_props: { params: Promise<{ locale: string }> }) {
|
||||
const { session, permissions } = await getAdminContext()
|
||||
if (!canAccess(permissions, PERMS.ASSETS_IMPORT, session.user.rank)) {
|
||||
redirect('/admin')
|
||||
}
|
||||
return <ImportCloneClient />
|
||||
}
|
||||
Reference in new issue
Block a user