fix(admin): persist data directory and pass env vars

This commit is contained in:
Schubert Ferenc 2026-07-03 22:25:04 +02:00
parent 99e8201745
commit 1d7e7c41c9
39 changed files with 1297 additions and 32 deletions

View file

@ -0,0 +1,28 @@
import { redirect } from "next/navigation";
import AdminShell from "@/components/admin/AdminShell";
import { requireAdminSession } from "@/lib/admin/auth";
import { getSiteSettings } from "@/lib/admin/store";
export default async function AdminSettingsPage() {
if (!await requireAdminSession()) redirect("/admin/login");
const settings = await getSiteSettings();
return (
<AdminShell>
<div className="admin-page-head">
<p className="eyebrow">Konfiguration</p>
<h1>Firmeneinstellungen</h1>
</div>
<form className="admin-card admin-form" action="/api/admin/settings" method="post">
<label>Firmenname<input name="companyName" defaultValue={settings.companyName} /></label>
<label>Telefon<input name="phone" defaultValue={settings.phone} /></label>
<label>E-Mail<input name="email" type="email" defaultValue={settings.email} /></label>
<label>Adresse<input name="address" defaultValue={settings.address} /></label>
<label>Öffnungszeiten<input name="openingHours" defaultValue={settings.openingHours} /></label>
<label>Google Maps Embed URL<input name="googleMapsEmbedUrl" defaultValue={settings.googleMapsEmbedUrl} /></label>
<label>Social Links<textarea name="socialLinks" defaultValue={settings.socialLinks} /></label>
<button className="button" type="submit">Speichern</button>
</form>
</AdminShell>
);
}

View file

@ -0,0 +1,48 @@
import { redirect } from "next/navigation";
import AdminShell from "@/components/admin/AdminShell";
import StatusSelect from "@/components/admin/StatusSelect";
import { requireAdminSession } from "@/lib/admin/auth";
import { getContactInquiries } from "@/lib/admin/store";
export default async function AdminContactsPage() {
if (!await requireAdminSession()) redirect("/admin/login");
const inquiries = await getContactInquiries();
return (
<AdminShell>
<div className="admin-page-head">
<p className="eyebrow">Anfragen</p>
<h1>Kontaktanfragen</h1>
</div>
<section className="admin-card">
<table className="admin-table">
<thead><tr><th>Name</th><th>E-Mail</th><th>Betreff</th><th>Datum</th><th>Status</th></tr></thead>
<tbody>
{inquiries.map((item) => (
<tr key={item.id}>
<td>{item.name}</td>
<td><a href={`mailto:${item.email}`}>{item.email}</a></td>
<td>{item.subject}</td>
<td>{new Date(item.createdAt).toLocaleString("de-DE")}</td>
<td><StatusSelect id={item.id} type="contact" status={item.status} /></td>
</tr>
))}
{inquiries.length === 0 && <tr><td colSpan={5}>Noch keine Kontaktanfragen vorhanden.</td></tr>}
</tbody>
</table>
</section>
<section className="admin-card">
<h2>Detailansicht</h2>
<div className="admin-detail-grid">
{inquiries.slice(0, 6).map((item) => (
<article key={item.id} className="admin-detail">
<h3>{item.name}</h3>
<p><strong>{item.subject}</strong></p>
<p>{item.message}</p>
</article>
))}
</div>
</section>
</AdminShell>
);
}

5
app/admin/layout.tsx Normal file
View file

@ -0,0 +1,5 @@
import type { ReactNode } from "react";
export default function AdminRootLayout({ children }: { children: ReactNode }) {
return children;
}

13
app/admin/login/page.tsx Normal file
View file

@ -0,0 +1,13 @@
import type { Metadata } from "next";
import AdminLoginForm from "@/components/admin/AdminLoginForm";
export const metadata: Metadata = {
title: "Admin Login | Funktechnik Schubert",
robots: { index: false, follow: false },
};
export default async function AdminLoginPage({ searchParams }: { searchParams: Promise<{ next?: string }> }) {
const params = await searchParams;
const nextPath = params.next?.startsWith("/admin") ? params.next : "/admin";
return <AdminLoginForm nextPath={nextPath} />;
}

47
app/admin/medien/page.tsx Normal file
View file

@ -0,0 +1,47 @@
import { mkdir, readdir } from "fs/promises";
import path from "path";
import Image from "next/image";
import { redirect } from "next/navigation";
import AdminShell from "@/components/admin/AdminShell";
import { requireAdminSession } from "@/lib/admin/auth";
const uploadDir = path.join(process.cwd(), "public", "uploads", "images");
async function getFiles() {
await mkdir(uploadDir, { recursive: true });
return readdir(uploadDir);
}
export default async function AdminMediaPage() {
if (!await requireAdminSession()) redirect("/admin/login");
const files = await getFiles();
return (
<AdminShell>
<div className="admin-page-head">
<p className="eyebrow">Assets</p>
<h1>Medienverwaltung</h1>
</div>
<form className="admin-card admin-upload" action="/api/admin/media" method="post" encType="multipart/form-data">
<label>Datei hochladen<input name="file" type="file" accept="image/jpeg,image/png,image/webp,application/pdf" /></label>
<button className="button" type="submit">Datei hochladen</button>
</form>
<section className="admin-card">
<h2>Uploads</h2>
<div className="media-grid">
{files.map((file) => {
const url = `/uploads/images/${file}`;
return (
<a key={file} className="media-item" href={url} target="_blank" rel="noreferrer">
{/\.(png|jpe?g|webp)$/i.test(file)
? <Image src={url} alt={file} width={320} height={220} />
: <span>{file}</span>}
</a>
);
})}
{files.length === 0 && <p className="admin-muted">Noch keine Uploads vorhanden.</p>}
</div>
</section>
</AdminShell>
);
}

46
app/admin/page.tsx Normal file
View file

@ -0,0 +1,46 @@
import { redirect } from "next/navigation";
import AdminShell from "@/components/admin/AdminShell";
import { requireAdminSession } from "@/lib/admin/auth";
import { getContactInquiries, getRepairInquiries } from "@/lib/admin/store";
function countNew<T extends { status: string }>(items: T[]) {
return items.filter((item) => item.status === "new").length;
}
export default async function AdminDashboardPage() {
if (!await requireAdminSession()) redirect("/admin/login");
const [contacts, repairs] = await Promise.all([getContactInquiries(), getRepairInquiries()]);
const latest = [...contacts, ...repairs].sort((a, b) => b.createdAt.localeCompare(a.createdAt)).slice(0, 6);
return (
<AdminShell>
<div className="admin-page-head">
<p className="eyebrow">Administration</p>
<h1>Dashboard</h1>
</div>
<div className="admin-kpis">
<div className="admin-kpi"><span>Kontaktanfragen</span><strong>{countNew(contacts)}</strong><small>neu</small></div>
<div className="admin-kpi"><span>Reparaturanfragen</span><strong>{countNew(repairs)}</strong><small>neu</small></div>
<div className="admin-kpi"><span>Website</span><strong>Online</strong><small>OK</small></div>
<div className="admin-kpi"><span>SMTP</span><strong>Vorbereitet</strong><small>nicht aktiv</small></div>
</div>
<section className="admin-card">
<h2>Letzte Anfragen</h2>
<table className="admin-table">
<thead><tr><th>Datum</th><th>Name</th><th>Typ</th><th>Status</th></tr></thead>
<tbody>
{latest.map((item) => (
<tr key={item.id}>
<td>{new Date(item.createdAt).toLocaleDateString("de-DE")}</td>
<td>{item.name}</td>
<td>{"manufacturer" in item ? "Reparatur" : "Kontakt"}</td>
<td><span className={`status ${item.status}`}>{item.status}</span></td>
</tr>
))}
{latest.length === 0 && <tr><td colSpan={4}>Noch keine Anfragen vorhanden.</td></tr>}
</tbody>
</table>
</section>
</AdminShell>
);
}

View file

@ -0,0 +1,51 @@
import { redirect } from "next/navigation";
import AdminShell from "@/components/admin/AdminShell";
import StatusSelect from "@/components/admin/StatusSelect";
import { requireAdminSession } from "@/lib/admin/auth";
import { getRepairInquiries } from "@/lib/admin/store";
export default async function AdminRepairsPage() {
if (!await requireAdminSession()) redirect("/admin/login");
const inquiries = await getRepairInquiries();
return (
<AdminShell>
<div className="admin-page-head">
<p className="eyebrow">Anfragen</p>
<h1>Reparaturanfragen</h1>
</div>
<section className="admin-card">
<table className="admin-table">
<thead><tr><th>Datum</th><th>Name</th><th>Gerät</th><th>Hersteller</th><th>Modell</th><th>Status</th></tr></thead>
<tbody>
{inquiries.map((item) => (
<tr key={item.id}>
<td>{new Date(item.createdAt).toLocaleDateString("de-DE")}</td>
<td>{item.name}</td>
<td>{item.deviceType}</td>
<td>{item.manufacturer}</td>
<td>{item.model}</td>
<td><StatusSelect id={item.id} type="repair" status={item.status} /></td>
</tr>
))}
{inquiries.length === 0 && <tr><td colSpan={6}>Noch keine Reparaturanfragen vorhanden.</td></tr>}
</tbody>
</table>
</section>
<section className="admin-card">
<h2>Technische Details</h2>
<div className="admin-detail-grid">
{inquiries.slice(0, 6).map((item) => (
<article key={item.id} className="admin-detail">
<h3>{item.manufacturer} {item.model}</h3>
<p><strong>Fehler:</strong> {item.description}</p>
<p><strong>Zubehör:</strong> {item.accessories || "nicht angegeben"}</p>
<p><strong>Vorarbeiten:</strong> {item.previousWork || "nicht angegeben"}</p>
<button className="button light" type="button" disabled>In Olympus übernehmen</button>
</article>
))}
</div>
</section>
</AdminShell>
);
}

24
app/admin/seo/page.tsx Normal file
View file

@ -0,0 +1,24 @@
import { redirect } from "next/navigation";
import AdminShell from "@/components/admin/AdminShell";
import { requireAdminSession } from "@/lib/admin/auth";
import { defaultTitle, siteName, siteUrl } from "@/app/seo";
export default async function AdminSeoPage() {
if (!await requireAdminSession()) redirect("/admin/login");
return (
<AdminShell>
<div className="admin-page-head">
<p className="eyebrow">Sichtbarkeit</p>
<h1>SEO Verwaltung</h1>
</div>
<section className="admin-card admin-form">
<label>Seitentitel<input readOnly value={defaultTitle} /></label>
<label>Site Name<input readOnly value={siteName} /></label>
<label>Basis-URL<input readOnly value={siteUrl} /></label>
<label>Meta Description<textarea readOnly value="Service, Reparatur, Diagnose und Abgleich von Funktechnik, CB-Funk, Amateurfunk und Kommunikationstechnik." /></label>
<p className="admin-muted">Live-Bearbeitung pro Seite ist vorbereitet und wird in einer späteren Publishing-Ausbaustufe aktiviert.</p>
</section>
</AdminShell>
);
}

28
app/admin/smtp/page.tsx Normal file
View file

@ -0,0 +1,28 @@
import { redirect } from "next/navigation";
import AdminShell from "@/components/admin/AdminShell";
import { requireAdminSession } from "@/lib/admin/auth";
import { getSmtpSettings } from "@/lib/admin/store";
export default async function AdminSmtpPage() {
if (!await requireAdminSession()) redirect("/admin/login");
const settings = await getSmtpSettings();
return (
<AdminShell>
<div className="admin-page-head">
<p className="eyebrow">E-Mail</p>
<h1>SMTP Einstellungen</h1>
</div>
<form className="admin-card admin-form" action="/api/admin/smtp" method="post">
<label>SMTP Server<input name="host" defaultValue={settings.host} /></label>
<label>Port<input name="port" defaultValue={settings.port} inputMode="numeric" /></label>
<label>Benutzername<input name="username" defaultValue={settings.username} /></label>
<label>Passwort<input name="password" type="password" placeholder="wird in dieser Foundation noch nicht gespeichert" disabled /></label>
<label>Absenderadresse<input name="fromAddress" type="email" defaultValue={settings.fromAddress} /></label>
<label>Antwortadresse<input name="replyToAddress" type="email" defaultValue={settings.replyToAddress} /></label>
<label className="admin-checkbox"><input name="tls" type="checkbox" defaultChecked={settings.tls} /> TLS aktivieren</label>
<button className="button" type="submit">Speichern</button>
</form>
</AdminShell>
);
}

36
app/admin/system/page.tsx Normal file
View file

@ -0,0 +1,36 @@
import { redirect } from "next/navigation";
import AdminShell from "@/components/admin/AdminShell";
import { requireAdminSession } from "@/lib/admin/auth";
export default async function AdminSystemPage() {
if (!await requireAdminSession()) redirect("/admin/login");
return (
<AdminShell>
<div className="admin-page-head">
<p className="eyebrow">Betrieb</p>
<h1>System</h1>
</div>
<div className="admin-detail-grid">
<section className="admin-card">
<h2>Technik</h2>
<ul className="list">
<li>Next.js 16 App Router</li>
<li>TypeScript strict</li>
<li>HttpOnly Admin-Session</li>
<li>Lokale Foundation-Datenablage in JSON-Dateien</li>
</ul>
</section>
<section className="admin-card">
<h2>Vorbereitet</h2>
<ul className="list">
<li>Olympus-Integration bleibt deaktiviert</li>
<li>SMTP-Konfiguration ohne Versandlogik</li>
<li>Medien-Upload mit Dateityp- und Größenprüfung</li>
<li>SEO- und Inhaltsverwaltung als Admin-Grundlage</li>
</ul>
</section>
</div>
</AdminShell>
);
}

View file

@ -0,0 +1,38 @@
import { redirect } from "next/navigation";
import AdminShell from "@/components/admin/AdminShell";
import { requireAdminSession } from "@/lib/admin/auth";
const editablePages = [
["Startseite", "Hero, Vorteile, Textblöcke"],
["Leistungen", "Funktechnik, Messtechnik, Servicebereiche"],
["Funkgeräte-Service", "Diagnose, Abgleich, Fehlerbilder"],
["Reparatur", "Reparaturannahme und Hinweise"],
["Über uns", "Profil und Werkstattbeschreibung"],
["Kontakt", "Kontakttext und Hinweise"],
] as const;
export default async function AdminWebsitePage() {
if (!await requireAdminSession()) redirect("/admin/login");
return (
<AdminShell>
<div className="admin-page-head">
<p className="eyebrow">Website</p>
<h1>Website-Inhalte</h1>
</div>
<section className="admin-card">
<h2>Editierbare Inhalte</h2>
<p className="admin-muted">Diese Foundation bereitet die Inhaltsverwaltung vor. Die öffentliche Website bleibt bis zur finalen Publishing-Funktion weiterhin quellcodebasiert.</p>
<div className="admin-detail-grid">
{editablePages.map(([title, description]) => (
<article key={title} className="admin-detail">
<h3>{title}</h3>
<p>{description}</p>
<button className="button light" type="button" disabled>Bearbeiten vorbereitet</button>
</article>
))}
</div>
</section>
</AdminShell>
);
}