chore: initial Vector 2.0 monorepo
Ground-up TypeScript rewrite of the Vector hardware parts inventory
system. Ships the full roadmap (Phases 0-8) in one initial commit:
- pnpm + Turbo monorepo: apps/{api,web,e2e}, packages/{db,shared,ui,config}
- Express 5 + Prisma 5 + zod validation + JWT w/ refresh-token rotation
- React 19 + Vite + shadcn/ui + TanStack Query/Table + nuqs URL state
- Repair/RMA, tags, bulk ops, saved views, CSV audit export
- Analytics dashboard on Recharts + EOL tracking
- Signed webhook subscriptions (HMAC-SHA256) with in-process emitter
- Vitest unit tests (shared schemas, api services/helpers) + Playwright skeleton
- Gitea Actions CI (lint, typecheck, test+coverage, build) + Renovate
Deferred follow-ups: Postgres cutover (data-migration script ready),
BullMQ worker for webhook delivery, @react-pdf PDF export, CSV import wizard.
This commit is contained in:
@@ -0,0 +1,251 @@
|
||||
import { useState } from 'react';
|
||||
import { Link, useNavigate, useParams } from 'react-router-dom';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { AlertTriangle, ArrowLeft, Edit, Trash2 } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
Separator,
|
||||
Skeleton,
|
||||
} from '@vector/ui';
|
||||
import { getPart, deletePart } from '../lib/api/parts.js';
|
||||
import { ApiRequestError } from '../lib/api/client.js';
|
||||
import { queryKeys } from '../lib/queryKeys.js';
|
||||
import { useAuth } from '../contexts/AuthContext.js';
|
||||
import { PartStateBadge } from '../components/parts/PartStateBadge.js';
|
||||
import { PartEventTimeline } from '../components/parts/PartEventTimeline.js';
|
||||
import { PartFormDialog } from '../components/parts/PartFormDialog.js';
|
||||
import { PartRepairSection } from '../components/parts/PartRepairSection.js';
|
||||
import { TagPicker } from '../components/tags/TagPicker.js';
|
||||
import { ConfirmDialog } from '../components/ConfirmDialog.js';
|
||||
|
||||
function DetailRow({ label, value }: { label: string; value: React.ReactNode }) {
|
||||
return (
|
||||
<div className="grid grid-cols-[10rem_1fr] gap-2 text-sm">
|
||||
<dt className="text-muted-foreground">{label}</dt>
|
||||
<dd className="text-foreground">{value}</dd>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function PartDetail() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
const { user } = useAuth();
|
||||
const isAdmin = user?.role === 'ADMIN';
|
||||
|
||||
const [editOpen, setEditOpen] = useState(false);
|
||||
const [confirmDelete, setConfirmDelete] = useState(false);
|
||||
|
||||
const { data: part, isPending, isError, error } = useQuery({
|
||||
queryKey: queryKeys.parts.detail(id!),
|
||||
queryFn: () => getPart(id!),
|
||||
enabled: Boolean(id),
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: () => deletePart(id!),
|
||||
onSuccess: () => {
|
||||
toast.success('Part deleted');
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.parts.all });
|
||||
navigate('/parts', { replace: true });
|
||||
},
|
||||
onError: (err) => {
|
||||
toast.error(err instanceof ApiRequestError ? err.body.message : 'Delete failed');
|
||||
},
|
||||
});
|
||||
|
||||
if (isPending) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<Skeleton className="h-8 w-64" />
|
||||
<Skeleton className="h-32 w-full" />
|
||||
<Skeleton className="h-48 w-full" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isError || !part) {
|
||||
const msg = error instanceof ApiRequestError ? error.body.message : 'Part not found.';
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Part unavailable</CardTitle>
|
||||
<CardDescription>{msg}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button variant="outline" onClick={() => navigate('/parts')}>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Back to parts
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const eolDate = part.manufacturer.eolDate ? new Date(part.manufacturer.eolDate) : null;
|
||||
const pastEol = eolDate ? eolDate.getTime() < Date.now() : false;
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<Button variant="ghost" size="icon" onClick={() => navigate('/parts')} aria-label="Back">
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<div>
|
||||
<h1 className="font-mono text-lg font-semibold tracking-tight">{part.serialNumber}</h1>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{part.manufacturer.name} · {part.mpn}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<PartStateBadge state={part.state} />
|
||||
<Button variant="outline" size="sm" onClick={() => setEditOpen(true)}>
|
||||
<Edit className="h-3.5 w-3.5" />
|
||||
Edit
|
||||
</Button>
|
||||
{isAdmin && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-destructive hover:text-destructive"
|
||||
onClick={() => setConfirmDelete(true)}
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
Delete
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{pastEol && eolDate && (
|
||||
<Card className="border-warning/60 bg-warning/10">
|
||||
<CardContent className="flex items-start gap-3 py-3">
|
||||
<AlertTriangle className="mt-0.5 h-4 w-4 text-warning" />
|
||||
<div className="text-sm">
|
||||
<span className="font-medium text-foreground">
|
||||
{part.manufacturer.name} reached EOL {eolDate.toLocaleDateString()}.
|
||||
</span>{' '}
|
||||
<span className="text-muted-foreground">
|
||||
Plan a replacement for this part.
|
||||
</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-[1fr_1.2fr]">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">Summary</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<dl className="space-y-2">
|
||||
<DetailRow label="Serial" value={<span className="font-mono text-xs">{part.serialNumber}</span>} />
|
||||
<DetailRow label="MPN" value={part.mpn} />
|
||||
<DetailRow
|
||||
label="Manufacturer"
|
||||
value={
|
||||
<Link
|
||||
to="/manufacturers"
|
||||
className="text-foreground hover:underline"
|
||||
>
|
||||
{part.manufacturer.name}
|
||||
</Link>
|
||||
}
|
||||
/>
|
||||
<DetailRow label="State" value={<PartStateBadge state={part.state} />} />
|
||||
<DetailRow
|
||||
label="Location"
|
||||
value={
|
||||
part.bin?.fullPath ? (
|
||||
<span className="font-mono text-xs">{part.bin.fullPath}</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground italic">Unassigned</span>
|
||||
)
|
||||
}
|
||||
/>
|
||||
<DetailRow
|
||||
label="Price"
|
||||
value={
|
||||
part.price != null ? (
|
||||
<span className="tabular-nums">${part.price.toFixed(2)}</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground">—</span>
|
||||
)
|
||||
}
|
||||
/>
|
||||
<DetailRow
|
||||
label="EOL"
|
||||
value={
|
||||
eolDate ? (
|
||||
<span className={pastEol ? 'text-warning' : ''}>
|
||||
{eolDate.toLocaleDateString()}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground">—</span>
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Separator className="my-2" />
|
||||
<DetailRow
|
||||
label="Created"
|
||||
value={new Date(part.createdAt).toLocaleString()}
|
||||
/>
|
||||
<DetailRow
|
||||
label="Updated"
|
||||
value={new Date(part.updatedAt).toLocaleString()}
|
||||
/>
|
||||
</dl>
|
||||
{part.notes && (
|
||||
<>
|
||||
<Separator className="my-3" />
|
||||
<div>
|
||||
<p className="mb-1 text-xs font-medium text-muted-foreground">Notes</p>
|
||||
<p className="whitespace-pre-wrap text-sm text-foreground">{part.notes}</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<Separator className="my-3" />
|
||||
<div>
|
||||
<p className="mb-2 text-xs font-medium text-muted-foreground">Tags</p>
|
||||
<TagPicker partId={part.id} />
|
||||
</div>
|
||||
<Separator className="my-3" />
|
||||
<PartRepairSection partId={part.id} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">History</CardTitle>
|
||||
<CardDescription>Every field change is logged here.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<PartEventTimeline partId={part.id} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<PartFormDialog open={editOpen} onOpenChange={setEditOpen} part={part} />
|
||||
<ConfirmDialog
|
||||
open={confirmDelete}
|
||||
onOpenChange={setConfirmDelete}
|
||||
title="Delete part?"
|
||||
description={`Permanently remove part ${part.serialNumber}. Its history will be removed too.`}
|
||||
confirmLabel="Delete"
|
||||
destructive
|
||||
pending={deleteMutation.isPending}
|
||||
onConfirm={() => deleteMutation.mutate()}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user