60 lines
2.4 KiB
TypeScript
60 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { useEffect, useState } from 'react';
|
|
import { useParams } from 'next/navigation';
|
|
|
|
export default function MaterialDetailsPage() {
|
|
const { id } = useParams();
|
|
const [material, setMaterial] = useState(null);
|
|
|
|
useEffect(() => {
|
|
if (!id) return;
|
|
|
|
fetch(
|
|
`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/material/${id}?fields=id,name,abbreviation,common_names,technical_name,composition,material_cat.name,material_status.name,notes,override_reason,hazard_tags.hazard_tags_id.hazard_source.source,hazard_tags.hazard_tags_id.hazard_danger.danger,hazard_tags.hazard_tags_id.hazard_severity.severity`
|
|
)
|
|
.then((res) => res.json())
|
|
.then((data) => setMaterial(data.data || null));
|
|
}, [id]);
|
|
|
|
if (!material) return <div className="p-6">Loading...</div>;
|
|
|
|
return (
|
|
<div className="p-6 max-w-4xl mx-auto">
|
|
<h1 className="text-3xl font-bold mb-4">{material.name}</h1>
|
|
<div className="space-y-2">
|
|
<p><strong>Category:</strong> {material.material_cat?.name || '—'}</p>
|
|
<p><strong>Status:</strong> {material.material_status?.name || '—'}</p>
|
|
<p><strong>Abbreviation:</strong> {material.abbreviation || '—'}</p>
|
|
<p><strong>Common Names:</strong> {material.common_names || '—'}</p>
|
|
<p><strong>Technical Name:</strong> {material.technical_name || '—'}</p>
|
|
<p><strong>Composition:</strong> {material.composition || '—'}</p>
|
|
<p><strong>Notes:</strong> {material.notes || '—'}</p>
|
|
<p><strong>Override Reason:</strong> {material.override_reason || '—'}</p>
|
|
|
|
<div>
|
|
<strong>Hazard Tags</strong>
|
|
<ul className="list-disc pl-6">
|
|
{Array.isArray(material.hazard_tags) && material.hazard_tags.length > 0 ? (
|
|
material.hazard_tags.map((tag, index) => (
|
|
<li key={index}>
|
|
{tag.hazard_tags_id?.hazard_source?.source || '—'} |{' '}
|
|
{tag.hazard_tags_id?.hazard_danger?.danger || '—'} |{' '}
|
|
{tag.hazard_tags_id?.hazard_severity?.severity || '—'}
|
|
</li>
|
|
))
|
|
) : (
|
|
<li>None</li>
|
|
)}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-8">
|
|
<Link href="/materials" className="text-blue-600 underline">← Back to Materials</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|