added project, material, sources to portal
This commit is contained in:
parent
c7511b98fc
commit
45d4e08cd8
9 changed files with 90 additions and 282 deletions
58
app/materials/materials-coatings/[id]/page.tsx
Normal file
58
app/materials/materials-coatings/[id]/page.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>
|
||||
);
|
||||
}
|
||||
|
||||
127
app/materials/materials-coatings/page.tsx
Normal file
127
app/materials/materials-coatings/page.tsx
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { useEffect, useState, useMemo } from 'react';
|
||||
|
||||
function highlightMatch(text, query) {
|
||||
if (!query) return text;
|
||||
const parts = text.split(new RegExp(`(${query})`, 'gi'));
|
||||
return parts.map((part, i) =>
|
||||
part.toLowerCase() === query.toLowerCase() ? <mark key={i}>{part}</mark> : part
|
||||
);
|
||||
}
|
||||
|
||||
export default function CoatingsPage() {
|
||||
const [coatings, setCoatings] = useState([]);
|
||||
const [query, setQuery] = useState('');
|
||||
const [debouncedQuery, setDebouncedQuery] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => setDebouncedQuery(query), 300);
|
||||
return () => clearTimeout(timer);
|
||||
}, [query]);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(
|
||||
`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/material_coating?fields=id,name,abbreviation,technical_name,composition,coating_status.name&limit=-1`
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => setCoatings(data.data || []));
|
||||
}, []);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
const q = debouncedQuery.toLowerCase();
|
||||
return coatings.filter((coat) =>
|
||||
[
|
||||
coat.name,
|
||||
coat.technical_name,
|
||||
coat.abbreviation,
|
||||
coat.composition,
|
||||
coat.coating_status?.name
|
||||
]
|
||||
.filter(Boolean)
|
||||
.some((field) => field.toLowerCase().includes(q))
|
||||
);
|
||||
}, [coatings, debouncedQuery]);
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-7xl mx-auto">
|
||||
<div className="mb-6 flex flex-col lg:flex-row gap-4">
|
||||
<div className="flex-1 card bg-card text-card-foreground relative pb-16">
|
||||
<h1 className="text-3xl font-bold mb-2">Laser Material Coatings</h1>
|
||||
<input
|
||||
type="search"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="Search coatings..."
|
||||
className="w-full max-w-md mb-4 dark:bg-background border border-border rounded-md p-2"
|
||||
/>
|
||||
<h2 className="font-semibold mb-1">📌 Disclaimer</h2>
|
||||
<p className="mb-6">
|
||||
The following coatings are provided for educational purposes only and are not intended to be used as your sole or primary source of information when assessing the safety of any particular coating. It is your responsibility alone to ensure your safety when operating your equipment. This resource is provided as-is, free of charge under the assumption you are exercising all other relevant safety precautions.
|
||||
</p>
|
||||
<div className="absolute bottom-4 left-4">
|
||||
<Link
|
||||
href="/"
|
||||
className="btn-primary"
|
||||
>
|
||||
← Back to Main Menu
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 card bg-[#422c17] text-white">
|
||||
<h2 className="font-bold text-base mb-2">⚠ Safety Level Definitions</h2>
|
||||
<ul className="space-y-2">
|
||||
<li><strong>Safe</strong> – Materials marked as safe are widely considered to be generally safe by the laser community at large. This does not mean normal safety protocols should not be observed.</li>
|
||||
<li><strong>Level I – Caution</strong> | These materials are typically safe when normal safety protocol observed. This includes skin, eye and respiratory protection, regulated marking parameters, and proper exhaust and filtration.</li>
|
||||
<li><strong>Level II – Dangerous</strong> | These materials can be harmful even if normal safety protocol observed. Strict adherence to safety protocols required at all times. Exercise extreme caution and mindfulness.</li>
|
||||
<li><strong>Level III – Critical Hazard</strong> | These materials pose an imminent threat of bodily harm or death. Materials marked Critical Hazard should not be processed by lasers in any environment for any reason.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{filtered.length === 0 ? (
|
||||
<p className="text-muted">No coatings found.</p>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="table-fixed min-w-full border border-border text-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="px-4 py-2 text-left w-48">Name</th>
|
||||
<th className="px-4 py-2 text-left w-32 whitespace-nowrap">Status</th>
|
||||
<th className="px-4 py-2 text-left w-32">Abbreviation</th>
|
||||
<th className="px-4 py-2 text-left w-64">Technical Name</th>
|
||||
<th className="px-4 py-2 text-left w-64">Composition</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filtered.map((coat) => (
|
||||
<tr key={coat.id} className="border-t border-border align-top">
|
||||
<td className="px-4 py-2 truncate max-w-[12rem]">
|
||||
<Link href={`/materials-coatings/${coat.id}`} className="text-accent underline">
|
||||
{highlightMatch(coat.name, debouncedQuery)}
|
||||
</Link>
|
||||
</td>
|
||||
<td className="px-4 py-2 whitespace-nowrap">
|
||||
{highlightMatch(coat.coating_status?.name || '—', debouncedQuery)}
|
||||
</td>
|
||||
<td className="px-4 py-2 truncate max-w-[8rem]">
|
||||
{highlightMatch(coat.abbreviation || '—', debouncedQuery)}
|
||||
</td>
|
||||
<td className="px-4 py-2 truncate max-w-[16rem]">
|
||||
{highlightMatch(coat.technical_name || '—', debouncedQuery)}
|
||||
</td>
|
||||
<td className="px-4 py-2 truncate max-w-[16rem]">
|
||||
{highlightMatch(coat.composition || '—', debouncedQuery)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue