Zoek functie voor items toegevoegd

This commit is contained in:
LogJurgenR
2026-08-19 17:15:28 +02:00
parent 686339325e
commit 16cee03332
5 changed files with 174 additions and 80 deletions
+2 -79
View File
@@ -1,5 +1,6 @@
import LogoutButton from "@/app/logout-button";
import LanguageSwitcher from "@/app/language-switcher";
import ItemsResults from "@/app/items-results";
import { getItems } from "@/lib/items";
import { cookies } from "next/headers";
import { getLocale, LOCALE_COOKIE, t } from "@/lib/i18n";
@@ -31,85 +32,7 @@ export default async function ItemsPage() {
</div>
<div className="mx-auto max-w-7xl px-6 py-10">
{/* KPI Card */}
<div className="mb-6">
<div className="inline-flex rounded-2xl bg-white p-6 shadow-md ring-1 ring-slate-200">
<div>
<p className="text-sm text-slate-500">{t(locale, "articles.count")}</p>
<p className="mt-1 text-3xl font-bold text-cyan-700">
{items.length}
</p>
</div>
</div>
</div>
{/* Main Card */}
<div className="overflow-hidden rounded-2xl bg-white shadow-lg ring-1 ring-slate-200">
<div className="border-b border-slate-200 px-6 py-4">
<h2 className="text-lg font-semibold text-slate-800">
{t(locale, "articles.heading")}
</h2>
</div>
{/* Error */}
{error && (
<div className="m-6 rounded-lg border border-red-200 bg-red-50 p-4 text-red-700">
{t(locale, "articles.error")}
</div>
)}
{/* Table */}
{items.length > 0 && (
<div className="overflow-x-auto">
<table className="w-full">
<thead>
<tr className="bg-slate-100">
<th className="px-6 py-4 text-left text-sm font-semibold text-slate-700">
{t(locale, "articles.code")}
</th>
<th className="px-6 py-4 text-left text-sm font-semibold text-slate-700">
{t(locale, "articles.descriptionColumn")}
</th>
</tr>
</thead>
<tbody>
{items.map((item) => (
<tr
key={item.ItemCode}
className="border-t border-slate-100 transition-colors hover:bg-cyan-50"
>
<td className="px-6 py-4 font-mono text-sm font-medium text-cyan-700">
{item.ItemCode}
</td>
<td className="px-6 py-4 text-slate-700">
{item.ItemName}
</td>
</tr>
))}
</tbody>
</table>
</div>
)}
{/* Empty State */}
{items.length === 0 && !error && (
<div className="py-20 text-center">
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-slate-100">
📦
</div>
<h3 className="text-lg font-semibold text-slate-700">
{t(locale, "articles.emptyTitle")}
</h3>
<p className="mt-2 text-slate-500">
{t(locale, "articles.emptyDescription")}
</p>
</div>
)}
</div>
<ItemsResults initialItems={items} initialError={error} locale={locale} />
</div>
</main>
);