Heb er een PWA van gemaakt en layout gecorrigeerd

2026-08-19 16:46:29 +02:00
parent d3cab99d86
commit 686339325e
21 changed files with 1629 additions and 103 deletions
@@ -0,0 +1,26 @@
+import { NextResponse } from "next/server";
+import { SESSION_COOKIE } from "@/lib/auth";
+
+export async function POST(request: Request) {
+  const body = await request.json().catch(() => null);
+
+  if (body?.username !== "admin" || body?.password !== "admin") {
+    return NextResponse.json(
+      { error: "invalid_credentials" },
+      { status: 401 },
+    );
+  }
+
+  const response = NextResponse.json({ success: true });
+  response.cookies.set({
+    name: SESSION_COOKIE,
+    value: "authenticated",
+    httpOnly: true,
+    sameSite: "lax",
+    secure: process.env.NODE_ENV === "production",
+    maxAge: 60 * 60 * 8,
+    path: "/",
+  });
+
+  return response;
+}
@@ -0,0 +1,15 @@
+import { NextResponse } from "next/server";
+import { SESSION_COOKIE } from "@/lib/auth";
+
+export async function POST() {
+  const response = NextResponse.json({ success: true });
+  response.cookies.set({
+    name: SESSION_COOKIE,
+    value: "",
+    expires: new Date(0),
+    httpOnly: true,
+    path: "/",
+  });
+
+  return response;
+}
@@ -0,0 +1,45 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import {
+  getLanguageName,
+  LOCALE_COOKIE,
+  locales,
+  type Locale,
+} from "@/lib/i18n";
+
+export default function LanguageSwitcher({
+  locale,
+  label,
+  onChange,
+}: {
+  locale: Locale;
+  label: string;
+  onChange?: (locale: Locale) => void;
+}) {
+  const router = useRouter();
+
+  function handleChange(value: Locale) {
+    document.cookie = `${LOCALE_COOKIE}=${value}; Path=/; Max-Age=31536000; SameSite=Lax`;
+    onChange?.(value);
+    router.refresh();
+  }
+
+  return (
+    <label className="flex h-10 items-center gap-2 text-sm">
+      <span className="sr-only">{label}</span>
+      <select
+        value={locale}
+        onChange={(event) => handleChange(event.target.value as Locale)}
+        className="h-10 rounded-lg border border-slate-300 bg-white px-3 text-slate-700 outline-none focus:border-cyan-600 focus:ring-2 focus:ring-cyan-100"
+        aria-label={label}
+      >
+        {locales.map((option) => (
+          <option key={option} value={option}>
+            {getLanguageName(option)}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}
@@ -1,5 +1,8 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
+import { cookies } from "next/headers";
+import { getLocale, LOCALE_COOKIE } from "@/lib/i18n";
+import PwaRegister from "@/app/pwa-register";
 import "./globals.css";

 const geistSans = Geist({
@@ -13,17 +16,33 @@ const geistMono = Geist_Mono({
 });

 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "ADC BestelApp",
+  description: "Bekijk artikelen uit SAP Business One.",
+  applicationName: "ADC BestelApp",
+  manifest: "/manifest.webmanifest",
+  appleWebApp: {
+    capable: true,
+    title: "ADC BestelApp",
+    statusBarStyle: "default",
+  },
+  icons: {
+    icon: "/icon.svg",
+    apple: "/icon.svg",
+  },
 };

-export default function RootLayout({ children }: LayoutProps<"/">) {
+export default async function RootLayout({ children }: LayoutProps<"/">) {
+  const locale = getLocale((await cookies()).get(LOCALE_COOKIE)?.value);
+
  return (
    <html
-      lang="en"
+      lang={locale === "yue" ? "yue" : locale}
      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
    >
-      <body className="min-h-full flex flex-col">{children}</body>
+      <body className="min-h-full flex flex-col">
+        <PwaRegister />
+        {children}
+      </body>
    </html>
  );
 }
@@ -0,0 +1,47 @@
+import { cookies } from "next/headers";
+import { getLocale, LOCALE_COOKIE, t } from "@/lib/i18n";
+
+export default async function Loading() {
+  const locale = getLocale((await cookies()).get(LOCALE_COOKIE)?.value);
+
+  return (
+    <main className="min-h-screen animate-pulse bg-slate-50" aria-busy="true">
+      <div className="bg-gradient-to-r from-sky-900 via-cyan-800 to-cyan-600 text-white shadow-lg">
+        <div className="mx-auto max-w-7xl px-6 py-12">
+          <div className="h-10 w-80 rounded-lg bg-white/20" />
+          <div className="mt-4 h-5 max-w-2xl rounded bg-white/15" />
+          <div className="mt-6 h-10 w-24 rounded-lg bg-white/20" />
+        </div>
+      </div>
+
+      <div className="mx-auto max-w-7xl px-6 py-10">
+        <div className="mb-6 inline-flex rounded-2xl bg-white p-6 shadow-md ring-1 ring-slate-200">
+          <div>
+            <div className="h-4 w-32 rounded bg-slate-200" />
+            <div className="mt-2 h-9 w-12 rounded bg-cyan-100" />
+          </div>
+        </div>
+
+        <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">
+            <div className="h-6 w-28 rounded bg-slate-200" />
+          </div>
+
+          <div className="flex items-center justify-center gap-3 px-6 py-8 text-sm text-slate-500">
+            <span className="h-5 w-5 rounded-full border-2 border-cyan-200 border-t-cyan-600 motion-safe:animate-spin" />
+            {t(locale, "articles.loading")}
+          </div>
+
+          <div className="space-y-5 px-6 pb-8">
+            {[...Array(7)].map((_, index) => (
+              <div key={index} className="flex gap-6">
+                <div className="h-5 w-32 rounded bg-slate-200" />
+                <div className="h-5 flex-1 rounded bg-slate-200" />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}
@@ -0,0 +1,113 @@
+"use client";
+
+import { useState } from "react";
+import type { SubmitEvent } from "react";
+import { useRouter } from "next/navigation";
+import LanguageSwitcher from "@/app/language-switcher";
+import { getLocale, LOCALE_COOKIE, t, type Locale } from "@/lib/i18n";
+
+export default function LoginPage() {
+    const router = useRouter();
+    const [locale, setLocale] = useState<Locale>(() => {
+        if (typeof document === "undefined") return "nl";
+        const value = document.cookie
+            .split("; ")
+            .find((cookie) => cookie.startsWith(`${LOCALE_COOKIE}=`))
+            ?.split("=")[1];
+        return getLocale(value);
+    });
+    const [username, setUsername] = useState("");
+    const [password, setPassword] = useState("");
+    const [error, setError] = useState("");
+    const [loading, setLoading] = useState(false);
+
+    async function handleSubmit(event: SubmitEvent<HTMLFormElement>) {
+        event.preventDefault();
+        setError("");
+        setLoading(true);
+
+        try {
+            const response = await fetch("/api/auth/login", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ username, password }),
+            });
+
+            if (!response.ok) {
+                const data = await response.json();
+                setError(
+                    data.error === "invalid_credentials"
+                        ? t(locale, "login.invalidCredentials")
+                        : t(locale, "login.unexpectedError"),
+                );
+                return;
+            }
+
+            router.replace("/");
+            router.refresh();
+        } catch {
+            setError(t(locale, "login.unexpectedError"));
+        } finally {
+            setLoading(false);
+        }
+    }
+
+    return (
+        <main className="flex min-h-screen items-center justify-center bg-slate-100 px-6">
+            <div className="w-full max-w-md rounded-2xl bg-white p-8 shadow-xl ring-1 ring-slate-200">
+                <div className="mb-8">
+                    <div className="flex items-start justify-between gap-4">
+                        <div>
+                            <p className="text-sm font-semibold uppercase tracking-wider text-cyan-700">
+                                {t(locale, "appName")}
+                            </p>
+                            <h1 className="mt-2 text-3xl font-bold text-slate-900">{t(locale, "login.title")}</h1>
+                        </div>
+                        <LanguageSwitcher
+                            locale={locale}
+                            label={t(locale, "language.label")}
+                            onChange={setLocale}
+                        />
+                    </div>
+                    <p className="mt-2 text-slate-500">{t(locale, "login.description")}</p>
+                    <p className="mt-2 text-slate-500">{t(locale, "login.demoCredentials")}</p>
+                </div>
+
+                <form onSubmit={handleSubmit} className="space-y-5">
+                    <label className="block">
+                        <span className="mb-2 block text-sm font-medium text-slate-700">{t(locale, "login.username")}</span>
+                        <input
+                            required
+                            value={username}
+                            onChange={(event) => setUsername(event.target.value)}
+                            className="w-full rounded-lg border border-slate-300 px-4 py-3 text-slate-900 outline-none transition focus:border-cyan-600 focus:ring-2 focus:ring-cyan-100"
+                            autoComplete="username"
+                        />
+                    </label>
+
+                    <label className="block">
+                        <span className="mb-2 block text-sm font-medium text-slate-700">{t(locale, "login.password")}</span>
+                        <input
+                            required
+                            type="password"
+                            value={password}
+                            onChange={(event) => setPassword(event.target.value)}
+                            className="w-full rounded-lg border border-slate-300 px-4 py-3 text-slate-900 outline-none transition focus:border-cyan-600 focus:ring-2 focus:ring-cyan-100"
+                            autoComplete="current-password"
+                        />
+                    </label>
+
+                    {error && <p className="rounded-lg bg-red-50 p-3 text-sm text-red-700">{error}</p>}
+
+                    <button
+                        type="submit"
+                        disabled={loading}
+                        className="w-full rounded-lg bg-cyan-700 px-4 py-3 font-semibold text-white transition hover:bg-cyan-800 disabled:cursor-not-allowed disabled:opacity-60"
+                    >
+                        {loading ? t(locale, "login.submitting") : t(locale, "login.submit")}
+                    </button>
+                </form>
+            </div>
+        </main>
+    );
+}
@@ -0,0 +1,23 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { t, type Locale } from "@/lib/i18n";
+
+export default function LogoutButton({ locale }: { locale: Locale }) {
+  const router = useRouter();
+
+  async function handleLogout() {
+    await fetch("/api/auth/logout", { method: "POST" });
+    router.push("/login");
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={handleLogout}
+      className="inline-flex h-10 items-center rounded-lg bg-white/10 px-4 text-sm font-semibold text-white ring-1 ring-white/30 transition hover:bg-white/20"
+    >
+      {t(locale, "auth.logout")}
+    </button>
+  );
+}
@@ -0,0 +1,22 @@
+import type { MetadataRoute } from "next";
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: "CF Demop App",
+    short_name: "CF Demop App",
+    description: "Bekijk artikelen uit SAP Business One.",
+    start_url: "/",
+    display: "standalone",
+    background_color: "#f8fafc",
+    theme_color: "#0e7490",
+    lang: "nl",
+    icons: [
+      {
+        src: "/icon.svg",
+        sizes: "any",
+        type: "image/svg+xml",
+        purpose: "maskable",
+      },
+    ],
+  };
+}
@@ -1,69 +1,116 @@
-import Image from "next/image";
+import LogoutButton from "@/app/logout-button";
+import LanguageSwitcher from "@/app/language-switcher";
+import { getItems } from "@/lib/items";
+import { cookies } from "next/headers";
+import { getLocale, LOCALE_COOKIE, t } from "@/lib/i18n";
+
+export const dynamic = "force-dynamic";
+
+
+export default async function ItemsPage() {
+  const { items, error } = await getItems();
+  const locale = getLocale((await cookies()).get(LOCALE_COOKIE)?.value);

-export default function Home() {
  return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert h-5 w-[100px]"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the{" "}
-            <code className="rounded bg-black/[.06] px-1.5 py-0.5 font-mono text-[0.9em] dark:bg-white/[.08]">
-              page.tsx
-            </code>{" "}
-            file.
+    <main className="min-h-screen bg-slate-50">
+      {/* Header */}
+      <div className="bg-gradient-to-r from-sky-900 via-cyan-800 to-cyan-600 text-white shadow-lg">
+        <div className="mx-auto max-w-7xl px-6 py-12">
+          <h1 className="text-4xl font-bold tracking-tight">
+            {t(locale, "articles.title")}
          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
+
+          <p className="mt-3 max-w-2xl text-sky-100">
+            {t(locale, "articles.description")}
          </p>
+          <div className="mt-6 flex flex-wrap items-center gap-3">
+            <LogoutButton locale={locale} />
+            <LanguageSwitcher locale={locale} label={t(locale, "language.label")} />
+          </div>
        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert h-[14px] w-4"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={14}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
+      </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>
-    </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>
+      </div>
+    </main>
  );
-}
+}
@@ -0,0 +1,15 @@
+"use client";
+
+import { useEffect } from "react";
+
+export default function PwaRegister() {
+  useEffect(() => {
+    if ("serviceWorker" in navigator) {
+      navigator.serviceWorker.register("/sw.js").catch((error) => {
+        console.error("Service worker registration failed", error);
+      });
+    }
+  }, []);
+
+  return null;
+}