389 lines
16 KiB
TypeScript
389 lines
16 KiB
TypeScript
import { useState } from 'react'
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import {
|
|
Library, Search, Box, CheckCircle2, Clock, AlertTriangle,
|
|
LayoutGrid, List, Trash2, X,
|
|
} from 'lucide-react'
|
|
import { toast } from 'sonner'
|
|
import { listProducts, deleteProduct } from '../api/products'
|
|
import type { Product } from '../api/products'
|
|
|
|
const CATEGORY_LABELS: Record<string, string> = {
|
|
TRB: 'TRB',
|
|
Kugellager: 'Kugellager',
|
|
CRB: 'CRB',
|
|
Gleitlager: 'Gleitlager',
|
|
SRB_TORB: 'SRB/TORB',
|
|
Linear_schiene: 'Linear',
|
|
Anschlagplatten: 'Anschlag',
|
|
}
|
|
|
|
function CadStatusChip({ status }: { status: string | null }) {
|
|
if (!status) return (
|
|
<span className="text-xs px-2 py-0.5 rounded-full bg-surface-muted text-content-muted">no STEP</span>
|
|
)
|
|
if (status === 'completed') return (
|
|
<span className="text-xs px-2 py-0.5 rounded-full bg-status-success-bg text-status-success-text flex items-center gap-1">
|
|
<CheckCircle2 size={11} /> ready
|
|
</span>
|
|
)
|
|
if (status === 'processing') return (
|
|
<span className="text-xs px-2 py-0.5 rounded-full bg-status-info-bg text-status-info-text flex items-center gap-1">
|
|
<Clock size={11} /> processing
|
|
</span>
|
|
)
|
|
if (status === 'failed') return (
|
|
<span className="text-xs px-2 py-0.5 rounded-full bg-status-error-bg text-status-error-text flex items-center gap-1">
|
|
<AlertTriangle size={11} /> failed
|
|
</span>
|
|
)
|
|
return (
|
|
<span className="text-xs px-2 py-0.5 rounded-full bg-status-warning-bg text-status-warning-text">{status}</span>
|
|
)
|
|
}
|
|
|
|
function ProductCard({ product, onClick, selected, onSelect }: {
|
|
product: Product
|
|
onClick: () => void
|
|
selected: boolean
|
|
onSelect: (checked: boolean) => void
|
|
}) {
|
|
return (
|
|
<div
|
|
className={`card cursor-pointer hover:shadow-md transition-shadow overflow-hidden relative ${
|
|
selected ? 'ring-2 ring-accent' : ''
|
|
}`}
|
|
onClick={onClick}
|
|
>
|
|
{/* Checkbox overlay */}
|
|
<div
|
|
className="absolute top-2 left-2 z-10"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={selected}
|
|
onChange={(e) => onSelect(e.target.checked)}
|
|
className="w-4 h-4 cursor-pointer"
|
|
/>
|
|
</div>
|
|
|
|
{/* Thumbnail */}
|
|
<div className="h-40 bg-surface-muted flex items-center justify-center overflow-hidden">
|
|
{(product.render_image_url || product.thumbnail_url) ? (
|
|
<img
|
|
src={product.render_image_url || product.thumbnail_url!}
|
|
alt={product.name || product.pim_id}
|
|
className="h-full w-full object-contain"
|
|
/>
|
|
) : (
|
|
<Box size={48} className="text-content-muted" />
|
|
)}
|
|
</div>
|
|
|
|
<div className="p-3 space-y-1">
|
|
<span className="inline-block text-xs font-mono bg-surface-muted text-content-secondary px-2 py-0.5 rounded">
|
|
{product.pim_id}
|
|
</span>
|
|
|
|
<p className="font-semibold text-content text-sm leading-tight truncate" title={product.name || ''}>
|
|
{product.name || <span className="text-content-muted italic">no name</span>}
|
|
</p>
|
|
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
{product.category_key && (
|
|
<span className="text-xs px-2 py-0.5 rounded-full bg-accent-light text-accent font-medium">
|
|
{CATEGORY_LABELS[product.category_key] || product.category_key}
|
|
</span>
|
|
)}
|
|
{product.baureihe && (
|
|
<span className="text-xs text-content-muted truncate">{product.baureihe}</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="pt-1 flex items-center gap-2">
|
|
<CadStatusChip status={product.processing_status} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function ProductLibraryPage() {
|
|
const navigate = useNavigate()
|
|
const qc = useQueryClient()
|
|
const [search, setSearch] = useState('')
|
|
const [categoryFilter, setCategoryFilter] = useState('')
|
|
const [hasCadFilter, setHasCadFilter] = useState<string>('')
|
|
const [materialsFilter, setMaterialsFilter] = useState('')
|
|
const [view, setView] = useState<'grid' | 'table'>('grid')
|
|
const [selected, setSelected] = useState<Set<string>>(new Set())
|
|
|
|
const { data: products, isLoading } = useQuery({
|
|
queryKey: ['products', { search, categoryFilter, hasCadFilter, materialsFilter }],
|
|
queryFn: () => listProducts({
|
|
q: search || undefined,
|
|
category_key: categoryFilter || undefined,
|
|
has_cad: hasCadFilter === 'yes' ? true : hasCadFilter === 'no' ? false : undefined,
|
|
materials_filter: materialsFilter || undefined,
|
|
limit: 200,
|
|
}),
|
|
})
|
|
|
|
// ── Selection helpers ──────────────────────────────────────────────────
|
|
const toggleOne = (id: string) => {
|
|
setSelected((prev) => {
|
|
const n = new Set(prev)
|
|
n.has(id) ? n.delete(id) : n.add(id)
|
|
return n
|
|
})
|
|
}
|
|
|
|
const allSelected =
|
|
!!products?.length && products.every((p) => selected.has(p.id))
|
|
|
|
const toggleAll = () => {
|
|
if (!products) return
|
|
setSelected(allSelected ? new Set() : new Set(products.map((p) => p.id)))
|
|
}
|
|
|
|
// ── Bulk delete ────────────────────────────────────────────────────────
|
|
const deleteMut = useMutation({
|
|
mutationFn: async (ids: string[]) => {
|
|
await Promise.all(ids.map((id) => deleteProduct(id, true)))
|
|
},
|
|
onSuccess: (_, ids) => {
|
|
toast.success(`${ids.length} product${ids.length > 1 ? 's' : ''} deleted`)
|
|
setSelected(new Set())
|
|
qc.invalidateQueries({ queryKey: ['products'] })
|
|
},
|
|
onError: (e: any) => toast.error(e.response?.data?.detail || 'Delete failed'),
|
|
})
|
|
|
|
const handleDeleteSelected = () => {
|
|
const ids = [...selected]
|
|
if (!ids.length) return
|
|
if (!confirm(`Delete ${ids.length} product${ids.length > 1 ? 's' : ''}? This cannot be undone.`)) return
|
|
deleteMut.mutate(ids)
|
|
}
|
|
|
|
return (
|
|
<div className="p-8 pb-24">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div className="flex items-center gap-3">
|
|
<Library size={22} className="text-accent" />
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-content">Product Library</h1>
|
|
<p className="text-sm text-content-muted">
|
|
{products ? `${products.length} products` : 'Loading\u2026'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* View toggle */}
|
|
<div className="flex border border-border-default rounded-md overflow-hidden">
|
|
<button
|
|
onClick={() => setView('grid')}
|
|
title="Grid view"
|
|
className={`px-2.5 py-1.5 text-sm flex items-center transition-colors ${
|
|
view === 'grid'
|
|
? 'text-white'
|
|
: 'bg-surface text-content-muted hover:bg-surface-hover'
|
|
}`}
|
|
style={view === 'grid' ? { backgroundColor: 'var(--color-accent)' } : undefined}
|
|
>
|
|
<LayoutGrid size={16} />
|
|
</button>
|
|
<button
|
|
onClick={() => setView('table')}
|
|
title="Table view"
|
|
className={`px-2.5 py-1.5 text-sm flex items-center transition-colors ${
|
|
view === 'table'
|
|
? 'text-white'
|
|
: 'bg-surface text-content-muted hover:bg-surface-hover'
|
|
}`}
|
|
style={view === 'table' ? { backgroundColor: 'var(--color-accent)' } : undefined}
|
|
>
|
|
<List size={16} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Filters */}
|
|
<div className="flex items-center gap-3 mb-6 flex-wrap">
|
|
<div className="relative flex-1 min-w-48 max-w-sm">
|
|
<Search size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-content-muted" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search by PIM-ID or name\u2026"
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
className="w-full pl-9 pr-3 py-2 border border-border-default rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-accent"
|
|
/>
|
|
</div>
|
|
|
|
<select
|
|
value={categoryFilter}
|
|
onChange={(e) => setCategoryFilter(e.target.value)}
|
|
className="px-3 py-2 border border-border-default rounded-md text-sm focus:outline-none"
|
|
title="Filter by product category (TRB, Kugellager, CRB, etc.)"
|
|
>
|
|
<option value="">All categories</option>
|
|
{Object.entries(CATEGORY_LABELS).map(([k, v]) => (
|
|
<option key={k} value={k}>{v}</option>
|
|
))}
|
|
</select>
|
|
|
|
<select
|
|
value={hasCadFilter}
|
|
onChange={(e) => setHasCadFilter(e.target.value)}
|
|
className="px-3 py-2 border border-border-default rounded-md text-sm focus:outline-none"
|
|
title="Filter by STEP file status — only products with an uploaded STEP file can be rendered"
|
|
>
|
|
<option value="">All CAD status</option>
|
|
<option value="yes">Has STEP</option>
|
|
<option value="no">No STEP</option>
|
|
</select>
|
|
|
|
<select
|
|
value={materialsFilter}
|
|
onChange={(e) => setMaterialsFilter(e.target.value)}
|
|
className="px-3 py-2 border border-border-default rounded-md text-sm focus:outline-none"
|
|
title="Filter by material assignment status — complete = all CAD parts have a material assigned"
|
|
>
|
|
<option value="">All materials</option>
|
|
<option value="complete">✓ All materials assigned</option>
|
|
<option value="incomplete">⚠ Incomplete materials</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
{isLoading ? (
|
|
<div className="text-center py-16 text-content-muted">Loading products\u2026</div>
|
|
) : !products?.length ? (
|
|
<div className="text-center py-16 text-content-muted">
|
|
<Library size={48} className="mx-auto mb-3 opacity-30" />
|
|
<p>No products found</p>
|
|
<p className="text-sm mt-1">Upload an Excel file to populate the library</p>
|
|
</div>
|
|
) : view === 'grid' ? (
|
|
/* ── Grid view ─────────────────────────────────────────────────── */
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
|
{products.map((product) => (
|
|
<ProductCard
|
|
key={product.id}
|
|
product={product}
|
|
onClick={() => navigate(`/products/${product.id}`)}
|
|
selected={selected.has(product.id)}
|
|
onSelect={() => toggleOne(product.id)}
|
|
/>
|
|
))}
|
|
</div>
|
|
) : (
|
|
/* ── Table view ────────────────────────────────────────────────── */
|
|
<div className="card overflow-auto">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b border-border-default text-left bg-surface-alt">
|
|
<th className="px-4 py-3 w-10">
|
|
<input
|
|
type="checkbox"
|
|
checked={allSelected}
|
|
onChange={toggleAll}
|
|
className="w-4 h-4 cursor-pointer"
|
|
title="Select / deselect all visible products"
|
|
/>
|
|
</th>
|
|
<th className="px-4 py-3 w-16"></th>
|
|
<th className="px-4 py-3 font-medium text-content-secondary">PIM-ID</th>
|
|
<th className="px-4 py-3 font-medium text-content-secondary">Name</th>
|
|
<th className="px-4 py-3 font-medium text-content-secondary">Category</th>
|
|
<th className="px-4 py-3 font-medium text-content-secondary">Baureihe</th>
|
|
<th className="px-4 py-3 font-medium text-content-secondary">CAD Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{products.map((product) => (
|
|
<tr
|
|
key={product.id}
|
|
className={`border-b border-border-light hover:bg-surface-hover cursor-pointer transition-colors ${
|
|
selected.has(product.id) ? 'bg-status-success-bg' : ''
|
|
}`}
|
|
onClick={() => navigate(`/products/${product.id}`)}
|
|
>
|
|
<td className="px-4 py-2.5" onClick={(e) => e.stopPropagation()}>
|
|
<input
|
|
type="checkbox"
|
|
checked={selected.has(product.id)}
|
|
onChange={() => toggleOne(product.id)}
|
|
className="w-4 h-4 cursor-pointer"
|
|
/>
|
|
</td>
|
|
<td className="px-4 py-2.5">
|
|
<div className="w-10 h-10 bg-surface-muted rounded flex items-center justify-center overflow-hidden">
|
|
{(product.render_image_url || product.thumbnail_url) ? (
|
|
<img
|
|
src={product.render_image_url || product.thumbnail_url!}
|
|
alt=""
|
|
className="w-full h-full object-contain"
|
|
/>
|
|
) : (
|
|
<Box size={18} className="text-content-muted" />
|
|
)}
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-2.5 font-mono text-xs text-content-secondary">
|
|
{product.pim_id}
|
|
</td>
|
|
<td className="px-4 py-2.5 font-medium text-content max-w-48 truncate" title={product.name || ''}>
|
|
{product.name || <span className="text-content-muted italic">no name</span>}
|
|
</td>
|
|
<td className="px-4 py-2.5">
|
|
{product.category_key && (
|
|
<span className="text-xs px-2 py-0.5 rounded-full bg-accent-light text-accent font-medium">
|
|
{CATEGORY_LABELS[product.category_key] || product.category_key}
|
|
</span>
|
|
)}
|
|
</td>
|
|
<td className="px-4 py-2.5 text-content-secondary text-xs max-w-40 truncate" title={product.baureihe || ''}>
|
|
{product.baureihe || '\u2014'}
|
|
</td>
|
|
<td className="px-4 py-2.5">
|
|
<CadStatusChip status={product.processing_status} />
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
|
|
{/* ── Floating action bar ───────────────────────────────────────── */}
|
|
{selected.size > 0 && (
|
|
<div className="fixed bottom-6 left-1/2 -translate-x-1/2 ml-[120px] bg-gray-900 text-white rounded-lg shadow-xl px-5 py-3 flex items-center gap-4 z-50">
|
|
<span className="text-sm font-medium">
|
|
{selected.size} selected
|
|
</span>
|
|
<button
|
|
onClick={handleDeleteSelected}
|
|
disabled={deleteMut.isPending}
|
|
className="flex items-center gap-1.5 px-3 py-1.5 bg-red-600 hover:bg-red-700 rounded text-sm font-medium transition-colors disabled:opacity-50"
|
|
>
|
|
<Trash2 size={14} />
|
|
{deleteMut.isPending ? 'Deleting\u2026' : 'Delete'}
|
|
</button>
|
|
<button
|
|
onClick={() => setSelected(new Set())}
|
|
className="flex items-center gap-1 px-2 py-1.5 text-gray-400 hover:text-white text-sm transition-colors"
|
|
title="Clear selection"
|
|
>
|
|
<X size={14} /> Clear
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|