feat: initial commit
This commit is contained in:
@@ -0,0 +1,272 @@
|
||||
/**
|
||||
* StepDropzone — Phase 3
|
||||
*
|
||||
* Accepts one or more .stp/.step files via react-dropzone, uploads each to
|
||||
* POST /api/uploads/step, then calls POST /api/cad/match-to-order to link
|
||||
* matched files to order items by filename.
|
||||
*/
|
||||
import { useState, useCallback } from 'react'
|
||||
import { useDropzone } from 'react-dropzone'
|
||||
import { Upload, CheckCircle, XCircle, Loader2, Link2 } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
import api from '../../api/client'
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Types
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface StepUploadResponse {
|
||||
cad_file_id: string
|
||||
original_name: string
|
||||
file_hash: string
|
||||
status: string
|
||||
}
|
||||
|
||||
interface MatchedItem {
|
||||
item_id: string
|
||||
cad_file_id: string
|
||||
item_name: string
|
||||
cad_name: string
|
||||
}
|
||||
|
||||
interface MatchToOrderResponse {
|
||||
matched: MatchedItem[]
|
||||
unmatched_cad: string[]
|
||||
unmatched_items: string[]
|
||||
}
|
||||
|
||||
type FileStatus = 'idle' | 'uploading' | 'done' | 'error'
|
||||
|
||||
interface FileEntry {
|
||||
file: File
|
||||
status: FileStatus
|
||||
errorMsg?: string
|
||||
cadFileId?: string
|
||||
}
|
||||
|
||||
interface StepDropzoneProps {
|
||||
orderId: string
|
||||
/** Called after matching completes so the parent can refresh the order */
|
||||
onMatchComplete?: (result: MatchToOrderResponse) => void
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Component
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export default function StepDropzone({ orderId, onMatchComplete }: StepDropzoneProps) {
|
||||
const [entries, setEntries] = useState<FileEntry[]>([])
|
||||
const [matching, setMatching] = useState(false)
|
||||
const [matchResult, setMatchResult] = useState<MatchToOrderResponse | null>(null)
|
||||
|
||||
// Update a single entry by index
|
||||
const updateEntry = useCallback(
|
||||
(idx: number, patch: Partial<FileEntry>) =>
|
||||
setEntries((prev) => prev.map((e, i) => (i === idx ? { ...e, ...patch } : e))),
|
||||
[],
|
||||
)
|
||||
|
||||
const onDrop = useCallback(
|
||||
async (accepted: File[]) => {
|
||||
if (accepted.length === 0) return
|
||||
|
||||
// Append new file entries
|
||||
const startIdx = entries.length
|
||||
const newEntries: FileEntry[] = accepted.map((f) => ({ file: f, status: 'uploading' }))
|
||||
setEntries((prev) => [...prev, ...newEntries])
|
||||
setMatchResult(null)
|
||||
|
||||
// Upload each file sequentially to avoid overwhelming the server
|
||||
const uploadedIds: string[] = []
|
||||
for (let i = 0; i < accepted.length; i++) {
|
||||
const globalIdx = startIdx + i
|
||||
const file = accepted[i]
|
||||
const form = new FormData()
|
||||
form.append('file', file)
|
||||
try {
|
||||
const res = await api.post<StepUploadResponse>('/uploads/step', form, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
})
|
||||
const { cad_file_id } = res.data
|
||||
uploadedIds.push(cad_file_id)
|
||||
updateEntry(globalIdx, { status: 'done', cadFileId: cad_file_id })
|
||||
} catch (err: any) {
|
||||
const msg: string =
|
||||
err?.response?.data?.detail ?? err?.message ?? 'Upload failed'
|
||||
updateEntry(globalIdx, { status: 'error', errorMsg: msg })
|
||||
toast.error(`${file.name}: ${msg}`)
|
||||
}
|
||||
}
|
||||
|
||||
// Collect all successful cad_file_ids from this session (including previous uploads)
|
||||
const allSuccessfulIds: string[] = [
|
||||
...entries
|
||||
.filter((e) => e.status === 'done' && e.cadFileId)
|
||||
.map((e) => e.cadFileId as string),
|
||||
...uploadedIds,
|
||||
]
|
||||
|
||||
if (allSuccessfulIds.length === 0) return
|
||||
|
||||
// Match to order
|
||||
setMatching(true)
|
||||
try {
|
||||
const res = await api.post<MatchToOrderResponse>('/cad/match-to-order', {
|
||||
order_id: orderId,
|
||||
cad_file_ids: allSuccessfulIds,
|
||||
})
|
||||
setMatchResult(res.data)
|
||||
const { matched, unmatched_cad } = res.data
|
||||
if (matched.length > 0) {
|
||||
toast.success(`Matched ${matched.length} file(s) to order items`)
|
||||
}
|
||||
if (unmatched_cad.length > 0) {
|
||||
toast.warning(`${unmatched_cad.length} file(s) could not be matched to any item`)
|
||||
}
|
||||
onMatchComplete?.(res.data)
|
||||
} catch (err: any) {
|
||||
const msg: string =
|
||||
err?.response?.data?.detail ?? err?.message ?? 'Matching failed'
|
||||
toast.error(`CAD matching error: ${msg}`)
|
||||
} finally {
|
||||
setMatching(false)
|
||||
}
|
||||
},
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[entries, orderId, onMatchComplete, updateEntry],
|
||||
)
|
||||
|
||||
const { getRootProps, getInputProps, isDragActive } = useDropzone({
|
||||
onDrop,
|
||||
accept: { 'application/octet-stream': ['.stp', '.step'] },
|
||||
multiple: true,
|
||||
})
|
||||
|
||||
const hasEntries = entries.length > 0
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Drop target */}
|
||||
<div
|
||||
{...getRootProps()}
|
||||
className={[
|
||||
'border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-colors',
|
||||
isDragActive
|
||||
? 'border-green-500 bg-status-success-bg'
|
||||
: 'border-border-default hover:border-border-default bg-surface-alt',
|
||||
].join(' ')}
|
||||
>
|
||||
<input {...getInputProps()} />
|
||||
<Upload size={32} className="mx-auto mb-3 text-content-muted" />
|
||||
{isDragActive ? (
|
||||
<p className="text-green-600 font-medium">Drop STEP files here</p>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-content-secondary font-medium">
|
||||
Drag and drop .stp / .step files here
|
||||
</p>
|
||||
<p className="text-sm text-content-muted mt-1">or click to browse</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Per-file status list */}
|
||||
{hasEntries && (
|
||||
<ul className="divide-y divide-border-light rounded-lg border border-border-default bg-surface overflow-hidden">
|
||||
{entries.map((entry, idx) => (
|
||||
<li key={idx} className="flex items-center gap-3 px-4 py-3">
|
||||
<FileStatusIcon status={entry.status} />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-content truncate">
|
||||
{entry.file.name}
|
||||
</p>
|
||||
{entry.status === 'error' && (
|
||||
<p className="text-xs text-red-500 mt-0.5">{entry.errorMsg}</p>
|
||||
)}
|
||||
{entry.status === 'done' && (
|
||||
<p className="text-xs text-content-muted mt-0.5">
|
||||
ID: {entry.cadFileId}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<StatusLabel status={entry.status} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{/* Matching spinner */}
|
||||
{matching && (
|
||||
<div className="flex items-center gap-2 text-sm text-content-secondary">
|
||||
<Loader2 size={15} className="animate-spin" />
|
||||
Matching files to order items...
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Match result summary */}
|
||||
{matchResult && !matching && (
|
||||
<div className="rounded-lg border border-border-default bg-surface p-4 space-y-3">
|
||||
<div className="flex items-center gap-2 text-sm font-semibold text-content-secondary">
|
||||
<Link2 size={15} />
|
||||
Matching Results
|
||||
</div>
|
||||
|
||||
{matchResult.matched.length > 0 && (
|
||||
<div>
|
||||
<p className="text-xs font-medium text-status-success-text mb-1">
|
||||
Matched ({matchResult.matched.length})
|
||||
</p>
|
||||
<ul className="space-y-1">
|
||||
{matchResult.matched.map((m) => (
|
||||
<li key={m.item_id} className="flex items-center gap-2 text-xs">
|
||||
<CheckCircle size={13} className="text-green-500 shrink-0" />
|
||||
<span className="font-mono text-content-secondary truncate">{m.cad_name}</span>
|
||||
<span className="text-content-muted">→</span>
|
||||
<span className="text-content-secondary truncate">{m.item_name}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{matchResult.unmatched_cad.length > 0 && (
|
||||
<div>
|
||||
<p className="text-xs font-medium text-status-warning-text mb-1">
|
||||
Unmatched CAD files ({matchResult.unmatched_cad.length})
|
||||
</p>
|
||||
<ul className="space-y-0.5">
|
||||
{matchResult.unmatched_cad.map((id) => (
|
||||
<li key={id} className="text-xs text-content-secondary font-mono truncate">
|
||||
{entries.find((e) => e.cadFileId === id)?.file.name ?? id}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{matchResult.matched.length === 0 && matchResult.unmatched_cad.length === 0 && (
|
||||
<p className="text-xs text-content-muted">No files were processed.</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Sub-components
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function FileStatusIcon({ status }: { status: FileStatus }) {
|
||||
if (status === 'uploading') return <Loader2 size={16} className="animate-spin text-blue-500 shrink-0" />
|
||||
if (status === 'done') return <CheckCircle size={16} className="text-green-500 shrink-0" />
|
||||
if (status === 'error') return <XCircle size={16} className="text-red-500 shrink-0" />
|
||||
return <div className="w-4 h-4 rounded-full bg-surface-muted shrink-0" />
|
||||
}
|
||||
|
||||
function StatusLabel({ status }: { status: FileStatus }) {
|
||||
if (status === 'uploading') return <span className="text-xs text-blue-500">Uploading...</span>
|
||||
if (status === 'done') return <span className="text-xs text-green-600">Uploaded</span>
|
||||
if (status === 'error') return <span className="text-xs text-red-500">Failed</span>
|
||||
return null
|
||||
}
|
||||
Reference in New Issue
Block a user