feat(O): UI-Vollständigkeit + v3-Workflows + OCC-Kantenanalyse
Backend:
- Phase I: notification_configs router (GET/PUT/{event}/{channel}/POST reset)
war bereits in notifications.py — add-alias endpoint in uploads.py ergänzt
- OutputType schema: workflow_definition_id + workflow_name fields;
PATCH unterstützt Workflow-Zuweisung; _enrich_workflow_names() batch query
- Dispatch-Integration: orders.py dispatch_renders() → dispatch_render_with_workflow()
mit Legacy-Fallback; neues Logging
- uploads.py: POST /validations/{id}/add-alias für Material-Lücken
Pipeline:
- step_processor.py: extract_mesh_edge_data() via OCC — berechnet Dihedralwinkel
aller Kanten, liefert suggested_smooth_angle + sharp_edge_midpoints
Integriert in extract_cad_metadata() und process_cad_file()
- domains/rendering/tasks.py: apply_asset_library_materials_task (K3),
export_gltf_for_order_line_task → Blender export_gltf.py (K4),
export_blend_for_order_line_task → export_blend.py fix (K5)
- render-worker/scripts/still_render.py: _mark_sharp_and_seams() mit
OCC midpoint KD-tree matching + UV-Seam-Markierung
- render-worker/scripts/blender_render.py: identische Funktion + mesh_attributes parsing
Frontend:
- Layout.tsx: Upload-Link in Sidebar (alle User); Asset Libraries Link (admin/PM)
- App.tsx: /asset-libraries Route
- AssetLibrary.tsx: neue Seite (Upload, Catalog-Anzeige, Refresh, Toggle, Delete)
- OutputTypeTable.tsx: Workflow-Dropdown + Legacy/Workflow Badge
- ProductDetail.tsx: Geometry-Karte (Volumen, Surface, BBox, Sharp-Winkel)
- api/outputTypes.ts + api/products.ts: neue Felder
- api/imports.ts: ImportValidation API
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -23,6 +23,7 @@ import WorkflowEditorPage from './pages/WorkflowEditor'
|
||||
import MediaBrowserPage from './pages/MediaBrowser'
|
||||
import BillingPage from './pages/Billing'
|
||||
import WorkerManagementPage from './pages/WorkerManagement'
|
||||
import AssetLibraryPage from './pages/AssetLibrary'
|
||||
|
||||
function ProtectedRoute({ children }: { children: React.ReactNode }) {
|
||||
const token = useAuthStore((s) => s.token)
|
||||
@@ -113,6 +114,14 @@ export default function App() {
|
||||
</AdminRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="asset-libraries"
|
||||
element={
|
||||
<AdminRoute>
|
||||
<AssetLibraryPage />
|
||||
</AdminRoute>
|
||||
}
|
||||
/>
|
||||
</Route>
|
||||
</Routes>
|
||||
</WebSocketProvider>
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
import api from './client'
|
||||
|
||||
export interface ImportValidation {
|
||||
id: string
|
||||
status: 'pending' | 'running' | 'completed' | 'failed'
|
||||
summary: {
|
||||
total_rows: number
|
||||
rows_with_cad: number
|
||||
rows_without_cad: number
|
||||
unresolvable_materials: Array<{ row_name: string; material: string }>
|
||||
} | null
|
||||
created_at: string
|
||||
completed_at: string | null
|
||||
}
|
||||
|
||||
export async function getImportValidation(id: string): Promise<ImportValidation> {
|
||||
const res = await api.get(`/imports/validation/${id}`)
|
||||
return res.data
|
||||
}
|
||||
|
||||
export async function addMaterialAliasFromValidation(validationId: string, partName: string, materialName: string): Promise<void> {
|
||||
await api.post(`/imports/validation/${validationId}/add-alias`, { part_name: partName, material_name: materialName })
|
||||
}
|
||||
@@ -16,6 +16,7 @@ export interface OutputType {
|
||||
pricing_tier_id: number | null
|
||||
pricing_tier_name: string | null
|
||||
price_per_item: number | null
|
||||
workflow_definition_id: string | null
|
||||
is_active: boolean
|
||||
created_at: string
|
||||
updated_at: string
|
||||
|
||||
@@ -24,6 +24,14 @@ export interface CadPartMaterial {
|
||||
material: string
|
||||
}
|
||||
|
||||
export interface CadFileMeshAttributes {
|
||||
volume_mm3?: number
|
||||
surface_area_mm2?: number
|
||||
bbox?: { x?: number; y?: number; z?: number }
|
||||
suggested_smooth_angle?: number
|
||||
[key: string]: unknown
|
||||
}
|
||||
|
||||
export interface Product {
|
||||
id: string
|
||||
pim_id: string
|
||||
@@ -40,6 +48,10 @@ export interface Product {
|
||||
components: ComponentData[]
|
||||
cad_part_materials: CadPartMaterial[]
|
||||
cad_file_id: string | null
|
||||
cad_file?: {
|
||||
id: string
|
||||
mesh_attributes?: CadFileMeshAttributes
|
||||
} | null
|
||||
thumbnail_url: string | null
|
||||
render_image_url: string | null
|
||||
processing_status: string | null
|
||||
|
||||
@@ -8,6 +8,8 @@ import {
|
||||
import type { OutputType } from '../../api/outputTypes'
|
||||
import { listPricingTiers } from '../../api/pricing'
|
||||
import type { PricingTier } from '../../api/pricing'
|
||||
import { getWorkflows } from '../../api/workflows'
|
||||
import type { WorkflowDefinition } from '../../api/workflows'
|
||||
|
||||
const RENDERERS = ['blender', 'pillow']
|
||||
const FORMATS = ['png', 'jpg', 'gltf', 'stl', 'mp4', 'webm']
|
||||
@@ -39,6 +41,22 @@ export default function OutputTypeTable() {
|
||||
queryFn: listPricingTiers,
|
||||
})
|
||||
|
||||
const { data: workflows } = useQuery({
|
||||
queryKey: ['workflows'],
|
||||
queryFn: getWorkflows,
|
||||
})
|
||||
|
||||
const updateWorkflowMut = useMutation({
|
||||
mutationFn: ({ id, workflow_definition_id }: { id: string; workflow_definition_id: string | null }) =>
|
||||
updateOutputType(id, { workflow_definition_id }),
|
||||
onSuccess: () => {
|
||||
toast.success('Workflow updated')
|
||||
qc.invalidateQueries({ queryKey: ['output-types-admin'] })
|
||||
qc.invalidateQueries({ queryKey: ['output-types'] })
|
||||
},
|
||||
onError: (e: any) => toast.error(e.response?.data?.detail || 'Failed to update workflow'),
|
||||
})
|
||||
|
||||
const createMut = useMutation({
|
||||
mutationFn: () => {
|
||||
const rs: Record<string, unknown> = {}
|
||||
@@ -184,6 +202,7 @@ export default function OutputTypeTable() {
|
||||
<th className="px-4 py-2 font-medium text-content-secondary" title="Compatible product categories — empty means compatible with all categories">Categories</th>
|
||||
<th className="px-4 py-2 font-medium text-content-secondary" title="Output resolution in pixels (width × height); leave empty to use global default">Resolution</th>
|
||||
<th className="px-4 py-2 font-medium text-content-secondary" title="Pricing tier used to calculate the per-item cost for this output type">Pricing</th>
|
||||
<th className="px-4 py-2 font-medium text-content-secondary" title="Workflow definition assigned to this output type">Workflow</th>
|
||||
<th className="px-4 py-2 font-medium text-content-secondary" title="Sort order — lower numbers appear first in the wizard output-type picker">Sort</th>
|
||||
<th className="px-4 py-2 font-medium text-content-secondary" title="Active — inactive types are hidden from the order wizard">Active</th>
|
||||
<th className="px-4 py-2 font-medium text-content-secondary">Actions</th>
|
||||
@@ -192,7 +211,7 @@ export default function OutputTypeTable() {
|
||||
<tbody>
|
||||
{isLoading && (
|
||||
<tr>
|
||||
<td colSpan={16} className="px-4 py-4 text-center text-content-muted">Loading…</td>
|
||||
<td colSpan={17} className="px-4 py-4 text-center text-content-muted">Loading…</td>
|
||||
</tr>
|
||||
)}
|
||||
{types?.map((ot) => (
|
||||
@@ -475,6 +494,18 @@ export default function OutputTypeTable() {
|
||||
))}
|
||||
</select>
|
||||
</td>
|
||||
<td className="px-4 py-2">
|
||||
<select
|
||||
className="input-sm"
|
||||
value={editDraft.workflow_definition_id ?? ot.workflow_definition_id ?? ''}
|
||||
onChange={(e) => setEditDraft({ ...editDraft, workflow_definition_id: e.target.value || null })}
|
||||
>
|
||||
<option value="">— Legacy —</option>
|
||||
{workflows?.filter((w) => w.is_active).map((w) => (
|
||||
<option key={w.id} value={w.id}>{w.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</td>
|
||||
<td className="px-4 py-2">
|
||||
<input
|
||||
type="number"
|
||||
@@ -648,6 +679,20 @@ export default function OutputTypeTable() {
|
||||
<span className="text-xs text-content-muted">Category default</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-2">
|
||||
{(() => {
|
||||
const wf = workflows?.find((w) => w.id === ot.workflow_definition_id)
|
||||
return wf ? (
|
||||
<span className="text-xs px-2 py-0.5 rounded-full bg-status-success-bg text-status-success-text font-medium">
|
||||
{wf.name}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-xs px-2 py-0.5 rounded-full bg-surface-muted text-content-muted">
|
||||
Legacy
|
||||
</span>
|
||||
)
|
||||
})()}
|
||||
</td>
|
||||
<td className="px-4 py-2 text-content-muted">{ot.sort_order}</td>
|
||||
<td className="px-4 py-2">
|
||||
<span className={`text-xs px-2 py-0.5 rounded-full font-medium ${
|
||||
@@ -949,6 +994,7 @@ export default function OutputTypeTable() {
|
||||
))}
|
||||
</select>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-content-muted">—</td>
|
||||
<td className="px-4 py-2">
|
||||
<input
|
||||
type="number"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Outlet, NavLink, useNavigate, Link } from 'react-router-dom'
|
||||
import { LayoutDashboard, Package, Settings, LogOut, FlaskConical, Activity, Library, Plus, SlidersHorizontal, Building2, GitBranch, Image, BellRing, Receipt, Server } from 'lucide-react'
|
||||
import { LayoutDashboard, Package, Settings, LogOut, FlaskConical, Activity, Library, Plus, SlidersHorizontal, Building2, GitBranch, Image, BellRing, Receipt, Server, Upload } from 'lucide-react'
|
||||
import { useAuthStore } from '../../store/auth'
|
||||
import { clsx } from 'clsx'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
@@ -14,6 +14,7 @@ const nav = [
|
||||
{ to: '/materials', icon: FlaskConical, label: 'Materials' },
|
||||
{ to: '/activity', icon: Activity, label: 'Activity' },
|
||||
{ to: '/preferences', icon: SlidersHorizontal, label: 'Preferences' },
|
||||
{ to: '/upload', icon: Upload, label: 'Upload' },
|
||||
]
|
||||
|
||||
export default function Layout() {
|
||||
@@ -184,6 +185,22 @@ export default function Layout() {
|
||||
Workflows
|
||||
</NavLink>
|
||||
)}
|
||||
{(user?.role === 'admin' || user?.role === 'project_manager') && (
|
||||
<NavLink
|
||||
to="/asset-libraries"
|
||||
className={({ isActive }) =>
|
||||
clsx(
|
||||
'flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors',
|
||||
isActive
|
||||
? 'bg-accent-light text-accent'
|
||||
: 'text-content-secondary hover:bg-surface-hover',
|
||||
)
|
||||
}
|
||||
>
|
||||
<Library size={18} />
|
||||
Asset Libraries
|
||||
</NavLink>
|
||||
)}
|
||||
{user?.role === 'admin' && (
|
||||
<NavLink
|
||||
to="/notification-settings"
|
||||
|
||||
@@ -0,0 +1,336 @@
|
||||
import { useState } from 'react'
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { toast } from 'sonner'
|
||||
import { Upload, Trash2, RefreshCw, ChevronDown, ChevronRight, Library } from 'lucide-react'
|
||||
import { useDropzone } from 'react-dropzone'
|
||||
import {
|
||||
listAssetLibraries,
|
||||
createAssetLibrary,
|
||||
refreshAssetLibraryCatalog,
|
||||
deleteAssetLibrary,
|
||||
} from '../api/assetLibraries'
|
||||
import type { AssetLibrary } from '../api/assetLibraries'
|
||||
import api from '../api/client'
|
||||
|
||||
// ── UploadModal ────────────────────────────────────────────────────────────
|
||||
|
||||
function UploadModal({ onClose }: { onClose: () => void }) {
|
||||
const qc = useQueryClient()
|
||||
const [name, setName] = useState('')
|
||||
const [description, setDescription] = useState('')
|
||||
const [file, setFile] = useState<File | null>(null)
|
||||
|
||||
const { getRootProps, getInputProps, isDragActive } = useDropzone({
|
||||
accept: { 'application/octet-stream': ['.blend'] },
|
||||
multiple: false,
|
||||
onDrop: (files) => { if (files[0]) setFile(files[0]) },
|
||||
})
|
||||
|
||||
const uploadMut = useMutation({
|
||||
mutationFn: () => {
|
||||
if (!file || !name.trim()) throw new Error('Name and file required')
|
||||
return createAssetLibrary({ name: name.trim(), description: description.trim() || undefined, blend_file: file })
|
||||
},
|
||||
onSuccess: () => {
|
||||
toast.success('Asset library uploaded')
|
||||
qc.invalidateQueries({ queryKey: ['asset-libraries'] })
|
||||
onClose()
|
||||
},
|
||||
onError: (e: any) => toast.error(e.response?.data?.detail || 'Upload failed'),
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<div className="bg-white rounded-xl shadow-2xl w-full max-w-lg flex flex-col">
|
||||
<div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold text-gray-900">Upload Asset Library</h2>
|
||||
<button onClick={onClose} className="text-gray-400 hover:text-gray-600 text-xl leading-none">
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<div className="px-6 py-4 space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Name <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="e.g. Schaeffler Materials v2"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Description</label>
|
||||
<input
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="Optional description"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
.blend File <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div
|
||||
{...getRootProps()}
|
||||
className={`border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors ${
|
||||
isDragActive ? 'border-blue-500 bg-blue-50' : 'border-gray-300 hover:border-blue-400'
|
||||
}`}
|
||||
>
|
||||
<input {...getInputProps()} />
|
||||
{file ? (
|
||||
<p className="text-sm text-gray-700 font-medium">{file.name}</p>
|
||||
) : (
|
||||
<>
|
||||
<Upload size={24} className="text-gray-400 mx-auto mb-2" />
|
||||
<p className="text-sm text-gray-500">
|
||||
{isDragActive ? 'Drop the .blend file here' : 'Drag & drop a .blend file, or click to browse'}
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={() => uploadMut.mutate()}
|
||||
disabled={!name.trim() || !file || uploadMut.isPending}
|
||||
className="px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
|
||||
>
|
||||
<Upload size={14} />
|
||||
{uploadMut.isPending ? 'Uploading...' : 'Upload'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── LibraryCard ────────────────────────────────────────────────────────────
|
||||
|
||||
function LibraryCard({ lib }: { lib: AssetLibrary }) {
|
||||
const qc = useQueryClient()
|
||||
const [expanded, setExpanded] = useState(false)
|
||||
|
||||
const refreshMut = useMutation({
|
||||
mutationFn: () => refreshAssetLibraryCatalog(lib.id),
|
||||
onSuccess: () => {
|
||||
toast.success('Catalog updated')
|
||||
qc.invalidateQueries({ queryKey: ['asset-libraries'] })
|
||||
},
|
||||
onError: (e: any) => toast.error(e.response?.data?.detail || 'Refresh failed'),
|
||||
})
|
||||
|
||||
const toggleMut = useMutation({
|
||||
mutationFn: () => api.patch(`/asset-libraries/${lib.id}`, { is_active: !lib.is_active }),
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ['asset-libraries'] })
|
||||
},
|
||||
onError: (e: any) => toast.error(e.response?.data?.detail || 'Toggle failed'),
|
||||
})
|
||||
|
||||
const deleteMut = useMutation({
|
||||
mutationFn: () => deleteAssetLibrary(lib.id),
|
||||
onSuccess: () => {
|
||||
toast.success('Library deleted')
|
||||
qc.invalidateQueries({ queryKey: ['asset-libraries'] })
|
||||
},
|
||||
onError: (e: any) => toast.error(e.response?.data?.detail || 'Delete failed'),
|
||||
})
|
||||
|
||||
const materialCount = lib.catalog?.materials?.length ?? 0
|
||||
const nodeGroupCount = lib.catalog?.node_groups?.length ?? 0
|
||||
const MAX_VISIBLE = 10
|
||||
|
||||
return (
|
||||
<div className="card p-5 space-y-3">
|
||||
{/* Header row */}
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<h3 className="font-semibold text-content truncate">{lib.name}</h3>
|
||||
<span
|
||||
className={`text-xs px-2 py-0.5 rounded-full font-medium ${
|
||||
lib.is_active
|
||||
? 'bg-status-success-bg text-status-success-text'
|
||||
: 'bg-surface-muted text-content-muted'
|
||||
}`}
|
||||
>
|
||||
{lib.is_active ? 'active' : 'inactive'}
|
||||
</span>
|
||||
</div>
|
||||
{lib.description && (
|
||||
<p className="text-sm text-content-muted mt-0.5">{lib.description}</p>
|
||||
)}
|
||||
{lib.original_filename && (
|
||||
<p className="text-xs text-content-muted font-mono mt-1">{lib.original_filename}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
{/* Active toggle */}
|
||||
<button
|
||||
onClick={() => toggleMut.mutate()}
|
||||
disabled={toggleMut.isPending}
|
||||
title={lib.is_active ? 'Deactivate' : 'Activate'}
|
||||
className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus:outline-none ${
|
||||
lib.is_active ? 'bg-green-500' : 'bg-gray-300'
|
||||
} disabled:opacity-50`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow transition-transform ${
|
||||
lib.is_active ? 'translate-x-4' : 'translate-x-1'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => refreshMut.mutate()}
|
||||
disabled={refreshMut.isPending}
|
||||
title="Refresh catalog"
|
||||
className="btn-icon text-content-muted hover:text-accent"
|
||||
>
|
||||
<RefreshCw size={15} className={refreshMut.isPending ? 'animate-spin' : ''} />
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
if (confirm(`Delete "${lib.name}"? This cannot be undone.`)) {
|
||||
deleteMut.mutate()
|
||||
}
|
||||
}}
|
||||
disabled={deleteMut.isPending}
|
||||
title="Delete library"
|
||||
className="btn-icon text-content-muted hover:text-red-500"
|
||||
>
|
||||
<Trash2 size={15} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Catalog badges */}
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-xs px-2 py-0.5 rounded-full bg-accent-light text-accent font-medium">
|
||||
{materialCount} material{materialCount !== 1 ? 's' : ''}
|
||||
</span>
|
||||
{nodeGroupCount > 0 && (
|
||||
<span className="text-xs px-2 py-0.5 rounded-full bg-surface-muted text-content-muted font-medium">
|
||||
{nodeGroupCount} node group{nodeGroupCount !== 1 ? 's' : ''}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Expandable material list */}
|
||||
{materialCount > 0 && (
|
||||
<div>
|
||||
<button
|
||||
onClick={() => setExpanded((p) => !p)}
|
||||
className="flex items-center gap-1 text-xs text-content-secondary hover:text-content transition-colors"
|
||||
>
|
||||
{expanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
|
||||
{expanded ? 'Hide' : 'Show'} materials
|
||||
</button>
|
||||
{expanded && (
|
||||
<div className="mt-2 flex flex-wrap gap-1">
|
||||
{lib.catalog.materials.slice(0, MAX_VISIBLE).map((m) => (
|
||||
<span
|
||||
key={m}
|
||||
className="text-xs px-2 py-0.5 rounded bg-surface-alt border border-border-default text-content-secondary font-mono"
|
||||
>
|
||||
{m}
|
||||
</span>
|
||||
))}
|
||||
{materialCount > MAX_VISIBLE && (
|
||||
<span className="text-xs px-2 py-0.5 rounded bg-surface-muted text-content-muted">
|
||||
... and {materialCount - MAX_VISIBLE} more
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── AssetLibraryPage ───────────────────────────────────────────────────────
|
||||
|
||||
export default function AssetLibraryPage() {
|
||||
const [showUpload, setShowUpload] = useState(false)
|
||||
|
||||
const { data: libraries, isLoading, isError } = useQuery({
|
||||
queryKey: ['asset-libraries'],
|
||||
queryFn: listAssetLibraries,
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="p-8 max-w-5xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-content">Asset Libraries</h1>
|
||||
<p className="text-sm text-content-muted mt-1">
|
||||
Manage .blend material libraries used for Blender rendering.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowUpload(true)}
|
||||
className="btn-primary"
|
||||
>
|
||||
<Upload size={16} />
|
||||
Upload Library
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* States */}
|
||||
{isLoading && (
|
||||
<div className="card p-12 text-center text-content-muted">
|
||||
<div className="animate-spin w-8 h-8 border-2 border-accent border-t-transparent rounded-full mx-auto mb-3" />
|
||||
Loading libraries...
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isError && (
|
||||
<div className="card p-8 text-center text-status-error-text">
|
||||
Failed to load asset libraries. Please try again.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoading && !isError && libraries && libraries.length === 0 && (
|
||||
<div className="card p-16 text-center">
|
||||
<Library size={44} className="text-content-muted mx-auto mb-3" />
|
||||
<p className="text-content-secondary font-medium">No asset libraries.</p>
|
||||
<p className="text-content-muted text-sm mt-1">
|
||||
Upload a .blend file to get started.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setShowUpload(true)}
|
||||
className="btn-primary mt-4"
|
||||
>
|
||||
<Upload size={16} />
|
||||
Upload Library
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoading && !isError && libraries && libraries.length > 0 && (
|
||||
<div className="space-y-4">
|
||||
{libraries.map((lib) => (
|
||||
<LibraryCard key={lib.id} lib={lib} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showUpload && <UploadModal onClose={() => setShowUpload(false)} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -4,7 +4,7 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { useDropzone } from 'react-dropzone'
|
||||
import {
|
||||
ArrowLeft, Pencil, Save, X, Box, Image,
|
||||
RotateCcw, RefreshCw, Upload, ChevronDown, ChevronRight, Wand2, Download, Plus, Trash2, Filter, Cuboid,
|
||||
RotateCcw, RefreshCw, Upload, ChevronDown, ChevronRight, Wand2, Download, Plus, Trash2, Filter, Cuboid, Ruler,
|
||||
} from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
import {
|
||||
@@ -606,6 +606,49 @@ export default function ProductDetailPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mesh attributes */}
|
||||
{product.cad_file?.mesh_attributes && Object.keys(product.cad_file.mesh_attributes).length > 0 && (() => {
|
||||
const mesh_attrs = product.cad_file!.mesh_attributes!
|
||||
return (
|
||||
<div className="mt-3 p-3 rounded-md border border-border-default bg-surface-alt">
|
||||
<p className="text-xs font-semibold text-content-muted mb-2 flex items-center gap-1">
|
||||
<Ruler size={12} />
|
||||
Geometry
|
||||
</p>
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-1 text-xs">
|
||||
{mesh_attrs.volume_mm3 != null && (
|
||||
<>
|
||||
<span className="text-content-muted">Volume</span>
|
||||
<span>{((mesh_attrs.volume_mm3 as number) / 1000).toFixed(2)} cm³</span>
|
||||
</>
|
||||
)}
|
||||
{mesh_attrs.surface_area_mm2 != null && (
|
||||
<>
|
||||
<span className="text-content-muted">Surface</span>
|
||||
<span>{((mesh_attrs.surface_area_mm2 as number) / 100).toFixed(1)} cm²</span>
|
||||
</>
|
||||
)}
|
||||
{mesh_attrs.bbox != null && (
|
||||
<>
|
||||
<span className="text-content-muted">BBox</span>
|
||||
<span>
|
||||
{(mesh_attrs.bbox as { x?: number; y?: number; z?: number }).x?.toFixed(1)} ×{' '}
|
||||
{(mesh_attrs.bbox as { x?: number; y?: number; z?: number }).y?.toFixed(1)} ×{' '}
|
||||
{(mesh_attrs.bbox as { x?: number; y?: number; z?: number }).z?.toFixed(1)} mm
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
{mesh_attrs.suggested_smooth_angle !== undefined && (
|
||||
<>
|
||||
<span className="text-content-muted">Sharp angle</span>
|
||||
<span>{mesh_attrs.suggested_smooth_angle as number}°</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
|
||||
{/* Material assignments */}
|
||||
{isPrivileged && (
|
||||
<div className="pt-3 border-t border-border-light">
|
||||
|
||||
Reference in New Issue
Block a user