jason
1573 lines
51 KiB
TypeScript
1573 lines
51 KiB
TypeScript
"use client";
|
||
|
||
import Link from "next/link";
|
||
import { useEffect, useRef, useState } from "react";
|
||
import dynamic from "next/dynamic";
|
||
import { useRouter } from "next/navigation";
|
||
import {
|
||
Badge,
|
||
Button,
|
||
Card,
|
||
ErrorBanner,
|
||
Field,
|
||
Input,
|
||
Modal,
|
||
PageHeader,
|
||
Select,
|
||
Textarea,
|
||
} from "@/components/ui";
|
||
import { apiFetch, ApiClientError } from "@/lib/client-api";
|
||
|
||
// three.js + occt wasm are heavy — keep them out of the page's initial bundle
|
||
// and out of SSR. The viewer only loads when the user clicks "Show 3D".
|
||
const StepViewer = dynamic(() => import("@/components/StepViewer"), {
|
||
ssr: false,
|
||
loading: () => (
|
||
<div className="relative w-full h-[480px] rounded-lg border border-slate-200 bg-slate-50 flex items-center justify-center text-sm text-slate-500">
|
||
Loading viewer…
|
||
</div>
|
||
),
|
||
});
|
||
|
||
interface FileView {
|
||
id: string;
|
||
originalName: string;
|
||
sizeBytes: number;
|
||
kind: string;
|
||
mimeType: string | null;
|
||
}
|
||
|
||
interface PartInfo {
|
||
id: string;
|
||
code: string;
|
||
name: string;
|
||
material: string | null;
|
||
qty: number;
|
||
notes: string | null;
|
||
stepFile: FileView | null;
|
||
drawingFile: FileView | null;
|
||
cutFile: FileView | null;
|
||
thumbnailFileId: string | null;
|
||
}
|
||
|
||
export interface TimeLogRow {
|
||
id: string;
|
||
startedAt: string;
|
||
endedAt: string | null;
|
||
unitsProcessed: number | null;
|
||
note: string | null;
|
||
operatorName: string;
|
||
}
|
||
|
||
export interface OperationRow {
|
||
id: string;
|
||
sequence: number;
|
||
name: string;
|
||
kind: string;
|
||
machineId: string | null;
|
||
machineName: string | null;
|
||
templateId: string | null;
|
||
templateName: string | null;
|
||
settings: string | null;
|
||
materialNotes: string | null;
|
||
instructions: string | null;
|
||
qcRequired: boolean;
|
||
plannedMinutes: number | null;
|
||
plannedUnits: number | null;
|
||
status: string;
|
||
qrToken: string;
|
||
timeLogs: TimeLogRow[];
|
||
}
|
||
|
||
interface MachineOption {
|
||
id: string;
|
||
name: string;
|
||
}
|
||
|
||
interface TemplateOption {
|
||
id: string;
|
||
name: string;
|
||
machineId: string | null;
|
||
defaultSettings: string | null;
|
||
defaultInstructions: string | null;
|
||
qcRequired: boolean;
|
||
}
|
||
|
||
export interface QcRecordRow {
|
||
id: string;
|
||
kind: string;
|
||
passed: boolean;
|
||
notes: string | null;
|
||
measurements: string | null;
|
||
createdAt: string;
|
||
operatorName: string;
|
||
operationSequence: number;
|
||
operationName: string;
|
||
}
|
||
|
||
type Slot = "stepFileId" | "drawingFileId" | "cutFileId";
|
||
|
||
const STATUS_TONE: Record<string, "slate" | "blue" | "green" | "amber" | "red"> = {
|
||
pending: "slate",
|
||
in_progress: "blue",
|
||
partial: "amber",
|
||
completed: "green",
|
||
qc_failed: "red",
|
||
};
|
||
|
||
const STATUS_LABEL: Record<string, string> = {
|
||
pending: "Pending",
|
||
in_progress: "In progress",
|
||
partial: "Partial",
|
||
completed: "Completed",
|
||
qc_failed: "QC failed",
|
||
};
|
||
|
||
function formatBytes(n: number) {
|
||
if (n < 1024) return `${n} B`;
|
||
if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
|
||
return `${(n / (1024 * 1024)).toFixed(1)} MB`;
|
||
}
|
||
|
||
export default function PartDetailClient({
|
||
project,
|
||
assembly,
|
||
part,
|
||
operations,
|
||
machines,
|
||
templates,
|
||
qcRecords,
|
||
}: {
|
||
project: { id: string; code: string; name: string };
|
||
assembly: { id: string; code: string; name: string };
|
||
part: PartInfo;
|
||
operations: OperationRow[];
|
||
machines: MachineOption[];
|
||
templates: TemplateOption[];
|
||
qcRecords: QcRecordRow[];
|
||
}) {
|
||
const router = useRouter();
|
||
const [editOpen, setEditOpen] = useState(false);
|
||
const [dupeOpen, setDupeOpen] = useState(false);
|
||
|
||
return (
|
||
<div className="mx-auto max-w-6xl px-4 py-8">
|
||
<nav className="mb-3 text-sm text-slate-500">
|
||
<Link href="/admin/projects" className="hover:underline">
|
||
Projects
|
||
</Link>
|
||
<span className="mx-1">›</span>
|
||
<Link href={`/admin/projects/${project.id}`} className="hover:underline">
|
||
{project.code}
|
||
</Link>
|
||
<span className="mx-1">›</span>
|
||
<Link
|
||
href={`/admin/projects/${project.id}/assemblies/${assembly.id}`}
|
||
className="hover:underline"
|
||
>
|
||
{assembly.code}
|
||
</Link>
|
||
<span className="mx-1">›</span>
|
||
<span>{part.code}</span>
|
||
</nav>
|
||
<PageHeader
|
||
title={
|
||
<span className="flex items-center gap-3">
|
||
<span className="font-mono text-slate-500 text-lg">{part.code}</span>
|
||
<span>{part.name}</span>
|
||
</span>
|
||
}
|
||
description={
|
||
<span className="text-slate-500">
|
||
{part.material ? `${part.material} · ` : ""}Qty {part.qty}
|
||
</span>
|
||
}
|
||
actions={
|
||
<div className="flex items-center gap-2">
|
||
<a
|
||
href={`/api/v1/parts/${part.id}/travelers.pdf`}
|
||
target="_blank"
|
||
rel="noopener"
|
||
className="inline-flex items-center rounded-md bg-white border border-slate-300 text-slate-900 text-sm px-3 py-1.5 hover:border-slate-900"
|
||
>
|
||
Print travelers (PDF)
|
||
</a>
|
||
<Button variant="secondary" onClick={() => setDupeOpen(true)}>
|
||
Duplicate
|
||
</Button>
|
||
<Button variant="secondary" onClick={() => setEditOpen(true)}>
|
||
Edit part
|
||
</Button>
|
||
</div>
|
||
}
|
||
/>
|
||
|
||
{part.notes ? (
|
||
<Card className="mb-4">
|
||
<div className="p-4 text-sm text-slate-700 whitespace-pre-wrap">{part.notes}</div>
|
||
</Card>
|
||
) : null}
|
||
|
||
<section className="mb-8">
|
||
<h2 className="text-lg font-semibold mb-3">Files</h2>
|
||
<div className="grid gap-3 md:grid-cols-3">
|
||
<FileSlot
|
||
partId={part.id}
|
||
label="STEP / 3D"
|
||
description="3D model for in-app viewer."
|
||
accept=".step,.stp"
|
||
slot="stepFileId"
|
||
file={part.stepFile}
|
||
onChange={() => router.refresh()}
|
||
/>
|
||
<FileSlot
|
||
partId={part.id}
|
||
label="Drawing (PDF)"
|
||
description="Dimensioned drawing."
|
||
accept=".pdf"
|
||
slot="drawingFileId"
|
||
file={part.drawingFile}
|
||
onChange={() => router.refresh()}
|
||
/>
|
||
<FileSlot
|
||
partId={part.id}
|
||
label="Cut file"
|
||
description="DXF or SVG for the punch/laser."
|
||
accept=".dxf,.svg"
|
||
slot="cutFileId"
|
||
file={part.cutFile}
|
||
onChange={() => router.refresh()}
|
||
/>
|
||
</div>
|
||
</section>
|
||
|
||
{part.stepFile ? (
|
||
<StepViewerSection
|
||
partId={part.id}
|
||
fileId={part.stepFile.id}
|
||
fileName={part.stepFile.originalName}
|
||
hasThumbnail={!!part.thumbnailFileId}
|
||
onThumbnailSaved={() => router.refresh()}
|
||
/>
|
||
) : null}
|
||
|
||
<OperationsSection
|
||
partId={part.id}
|
||
operations={operations}
|
||
machines={machines}
|
||
templates={templates}
|
||
onChange={() => router.refresh()}
|
||
/>
|
||
|
||
<QcHistorySection records={qcRecords} />
|
||
|
||
{editOpen && (
|
||
<EditPartModal
|
||
part={part}
|
||
onClose={() => setEditOpen(false)}
|
||
onSaved={() => router.refresh()}
|
||
onDeleted={() => router.push(`/admin/projects/${project.id}/assemblies/${assembly.id}`)}
|
||
/>
|
||
)}
|
||
{dupeOpen && (
|
||
<DuplicatePartModal
|
||
part={part}
|
||
onClose={() => setDupeOpen(false)}
|
||
onCreated={(newPartId) => {
|
||
setDupeOpen(false);
|
||
router.push(
|
||
`/admin/projects/${project.id}/assemblies/${assembly.id}/parts/${newPartId}`,
|
||
);
|
||
}}
|
||
/>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// -------- QC history -----------------------------------------------------
|
||
|
||
function QcHistorySection({ records }: { records: QcRecordRow[] }) {
|
||
if (records.length === 0) {
|
||
return (
|
||
<section className="mt-10">
|
||
<h2 className="text-lg font-semibold mb-3">QC history</h2>
|
||
<Card>
|
||
<div className="p-6 text-sm text-slate-500 text-center">
|
||
No QC records yet. Inline QC stamps and dedicated inspection steps will appear here as
|
||
they're recorded.
|
||
</div>
|
||
</Card>
|
||
</section>
|
||
);
|
||
}
|
||
const fails = records.filter((r) => !r.passed).length;
|
||
return (
|
||
<section className="mt-10">
|
||
<div className="flex items-baseline justify-between mb-3">
|
||
<h2 className="text-lg font-semibold">QC history</h2>
|
||
<div className="text-xs text-slate-500">
|
||
{records.length} record{records.length === 1 ? "" : "s"}
|
||
{fails > 0 ? ` · ${fails} failing` : ""}
|
||
</div>
|
||
</div>
|
||
<Card>
|
||
<table className="w-full text-sm">
|
||
<thead className="bg-slate-50 text-left text-slate-600 border-b border-slate-200">
|
||
<tr>
|
||
<th className="px-3 py-2 font-medium w-[130px]">When</th>
|
||
<th className="px-3 py-2 font-medium">Step</th>
|
||
<th className="px-3 py-2 font-medium">Operator</th>
|
||
<th className="px-3 py-2 font-medium">Kind</th>
|
||
<th className="px-3 py-2 font-medium">Result</th>
|
||
<th className="px-3 py-2 font-medium">Notes</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{records.map((r) => (
|
||
<tr key={r.id} className="border-b border-slate-100 last:border-0 align-top">
|
||
<td className="px-3 py-3 text-slate-600 whitespace-nowrap">
|
||
{new Date(r.createdAt).toLocaleString()}
|
||
</td>
|
||
<td className="px-3 py-3">
|
||
<div className="font-medium">
|
||
{r.operationSequence}. {r.operationName}
|
||
</div>
|
||
</td>
|
||
<td className="px-3 py-3 text-slate-700">{r.operatorName}</td>
|
||
<td className="px-3 py-3 text-slate-600 capitalize">{r.kind}</td>
|
||
<td className="px-3 py-3">
|
||
<Badge tone={r.passed ? "green" : "red"}>{r.passed ? "Pass" : "Fail"}</Badge>
|
||
</td>
|
||
<td className="px-3 py-3 text-slate-700 whitespace-pre-wrap max-w-md">
|
||
{r.notes ? r.notes : <span className="text-slate-400">—</span>}
|
||
{r.measurements ? (
|
||
<details className="mt-1">
|
||
<summary className="text-xs text-slate-500 cursor-pointer">
|
||
Measurements
|
||
</summary>
|
||
<pre className="mt-1 text-xs bg-slate-50 rounded p-2 overflow-x-auto">
|
||
{r.measurements}
|
||
</pre>
|
||
</details>
|
||
) : null}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</Card>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
// -------- Duplicate part -------------------------------------------------
|
||
|
||
function DuplicatePartModal({
|
||
part,
|
||
onClose,
|
||
onCreated,
|
||
}: {
|
||
part: PartInfo;
|
||
onClose: () => void;
|
||
onCreated: (id: string) => void;
|
||
}) {
|
||
// Default to "<original>-COPY" so the admin just has to edit a suffix rather
|
||
// than retyping the whole thing; the uniqueness constraint is enforced
|
||
// server-side and reports back as a 409 if it clashes.
|
||
const [code, setCode] = useState(`${part.code}-COPY`);
|
||
const [name, setName] = useState(part.name);
|
||
const [includeOperations, setIncludeOperations] = useState(true);
|
||
const [busy, setBusy] = useState(false);
|
||
const [error, setError] = useState<string | null>(null);
|
||
|
||
async function submit(e: React.FormEvent) {
|
||
e.preventDefault();
|
||
setBusy(true);
|
||
setError(null);
|
||
try {
|
||
const res = await apiFetch<{ part: { id: string }; operationsCopied: number }>(
|
||
`/api/v1/parts/${part.id}/duplicate`,
|
||
{
|
||
method: "POST",
|
||
body: JSON.stringify({ code, name, includeOperations }),
|
||
},
|
||
);
|
||
onCreated(res.part.id);
|
||
} catch (err) {
|
||
setError(err instanceof ApiClientError ? err.message : "Duplicate failed");
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<Modal
|
||
open
|
||
onClose={onClose}
|
||
title={`Duplicate ${part.code}`}
|
||
footer={
|
||
<>
|
||
<div className="flex-1" />
|
||
<Button variant="secondary" onClick={onClose} disabled={busy}>
|
||
Cancel
|
||
</Button>
|
||
<Button type="submit" form="part-dup-form" disabled={busy}>
|
||
{busy ? "Duplicating…" : "Duplicate"}
|
||
</Button>
|
||
</>
|
||
}
|
||
>
|
||
<form id="part-dup-form" onSubmit={submit} className="space-y-4">
|
||
<p className="text-sm text-slate-600">
|
||
Creates a new part in the same assembly. File attachments are re-used;
|
||
operations are cloned with fresh QR codes and reset to pending.
|
||
</p>
|
||
<Field label="New code" required hint="Must be unique within this assembly.">
|
||
<Input value={code} onChange={(e) => setCode(e.target.value)} required autoFocus />
|
||
</Field>
|
||
<Field label="Name">
|
||
<Input value={name} onChange={(e) => setName(e.target.value)} />
|
||
</Field>
|
||
<label className="flex items-center gap-2 text-sm">
|
||
<input
|
||
type="checkbox"
|
||
checked={includeOperations}
|
||
onChange={(e) => setIncludeOperations(e.target.checked)}
|
||
/>
|
||
Copy operations (fresh QR codes, status reset to pending)
|
||
</label>
|
||
<ErrorBanner message={error} />
|
||
</form>
|
||
</Modal>
|
||
);
|
||
}
|
||
|
||
// -------- Operations -----------------------------------------------------
|
||
|
||
function OperationsSection({
|
||
partId,
|
||
operations,
|
||
machines,
|
||
templates,
|
||
onChange,
|
||
}: {
|
||
partId: string;
|
||
operations: OperationRow[];
|
||
machines: MachineOption[];
|
||
templates: TemplateOption[];
|
||
onChange: () => void;
|
||
}) {
|
||
const [newOpen, setNewOpen] = useState(false);
|
||
const [edit, setEdit] = useState<OperationRow | null>(null);
|
||
const [qrFor, setQrFor] = useState<OperationRow | null>(null);
|
||
const [logsFor, setLogsFor] = useState<OperationRow | null>(null);
|
||
const [busyId, setBusyId] = useState<string | null>(null);
|
||
const [error, setError] = useState<string | null>(null);
|
||
|
||
async function move(index: number, dir: -1 | 1) {
|
||
const target = index + dir;
|
||
if (target < 0 || target >= operations.length) return;
|
||
const order = operations.map((o) => o.id);
|
||
[order[index], order[target]] = [order[target], order[index]];
|
||
setBusyId(operations[index].id);
|
||
setError(null);
|
||
try {
|
||
await apiFetch(`/api/v1/parts/${partId}/operations/reorder`, {
|
||
method: "POST",
|
||
body: JSON.stringify({ order }),
|
||
});
|
||
onChange();
|
||
} catch (err) {
|
||
setError(err instanceof ApiClientError ? err.message : "Reorder failed");
|
||
} finally {
|
||
setBusyId(null);
|
||
}
|
||
}
|
||
|
||
async function remove(op: OperationRow) {
|
||
if (!confirm(`Delete operation ${op.sequence}. ${op.name}?`)) return;
|
||
setBusyId(op.id);
|
||
setError(null);
|
||
try {
|
||
await apiFetch(`/api/v1/operations/${op.id}`, { method: "DELETE" });
|
||
onChange();
|
||
} catch (err) {
|
||
setError(err instanceof ApiClientError ? err.message : "Delete failed");
|
||
} finally {
|
||
setBusyId(null);
|
||
}
|
||
}
|
||
|
||
async function resetQc(op: OperationRow) {
|
||
if (
|
||
!confirm(
|
||
`Clear QC failure on step ${op.sequence}. ${op.name}? The step will reopen for rework; the failing QC record stays on file.`,
|
||
)
|
||
) {
|
||
return;
|
||
}
|
||
setBusyId(op.id);
|
||
setError(null);
|
||
try {
|
||
await apiFetch(`/api/v1/operations/${op.id}/qc-reset`, { method: "POST" });
|
||
onChange();
|
||
} catch (err) {
|
||
setError(err instanceof ApiClientError ? err.message : "Reset failed");
|
||
} finally {
|
||
setBusyId(null);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<section>
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h2 className="text-lg font-semibold">Operations</h2>
|
||
<Button size="sm" onClick={() => setNewOpen(true)}>
|
||
Add operation
|
||
</Button>
|
||
</div>
|
||
<ErrorBanner message={error} />
|
||
<Card>
|
||
<table className="w-full text-sm">
|
||
<thead className="bg-slate-50 text-left text-slate-600 border-b border-slate-200">
|
||
<tr>
|
||
<th className="px-3 py-2 font-medium w-10">#</th>
|
||
<th className="px-3 py-2 font-medium">Name</th>
|
||
<th className="px-3 py-2 font-medium">Machine</th>
|
||
<th className="px-3 py-2 font-medium">QC</th>
|
||
<th className="px-3 py-2 font-medium">Status</th>
|
||
<th className="px-3 py-2 font-medium">QR</th>
|
||
<th className="px-3 py-2 text-right"></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{operations.map((op, i) => (
|
||
<tr key={op.id} className="border-b border-slate-100 last:border-0">
|
||
<td className="px-3 py-3 text-slate-600">{op.sequence}</td>
|
||
<td className="px-3 py-3">
|
||
<div className="font-medium flex items-center gap-2">
|
||
<span>{op.name}</span>
|
||
{op.kind === "qc" ? <Badge tone="blue">QC step</Badge> : null}
|
||
</div>
|
||
{op.templateName ? (
|
||
<div className="text-xs text-slate-500">from {op.templateName}</div>
|
||
) : null}
|
||
</td>
|
||
<td className="px-3 py-3 text-slate-600">{op.machineName ?? "—"}</td>
|
||
<td className="px-3 py-3">
|
||
{op.qcRequired ? <Badge tone="amber">required</Badge> : <span className="text-slate-400">—</span>}
|
||
</td>
|
||
<td className="px-3 py-3">
|
||
<Badge tone={STATUS_TONE[op.status] ?? "slate"}>
|
||
{STATUS_LABEL[op.status] ?? op.status}
|
||
</Badge>
|
||
</td>
|
||
<td className="px-3 py-3">
|
||
<code className="text-xs text-slate-500" title={op.qrToken}>
|
||
{op.qrToken.slice(0, 8)}…
|
||
</code>
|
||
</td>
|
||
<td className="px-3 py-3 text-right whitespace-nowrap">
|
||
<button
|
||
type="button"
|
||
className="text-slate-500 hover:text-slate-900 px-1 disabled:opacity-40"
|
||
disabled={i === 0 || busyId !== null}
|
||
onClick={() => move(i, -1)}
|
||
aria-label="Move up"
|
||
>
|
||
↑
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="text-slate-500 hover:text-slate-900 px-1 disabled:opacity-40"
|
||
disabled={i === operations.length - 1 || busyId !== null}
|
||
onClick={() => move(i, 1)}
|
||
aria-label="Move down"
|
||
>
|
||
↓
|
||
</button>
|
||
<Button variant="ghost" size="sm" onClick={() => setQrFor(op)} disabled={busyId !== null}>
|
||
QR
|
||
</Button>
|
||
<a
|
||
href={`/api/v1/operations/${op.id}/card.pdf`}
|
||
target="_blank"
|
||
rel="noopener"
|
||
className={`inline-flex items-center rounded-md px-2 py-1 text-xs text-slate-600 hover:text-slate-900 hover:underline ${
|
||
busyId !== null ? "pointer-events-none opacity-50" : ""
|
||
}`}
|
||
>
|
||
Print
|
||
</a>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => setLogsFor(op)}
|
||
disabled={busyId !== null}
|
||
>
|
||
Logs{op.timeLogs.length > 0 ? ` (${op.timeLogs.length})` : ""}
|
||
</Button>
|
||
<Button variant="ghost" size="sm" onClick={() => setEdit(op)} disabled={busyId !== null}>
|
||
Edit
|
||
</Button>
|
||
{op.status === "qc_failed" ? (
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => resetQc(op)}
|
||
disabled={busyId !== null}
|
||
>
|
||
Reset QC
|
||
</Button>
|
||
) : null}
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => remove(op)}
|
||
disabled={busyId !== null || op.status === "in_progress"}
|
||
>
|
||
Delete
|
||
</Button>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
{operations.length === 0 && (
|
||
<tr>
|
||
<td colSpan={7} className="px-4 py-10 text-center text-slate-500">
|
||
No operations on this part yet.
|
||
</td>
|
||
</tr>
|
||
)}
|
||
</tbody>
|
||
</table>
|
||
</Card>
|
||
|
||
{newOpen && (
|
||
<OperationModal
|
||
partId={partId}
|
||
machines={machines}
|
||
templates={templates}
|
||
onClose={() => setNewOpen(false)}
|
||
onSaved={() => {
|
||
setNewOpen(false);
|
||
onChange();
|
||
}}
|
||
/>
|
||
)}
|
||
{edit && (
|
||
<OperationModal
|
||
partId={partId}
|
||
operation={edit}
|
||
machines={machines}
|
||
templates={templates}
|
||
onClose={() => setEdit(null)}
|
||
onSaved={() => {
|
||
setEdit(null);
|
||
onChange();
|
||
}}
|
||
/>
|
||
)}
|
||
{qrFor && <QrModal operation={qrFor} onClose={() => setQrFor(null)} />}
|
||
{logsFor && (
|
||
<TimeLogsModal
|
||
operation={logsFor}
|
||
onClose={() => setLogsFor(null)}
|
||
onChange={() => {
|
||
onChange();
|
||
setLogsFor(null);
|
||
}}
|
||
/>
|
||
)}
|
||
</section>
|
||
);
|
||
}
|
||
|
||
// -------- Time log correction -------------------------------------------
|
||
|
||
function formatDateTimeLocal(iso: string | null): string {
|
||
// <input type="datetime-local"> wants "YYYY-MM-DDTHH:mm" in local time.
|
||
// Avoid `toISOString()` here — that's UTC and shifts the displayed value.
|
||
if (!iso) return "";
|
||
const d = new Date(iso);
|
||
const pad = (n: number) => String(n).padStart(2, "0");
|
||
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
|
||
}
|
||
|
||
function parseLocalDateTime(local: string): string | null {
|
||
if (!local) return null;
|
||
// Treat the input as local time — new Date("YYYY-MM-DDTHH:mm") already does,
|
||
// but we ensure seconds are zero so the round-trip is stable.
|
||
const d = new Date(local);
|
||
if (Number.isNaN(d.getTime())) return null;
|
||
return d.toISOString();
|
||
}
|
||
|
||
function durationText(startedAt: string, endedAt: string | null): string {
|
||
if (!endedAt) return "open";
|
||
const ms = new Date(endedAt).getTime() - new Date(startedAt).getTime();
|
||
if (ms < 0) return "inverted";
|
||
const totalMin = Math.round(ms / 60000);
|
||
const h = Math.floor(totalMin / 60);
|
||
const m = totalMin % 60;
|
||
return h > 0 ? `${h}h ${m}m` : `${m}m`;
|
||
}
|
||
|
||
function TimeLogsModal({
|
||
operation,
|
||
onClose,
|
||
onChange,
|
||
}: {
|
||
operation: OperationRow;
|
||
onClose: () => void;
|
||
onChange: () => void;
|
||
}) {
|
||
const [editing, setEditing] = useState<TimeLogRow | null>(null);
|
||
return (
|
||
<Modal
|
||
open
|
||
onClose={onClose}
|
||
title={`Time logs — step ${operation.sequence}. ${operation.name}`}
|
||
footer={
|
||
<>
|
||
<div className="flex-1" />
|
||
<Button variant="secondary" onClick={onClose}>
|
||
Close
|
||
</Button>
|
||
</>
|
||
}
|
||
>
|
||
{operation.timeLogs.length === 0 ? (
|
||
<p className="text-sm text-slate-500">No time logs recorded on this operation yet.</p>
|
||
) : (
|
||
<div className="space-y-2">
|
||
<p className="text-xs text-slate-500">
|
||
Adjust a stale or mis-entered log. Edits are audited; the operator's original row is kept in the audit log.
|
||
</p>
|
||
<table className="w-full text-sm">
|
||
<thead className="text-left text-slate-600 border-b border-slate-200">
|
||
<tr>
|
||
<th className="px-2 py-2 font-medium">Operator</th>
|
||
<th className="px-2 py-2 font-medium">Started</th>
|
||
<th className="px-2 py-2 font-medium">Ended</th>
|
||
<th className="px-2 py-2 font-medium">Duration</th>
|
||
<th className="px-2 py-2 font-medium">Units</th>
|
||
<th className="px-2 py-2 font-medium">Note</th>
|
||
<th className="px-2 py-2"></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{operation.timeLogs.map((log) => {
|
||
const isOpen = log.endedAt === null;
|
||
return (
|
||
<tr key={log.id} className="border-b border-slate-100 last:border-0 align-top">
|
||
<td className="px-2 py-2 text-slate-700">{log.operatorName}</td>
|
||
<td className="px-2 py-2 text-slate-600 whitespace-nowrap">
|
||
{new Date(log.startedAt).toLocaleString()}
|
||
</td>
|
||
<td className="px-2 py-2 text-slate-600 whitespace-nowrap">
|
||
{isOpen ? (
|
||
<Badge tone="amber">open</Badge>
|
||
) : (
|
||
new Date(log.endedAt!).toLocaleString()
|
||
)}
|
||
</td>
|
||
<td className="px-2 py-2 text-slate-600">
|
||
{durationText(log.startedAt, log.endedAt)}
|
||
</td>
|
||
<td className="px-2 py-2 text-slate-600">
|
||
{log.unitsProcessed ?? <span className="text-slate-400">—</span>}
|
||
</td>
|
||
<td className="px-2 py-2 text-slate-600">
|
||
{log.note ? (
|
||
<span className="line-clamp-2" title={log.note}>
|
||
{log.note}
|
||
</span>
|
||
) : (
|
||
<span className="text-slate-400">—</span>
|
||
)}
|
||
</td>
|
||
<td className="px-2 py-2 text-right whitespace-nowrap">
|
||
<Button variant="ghost" size="sm" onClick={() => setEditing(log)}>
|
||
Edit
|
||
</Button>
|
||
</td>
|
||
</tr>
|
||
);
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
)}
|
||
{editing && (
|
||
<EditTimeLogModal
|
||
log={editing}
|
||
onClose={() => setEditing(null)}
|
||
onSaved={() => {
|
||
setEditing(null);
|
||
onChange();
|
||
}}
|
||
/>
|
||
)}
|
||
</Modal>
|
||
);
|
||
}
|
||
|
||
function EditTimeLogModal({
|
||
log,
|
||
onClose,
|
||
onSaved,
|
||
}: {
|
||
log: TimeLogRow;
|
||
onClose: () => void;
|
||
onSaved: () => void;
|
||
}) {
|
||
const [startedAt, setStartedAt] = useState(formatDateTimeLocal(log.startedAt));
|
||
const [endedAt, setEndedAt] = useState(formatDateTimeLocal(log.endedAt));
|
||
const [units, setUnits] = useState(log.unitsProcessed === null ? "" : String(log.unitsProcessed));
|
||
const [note, setNote] = useState(log.note ?? "");
|
||
const [busy, setBusy] = useState(false);
|
||
const [error, setError] = useState<string | null>(null);
|
||
|
||
async function submit(e: React.FormEvent) {
|
||
e.preventDefault();
|
||
setBusy(true);
|
||
setError(null);
|
||
const patch: Record<string, unknown> = {};
|
||
const startedIso = parseLocalDateTime(startedAt);
|
||
if (startedIso && startedIso !== log.startedAt) patch.startedAt = startedIso;
|
||
const endedIso = endedAt ? parseLocalDateTime(endedAt) : null;
|
||
if (endedIso !== log.endedAt) patch.endedAt = endedIso;
|
||
if (units === "") {
|
||
if (log.unitsProcessed !== null) patch.unitsProcessed = null;
|
||
} else {
|
||
const n = Number(units);
|
||
if (Number.isFinite(n) && n !== log.unitsProcessed) patch.unitsProcessed = n;
|
||
}
|
||
const nextNote = note.trim() === "" ? null : note;
|
||
if (nextNote !== log.note) patch.note = nextNote;
|
||
|
||
if (Object.keys(patch).length === 0) {
|
||
onClose();
|
||
return;
|
||
}
|
||
try {
|
||
await apiFetch(`/api/v1/timelogs/${log.id}`, {
|
||
method: "PATCH",
|
||
body: JSON.stringify(patch),
|
||
});
|
||
onSaved();
|
||
} catch (err) {
|
||
setError(err instanceof ApiClientError ? err.message : "Save failed");
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
async function remove() {
|
||
if (
|
||
!confirm(
|
||
"Delete this time log entry? Prefer editing to zero units out when the row represents real work.",
|
||
)
|
||
) {
|
||
return;
|
||
}
|
||
setBusy(true);
|
||
setError(null);
|
||
try {
|
||
await apiFetch(`/api/v1/timelogs/${log.id}`, { method: "DELETE" });
|
||
onSaved();
|
||
} catch (err) {
|
||
setError(err instanceof ApiClientError ? err.message : "Delete failed");
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<Modal
|
||
open
|
||
onClose={onClose}
|
||
title="Edit time log"
|
||
footer={
|
||
<>
|
||
<Button variant="danger" size="sm" onClick={remove} disabled={busy}>
|
||
Delete
|
||
</Button>
|
||
<div className="flex-1" />
|
||
<Button variant="secondary" onClick={onClose} disabled={busy}>
|
||
Cancel
|
||
</Button>
|
||
<Button type="submit" form="tl-edit-form" disabled={busy}>
|
||
{busy ? "Saving…" : "Save"}
|
||
</Button>
|
||
</>
|
||
}
|
||
>
|
||
<form id="tl-edit-form" onSubmit={submit} className="space-y-4">
|
||
<Field label="Started at" required>
|
||
<Input
|
||
type="datetime-local"
|
||
value={startedAt}
|
||
onChange={(e) => setStartedAt(e.target.value)}
|
||
required
|
||
/>
|
||
</Field>
|
||
<Field
|
||
label="Ended at"
|
||
hint="Leave blank to re-open the log (the operator will need to close it themselves)."
|
||
>
|
||
<Input
|
||
type="datetime-local"
|
||
value={endedAt}
|
||
onChange={(e) => setEndedAt(e.target.value)}
|
||
/>
|
||
</Field>
|
||
<Field label="Units processed" hint="Leave blank for unknown.">
|
||
<Input
|
||
type="number"
|
||
min={0}
|
||
value={units}
|
||
onChange={(e) => setUnits(e.target.value)}
|
||
/>
|
||
</Field>
|
||
<Field label="Note">
|
||
<Textarea value={note} onChange={(e) => setNote(e.target.value)} />
|
||
</Field>
|
||
<ErrorBanner message={error} />
|
||
</form>
|
||
</Modal>
|
||
);
|
||
}
|
||
|
||
function QrModal({ operation, onClose }: { operation: OperationRow; onClose: () => void }) {
|
||
const [data, setData] = useState<
|
||
{ dataUrl: string; scanUrl: string; token: string } | null
|
||
>(null);
|
||
const [error, setError] = useState<string | null>(null);
|
||
|
||
// Fetch lazily so we don't pre-render QRs for every op on the page. The
|
||
// data URL is ~1 KB so this is cheap, but it does require a server hop.
|
||
useEffect(() => {
|
||
let cancelled = false;
|
||
apiFetch<{ dataUrl: string; scanUrl: string; token: string }>(
|
||
`/api/v1/operations/${operation.id}/qr`,
|
||
)
|
||
.then((d) => {
|
||
if (!cancelled) setData(d);
|
||
})
|
||
.catch((err) => {
|
||
if (!cancelled) setError(err instanceof ApiClientError ? err.message : "Load failed");
|
||
});
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [operation.id]);
|
||
|
||
return (
|
||
<Modal
|
||
open
|
||
onClose={onClose}
|
||
title={`QR: step ${operation.sequence}. ${operation.name}`}
|
||
footer={
|
||
<>
|
||
<div className="flex-1" />
|
||
<Button variant="secondary" onClick={onClose}>
|
||
Close
|
||
</Button>
|
||
{data ? (
|
||
<a
|
||
href={data.dataUrl}
|
||
download={`op-${operation.sequence}-${operation.id}.png`}
|
||
className="inline-flex items-center rounded-md bg-slate-900 text-white text-sm px-3 py-1.5 hover:bg-slate-800"
|
||
>
|
||
Download PNG
|
||
</a>
|
||
) : null}
|
||
</>
|
||
}
|
||
>
|
||
<div className="space-y-3">
|
||
{error ? (
|
||
<ErrorBanner message={error} />
|
||
) : data ? (
|
||
<>
|
||
<div className="flex justify-center bg-white border border-slate-200 rounded-md p-4">
|
||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||
<img
|
||
src={data.dataUrl}
|
||
alt={`QR for ${operation.name}`}
|
||
width={256}
|
||
height={256}
|
||
/>
|
||
</div>
|
||
<div className="text-xs text-slate-600 space-y-1">
|
||
<div>
|
||
<span className="font-medium">Scan URL:</span>{" "}
|
||
<a href={data.scanUrl} className="text-blue-600 hover:underline break-all">
|
||
{data.scanUrl}
|
||
</a>
|
||
</div>
|
||
<div>
|
||
<span className="font-medium">Token:</span>{" "}
|
||
<code className="text-slate-500">{data.token}</code>
|
||
</div>
|
||
</div>
|
||
</>
|
||
) : (
|
||
<div className="text-center text-slate-500 text-sm py-10">Rendering QR…</div>
|
||
)}
|
||
</div>
|
||
</Modal>
|
||
);
|
||
}
|
||
|
||
function OperationModal({
|
||
partId,
|
||
operation,
|
||
machines,
|
||
templates,
|
||
onClose,
|
||
onSaved,
|
||
}: {
|
||
partId: string;
|
||
operation?: OperationRow;
|
||
machines: MachineOption[];
|
||
templates: TemplateOption[];
|
||
onClose: () => void;
|
||
onSaved: () => void;
|
||
}) {
|
||
const editing = !!operation;
|
||
const [templateId, setTemplateId] = useState(operation?.templateId ?? "");
|
||
const [name, setName] = useState(operation?.name ?? "");
|
||
const [kind, setKind] = useState<"work" | "qc">(
|
||
(operation?.kind as "work" | "qc") ?? "work",
|
||
);
|
||
const [machineId, setMachineId] = useState(operation?.machineId ?? "");
|
||
const [settings, setSettings] = useState(operation?.settings ?? "");
|
||
const [materialNotes, setMaterialNotes] = useState(operation?.materialNotes ?? "");
|
||
const [instructions, setInstructions] = useState(operation?.instructions ?? "");
|
||
const [qcRequired, setQcRequired] = useState(operation?.qcRequired ?? false);
|
||
const [plannedMinutes, setPlannedMinutes] = useState(
|
||
operation?.plannedMinutes ? String(operation.plannedMinutes) : "",
|
||
);
|
||
const [plannedUnits, setPlannedUnits] = useState(
|
||
operation?.plannedUnits ? String(operation.plannedUnits) : "",
|
||
);
|
||
const [status, setStatus] = useState(operation?.status ?? "pending");
|
||
const [busy, setBusy] = useState(false);
|
||
const [error, setError] = useState<string | null>(null);
|
||
|
||
function applyTemplate(id: string) {
|
||
setTemplateId(id);
|
||
if (!id) return;
|
||
const t = templates.find((x) => x.id === id);
|
||
if (!t) return;
|
||
if (!name) setName(t.name);
|
||
if (!machineId && t.machineId) setMachineId(t.machineId);
|
||
if (!settings && t.defaultSettings) setSettings(t.defaultSettings);
|
||
if (!instructions && t.defaultInstructions) setInstructions(t.defaultInstructions);
|
||
if (t.qcRequired) setQcRequired(true);
|
||
}
|
||
|
||
async function submit(e: React.FormEvent) {
|
||
e.preventDefault();
|
||
setBusy(true);
|
||
setError(null);
|
||
try {
|
||
const body = {
|
||
templateId: templateId || null,
|
||
name,
|
||
kind,
|
||
machineId: machineId || null,
|
||
settings,
|
||
materialNotes,
|
||
instructions,
|
||
qcRequired,
|
||
plannedMinutes: plannedMinutes ? Number(plannedMinutes) : null,
|
||
plannedUnits: plannedUnits ? Number(plannedUnits) : null,
|
||
...(editing ? { status } : {}),
|
||
};
|
||
if (editing) {
|
||
await apiFetch(`/api/v1/operations/${operation!.id}`, {
|
||
method: "PATCH",
|
||
body: JSON.stringify(body),
|
||
});
|
||
} else {
|
||
await apiFetch(`/api/v1/parts/${partId}/operations`, {
|
||
method: "POST",
|
||
body: JSON.stringify(body),
|
||
});
|
||
}
|
||
onSaved();
|
||
} catch (err) {
|
||
setError(err instanceof ApiClientError ? err.message : "Save failed");
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<Modal
|
||
open
|
||
onClose={onClose}
|
||
title={editing ? `Edit operation ${operation!.sequence}. ${operation!.name}` : "New operation"}
|
||
footer={
|
||
<>
|
||
<div className="flex-1" />
|
||
<Button variant="secondary" onClick={onClose} disabled={busy}>
|
||
Cancel
|
||
</Button>
|
||
<Button type="submit" form="op-form" disabled={busy}>
|
||
{busy ? "Saving…" : editing ? "Save" : "Create"}
|
||
</Button>
|
||
</>
|
||
}
|
||
>
|
||
<form id="op-form" onSubmit={submit} className="space-y-4">
|
||
{!editing && (
|
||
<Field label="Start from template" hint="Pre-fills machine, settings, instructions, and QC.">
|
||
<Select value={templateId} onChange={(e) => applyTemplate(e.target.value)}>
|
||
<option value="">— ad-hoc, no template —</option>
|
||
{templates.map((t) => (
|
||
<option key={t.id} value={t.id}>
|
||
{t.name}
|
||
</option>
|
||
))}
|
||
</Select>
|
||
</Field>
|
||
)}
|
||
<Field label="Name" required>
|
||
<Input value={name} onChange={(e) => setName(e.target.value)} required />
|
||
</Field>
|
||
<Field
|
||
label="Kind"
|
||
hint='"Work" is a normal production step. "QC" is a dedicated inspection step — close always demands a pass/fail record and unit counts are ignored.'
|
||
>
|
||
<Select value={kind} onChange={(e) => setKind(e.target.value as "work" | "qc")}>
|
||
<option value="work">Work — production step</option>
|
||
<option value="qc">QC — dedicated inspection</option>
|
||
</Select>
|
||
</Field>
|
||
<Field label="Machine">
|
||
<Select value={machineId} onChange={(e) => setMachineId(e.target.value)}>
|
||
<option value="">— none —</option>
|
||
{machines.map((m) => (
|
||
<option key={m.id} value={m.id}>
|
||
{m.name}
|
||
</option>
|
||
))}
|
||
</Select>
|
||
</Field>
|
||
<div className="grid gap-3 sm:grid-cols-2">
|
||
<Field label="Planned minutes" hint="Optional estimate.">
|
||
<Input
|
||
type="number"
|
||
min={1}
|
||
value={plannedMinutes}
|
||
onChange={(e) => setPlannedMinutes(e.target.value)}
|
||
/>
|
||
</Field>
|
||
<Field label="Planned units" hint="Target count for this step.">
|
||
<Input
|
||
type="number"
|
||
min={1}
|
||
value={plannedUnits}
|
||
onChange={(e) => setPlannedUnits(e.target.value)}
|
||
/>
|
||
</Field>
|
||
</div>
|
||
<Field label="Settings (JSON)" hint='e.g. {"programNumber":47}. Optional.'>
|
||
<Textarea
|
||
value={settings}
|
||
onChange={(e) => setSettings(e.target.value)}
|
||
placeholder='{"programNumber":47}'
|
||
/>
|
||
</Field>
|
||
<Field label="Material notes" hint="Stock sizing, grain direction, etc.">
|
||
<Textarea value={materialNotes} onChange={(e) => setMaterialNotes(e.target.value)} />
|
||
</Field>
|
||
<Field label="Instructions" hint="Printed on the traveler card.">
|
||
<Textarea value={instructions} onChange={(e) => setInstructions(e.target.value)} />
|
||
</Field>
|
||
<label className="flex items-center gap-2 text-sm">
|
||
<input type="checkbox" checked={qcRequired} onChange={(e) => setQcRequired(e.target.checked)} />
|
||
<span>QC check required on close-out</span>
|
||
</label>
|
||
{editing && (
|
||
<Field
|
||
label="Status"
|
||
hint="Use QC-failed only if you need to block a step out-of-band; the normal path is for the operator's Done/fail to set it."
|
||
>
|
||
<Select value={status} onChange={(e) => setStatus(e.target.value)}>
|
||
<option value="pending">Pending</option>
|
||
<option value="in_progress">In progress</option>
|
||
<option value="partial">Partial</option>
|
||
<option value="completed">Completed</option>
|
||
<option value="qc_failed">QC failed</option>
|
||
</Select>
|
||
</Field>
|
||
)}
|
||
<ErrorBanner message={error} />
|
||
</form>
|
||
</Modal>
|
||
);
|
||
}
|
||
|
||
// -------- 3D viewer ------------------------------------------------------
|
||
|
||
function StepViewerSection({
|
||
partId,
|
||
fileId,
|
||
fileName,
|
||
hasThumbnail,
|
||
onThumbnailSaved,
|
||
}: {
|
||
partId: string;
|
||
fileId: string;
|
||
fileName: string;
|
||
hasThumbnail: boolean;
|
||
onThumbnailSaved: () => void;
|
||
}) {
|
||
const [open, setOpen] = useState(false);
|
||
const [edges, setEdges] = useState(true);
|
||
const [savingThumb, setSavingThumb] = useState(false);
|
||
const [thumbMessage, setThumbMessage] = useState<string | null>(null);
|
||
// Bump this to force a remount of the viewer (and therefore a fresh
|
||
// first-frame capture). Used by "Regenerate thumbnail".
|
||
const [captureNonce, setCaptureNonce] = useState(0);
|
||
// One-shot guard so onFirstFrame from the render loop only fires once per
|
||
// viewer mount. Reset whenever captureNonce advances.
|
||
const capturedRef = useRef(false);
|
||
// The viewer fetches via `/api/v1/files/:id/download`, which streams the
|
||
// stored STEP bytes with correct auth (admin session cookie is already set).
|
||
const url = `/api/v1/files/${fileId}/download`;
|
||
|
||
// Capture + upload the first-frame thumbnail. Runs at most once per open.
|
||
async function handleFirstFrame(blob: Blob) {
|
||
if (capturedRef.current) return;
|
||
capturedRef.current = true;
|
||
setSavingThumb(true);
|
||
setThumbMessage(null);
|
||
try {
|
||
const form = new FormData();
|
||
form.set("file", new File([blob], `part-${partId}.jpg`, { type: "image/jpeg" }));
|
||
const res = await apiFetch<{ file: { id: string } }>("/api/v1/files", {
|
||
method: "POST",
|
||
body: form,
|
||
});
|
||
await apiFetch(`/api/v1/parts/${partId}`, {
|
||
method: "PATCH",
|
||
body: JSON.stringify({ thumbnailFileId: res.file.id }),
|
||
});
|
||
setThumbMessage("Thumbnail saved.");
|
||
onThumbnailSaved();
|
||
} catch (err) {
|
||
setThumbMessage(
|
||
err instanceof ApiClientError ? `Thumbnail save failed: ${err.message}` : "Thumbnail save failed",
|
||
);
|
||
} finally {
|
||
setSavingThumb(false);
|
||
}
|
||
}
|
||
|
||
// Only request a new thumbnail if there isn't one already (or the user hit
|
||
// "Regenerate"), to avoid overwriting a good capture with a worse one every
|
||
// time someone opens the viewer.
|
||
const shouldCapture = open && (!hasThumbnail || captureNonce > 0) && !capturedRef.current;
|
||
|
||
return (
|
||
<section className="mb-8">
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h2 className="text-lg font-semibold">3D viewer</h2>
|
||
<div className="flex items-center gap-2">
|
||
{open ? (
|
||
<>
|
||
<label className="flex items-center gap-1.5 text-xs text-slate-600">
|
||
<input
|
||
type="checkbox"
|
||
checked={edges}
|
||
onChange={(e) => setEdges(e.target.checked)}
|
||
/>
|
||
Show edges
|
||
</label>
|
||
{hasThumbnail ? (
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
disabled={savingThumb}
|
||
onClick={() => {
|
||
capturedRef.current = false;
|
||
setThumbMessage("Regenerating on next frame…");
|
||
setCaptureNonce((n) => n + 1);
|
||
}}
|
||
>
|
||
{savingThumb ? "Saving…" : "Regenerate thumbnail"}
|
||
</Button>
|
||
) : null}
|
||
</>
|
||
) : null}
|
||
<Button variant={open ? "secondary" : "primary"} size="sm" onClick={() => setOpen((v) => !v)}>
|
||
{open ? "Hide" : "Show 3D"}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
{open ? (
|
||
<Card>
|
||
<div className="p-3">
|
||
<div className="mb-2 flex items-center justify-between gap-3 text-xs text-slate-500">
|
||
<span className="truncate" title={fileName}>
|
||
Viewing: <code className="font-mono text-slate-700">{fileName}</code>
|
||
</span>
|
||
{thumbMessage ? <span className="text-slate-500">{thumbMessage}</span> : null}
|
||
</div>
|
||
<StepViewer
|
||
key={`${fileId}-${edges ? "e" : "ne"}-${captureNonce}`}
|
||
url={url}
|
||
showEdges={edges}
|
||
onFirstFrame={shouldCapture ? handleFirstFrame : undefined}
|
||
/>
|
||
<p className="mt-2 text-[11px] text-slate-500">
|
||
Drag to rotate · scroll to zoom · right-drag to pan. Parsing and rendering happen in
|
||
your browser; the first view also uploads a ~480×360 JPEG thumbnail for the parts list.
|
||
</p>
|
||
</div>
|
||
</Card>
|
||
) : (
|
||
<p className="text-sm text-slate-500">
|
||
Loads the STEP file into an interactive 3D view. Click <span className="font-medium">Show 3D</span>{" "}
|
||
to start — the viewer downloads ~2 MB of OpenCascade WASM on first use.
|
||
</p>
|
||
)}
|
||
</section>
|
||
);
|
||
}
|
||
|
||
// -------- Files ----------------------------------------------------------
|
||
|
||
function FileSlot({
|
||
partId,
|
||
label,
|
||
description,
|
||
accept,
|
||
slot,
|
||
file,
|
||
onChange,
|
||
}: {
|
||
partId: string;
|
||
label: string;
|
||
description: string;
|
||
accept: string;
|
||
slot: Slot;
|
||
file: FileView | null;
|
||
onChange: () => void;
|
||
}) {
|
||
const inputRef = useRef<HTMLInputElement>(null);
|
||
const [busy, setBusy] = useState(false);
|
||
const [error, setError] = useState<string | null>(null);
|
||
|
||
async function upload(f: File) {
|
||
setBusy(true);
|
||
setError(null);
|
||
try {
|
||
const form = new FormData();
|
||
form.set("file", f);
|
||
const uploaded = await apiFetch<{ file: { id: string } }>("/api/v1/files", {
|
||
method: "POST",
|
||
body: form,
|
||
});
|
||
await apiFetch(`/api/v1/parts/${partId}`, {
|
||
method: "PATCH",
|
||
body: JSON.stringify({ [slot]: uploaded.file.id }),
|
||
});
|
||
onChange();
|
||
} catch (err) {
|
||
setError(err instanceof ApiClientError ? err.message : "Upload failed");
|
||
} finally {
|
||
setBusy(false);
|
||
if (inputRef.current) inputRef.current.value = "";
|
||
}
|
||
}
|
||
|
||
async function detach() {
|
||
if (!confirm(`Detach ${label}?`)) return;
|
||
setBusy(true);
|
||
setError(null);
|
||
try {
|
||
await apiFetch(`/api/v1/parts/${partId}`, {
|
||
method: "PATCH",
|
||
body: JSON.stringify({ [slot]: null }),
|
||
});
|
||
onChange();
|
||
} catch (err) {
|
||
setError(err instanceof ApiClientError ? err.message : "Detach failed");
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<Card>
|
||
<div className="p-4 space-y-3">
|
||
<div>
|
||
<h3 className="font-semibold">{label}</h3>
|
||
<p className="text-xs text-slate-500">{description}</p>
|
||
</div>
|
||
{file ? (
|
||
<div className="rounded-md border border-slate-200 bg-slate-50 p-3 text-sm">
|
||
<div className="font-medium truncate" title={file.originalName}>
|
||
{file.originalName}
|
||
</div>
|
||
<div className="text-xs text-slate-500 mt-0.5">
|
||
{formatBytes(file.sizeBytes)} · {file.kind}
|
||
</div>
|
||
<div className="flex gap-2 mt-2">
|
||
<a
|
||
href={`/api/v1/files/${file.id}/download`}
|
||
className="text-xs text-blue-600 hover:underline"
|
||
>
|
||
Download
|
||
</a>
|
||
<button
|
||
type="button"
|
||
onClick={detach}
|
||
disabled={busy}
|
||
className="text-xs text-red-600 hover:underline disabled:opacity-50"
|
||
>
|
||
Detach
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => inputRef.current?.click()}
|
||
disabled={busy}
|
||
className="text-xs text-slate-600 hover:underline disabled:opacity-50 ml-auto"
|
||
>
|
||
Replace
|
||
</button>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="rounded-md border border-dashed border-slate-300 p-4 text-center">
|
||
<p className="text-xs text-slate-500 mb-2">No file attached.</p>
|
||
<Button
|
||
type="button"
|
||
size="sm"
|
||
variant="secondary"
|
||
onClick={() => inputRef.current?.click()}
|
||
disabled={busy}
|
||
>
|
||
{busy ? "Uploading…" : "Upload"}
|
||
</Button>
|
||
</div>
|
||
)}
|
||
<input
|
||
ref={inputRef}
|
||
type="file"
|
||
accept={accept}
|
||
className="hidden"
|
||
onChange={(e) => {
|
||
const f = e.target.files?.[0];
|
||
if (f) upload(f);
|
||
}}
|
||
/>
|
||
<ErrorBanner message={error} />
|
||
</div>
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
// -------- Edit part ------------------------------------------------------
|
||
|
||
function EditPartModal({
|
||
part,
|
||
onClose,
|
||
onSaved,
|
||
onDeleted,
|
||
}: {
|
||
part: PartInfo;
|
||
onClose: () => void;
|
||
onSaved: () => void;
|
||
onDeleted: () => void;
|
||
}) {
|
||
const [code, setCode] = useState(part.code);
|
||
const [name, setName] = useState(part.name);
|
||
const [material, setMaterial] = useState(part.material ?? "");
|
||
const [qty, setQty] = useState(String(part.qty));
|
||
const [notes, setNotes] = useState(part.notes ?? "");
|
||
const [busy, setBusy] = useState(false);
|
||
const [error, setError] = useState<string | null>(null);
|
||
|
||
async function submit(e: React.FormEvent) {
|
||
e.preventDefault();
|
||
setBusy(true);
|
||
setError(null);
|
||
try {
|
||
await apiFetch(`/api/v1/parts/${part.id}`, {
|
||
method: "PATCH",
|
||
body: JSON.stringify({
|
||
code,
|
||
name,
|
||
material: material || null,
|
||
qty: Number(qty),
|
||
notes: notes || null,
|
||
}),
|
||
});
|
||
onSaved();
|
||
onClose();
|
||
} catch (err) {
|
||
setError(err instanceof ApiClientError ? err.message : "Save failed");
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
async function remove() {
|
||
if (!confirm(`Delete part ${part.code}? All operations on it will be removed.`)) return;
|
||
setBusy(true);
|
||
setError(null);
|
||
try {
|
||
await apiFetch(`/api/v1/parts/${part.id}`, { method: "DELETE" });
|
||
onDeleted();
|
||
} catch (err) {
|
||
setError(err instanceof ApiClientError ? err.message : "Delete failed");
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<Modal
|
||
open
|
||
onClose={onClose}
|
||
title={`Edit ${part.code}`}
|
||
footer={
|
||
<>
|
||
<Button variant="danger" size="sm" onClick={remove} disabled={busy}>
|
||
Delete
|
||
</Button>
|
||
<div className="flex-1" />
|
||
<Button variant="secondary" onClick={onClose} disabled={busy}>
|
||
Cancel
|
||
</Button>
|
||
<Button type="submit" form="part-edit-form" disabled={busy}>
|
||
{busy ? "Saving…" : "Save"}
|
||
</Button>
|
||
</>
|
||
}
|
||
>
|
||
<form id="part-edit-form" onSubmit={submit} className="space-y-4">
|
||
<Field label="Code" required>
|
||
<Input value={code} onChange={(e) => setCode(e.target.value)} required />
|
||
</Field>
|
||
<Field label="Name" required>
|
||
<Input value={name} onChange={(e) => setName(e.target.value)} required />
|
||
</Field>
|
||
<Field label="Material">
|
||
<Input value={material} onChange={(e) => setMaterial(e.target.value)} />
|
||
</Field>
|
||
<Field label="Quantity" required>
|
||
<Input type="number" min={1} value={qty} onChange={(e) => setQty(e.target.value)} required />
|
||
</Field>
|
||
<Field label="Notes">
|
||
<Textarea value={notes} onChange={(e) => setNotes(e.target.value)} />
|
||
</Field>
|
||
<ErrorBanner message={error} />
|
||
</form>
|
||
</Modal>
|
||
);
|
||
}
|