[id] pages render in portal
This commit is contained in:
parent
dcd88b200f
commit
656ad5fe7e
17 changed files with 1028 additions and 1025 deletions
58
app/materials/materials-coatings/[id]/materials-coatings.tsx
Normal file
58
app/materials/materials-coatings/[id]/materials-coatings.tsx
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useParams } from 'next/navigation';
|
||||
|
||||
export default function MaterialCoatingDetailsPage() {
|
||||
const { id } = useParams();
|
||||
const [material, setMaterial] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
|
||||
fetch(
|
||||
`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/material_coating/${id}?fields=id,name,abbreviation,technical_name,composition,notes,override_reason,coating_status.name,coating_status_override,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>Status:</strong> {material.coating_status?.name || '—'}</p>
|
||||
<p><strong>Abbreviation:</strong> {material.abbreviation || '—'}</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-coatings" className="text-blue-600 underline">← Back to Coatings</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -1,58 +1,5 @@
|
|||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useParams } from 'next/navigation';
|
||||
|
||||
export default function MaterialCoatingDetailsPage() {
|
||||
const { id } = useParams();
|
||||
const [material, setMaterial] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
|
||||
fetch(
|
||||
`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/material_coating/${id}?fields=id,name,abbreviation,technical_name,composition,notes,override_reason,coating_status.name,coating_status_override,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>Status:</strong> {material.coating_status?.name || '—'}</p>
|
||||
<p><strong>Abbreviation:</strong> {material.abbreviation || '—'}</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-coatings" className="text-blue-600 underline">← Back to Coatings</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
// app/materials/materials-coatings/[id]/page.tsx
|
||||
import { redirect } from "next/navigation";
|
||||
export default function Page({ params }: { params: { id: string } }) {
|
||||
redirect(`/portal/materials?t=materials-coatings&id=${encodeURIComponent(params.id)}`);
|
||||
}
|
||||
|
||||
|
|
|
|||
60
app/materials/materials/[id]/materials.tsx
Normal file
60
app/materials/materials/[id]/materials.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -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)}`);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue