[id] pages render in portal

This commit is contained in:
makearmy 2025-09-27 17:45:20 -04:00
parent dcd88b200f
commit 656ad5fe7e
17 changed files with 1028 additions and 1025 deletions

View file

@ -0,0 +1,60 @@
'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>
);
}

View file

@ -1,60 +1,5 @@
'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>
);
// app/materials/materials/[id]/page.tsx
import { redirect } from "next/navigation";
export default function Page({ params }: { params: { id: string } }) {
redirect(`/portal/materials?t=materials&id=${encodeURIComponent(params.id)}`);
}