Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: dark mode Modale

Browse Source
This commit is contained in:
ISA
2025-09-08 15:33:26 +02:00
parent fefff9419d
commit af21b180f1
23 changed files with 209 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false
NEXT_PUBLIC_EXPORT_STATIC=false NEXT_PUBLIC_EXPORT_STATIC=false
NEXT_PUBLIC_USE_CGI=false NEXT_PUBLIC_USE_CGI=false
# App-Versionsnummer # App-Versionsnummer
NEXT_PUBLIC_APP_VERSION=1.6.877 NEXT_PUBLIC_APP_VERSION=1.6.878
NEXT_PUBLIC_CPL_MODE=json # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter) NEXT_PUBLIC_CPL_MODE=json # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)

2
.env.production
View File

@@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL
NEXT_PUBLIC_EXPORT_STATIC=true NEXT_PUBLIC_EXPORT_STATIC=true
NEXT_PUBLIC_USE_CGI=true NEXT_PUBLIC_USE_CGI=true
# App-Versionsnummer # App-Versionsnummer
NEXT_PUBLIC_APP_VERSION=1.6.877 NEXT_PUBLIC_APP_VERSION=1.6.878
NEXT_PUBLIC_CPL_MODE=production NEXT_PUBLIC_CPL_MODE=production

5
CHANGELOG.md
View File

@@ -1,3 +1,8 @@
## [1.6.878] – 2025-09-08
- WIP: dark mode Berichte
---
## [1.6.877] – 2025-09-08 ## [1.6.877] – 2025-09-08
- WIP: dark mode Modale - WIP: dark mode Modale

23
components/footer/Footer.tsx
View File

@@ -55,14 +55,16 @@ function Footer() {
}, [showSlider]); }, [showSlider]);
return ( return (
<footer className="relative bg-[var(--color-surface-alt)] border-t border-base p-4 xl:p-2 2xl:p-4 overflow-hidden text-[var(--color-fg)] laptop:h-[5vh] theme-transition"> <footer className="relative bg-[var(--color-surface-alt)] border-t border-base p-4 xl:p-2 2xl:p-4 overflow-hidden text-[var(--color-fg)] laptop:h-[5vh] theme-transition">
<div className="container mx-auto flex justify-between"> <div className="container mx-auto flex justify-between">
<div className="flex flex-row space-x-2 items-center"> <div className="flex flex-row space-x-2 items-center">
<Icon <Icon
icon="material-symbols:factory-outline" icon="material-symbols:factory-outline"
className="text-xl text-accent" className="text-xl text-accent"
/> />
<p className="text-sm text-fg-muted">Littwin Systemtechnik GmbH & Co. KG</p> <p className="text-sm text-fg-muted">
Littwin Systemtechnik GmbH & Co. KG
</p>
</div> </div>
<div className="flex flex-row space-x-2 items-center"> <div className="flex flex-row space-x-2 items-center">
<Icon icon="charm:phone" className="text-xl text-accent" /> <Icon icon="charm:phone" className="text-xl text-accent" />
@@ -70,14 +72,21 @@ function Footer() {
</div> </div>
<div className="flex flex-row space-x-2 items-center"> <div className="flex flex-row space-x-2 items-center">
<Icon icon="mdi:email-outline" className="text-xl text-accent" /> <Icon icon="mdi:email-outline" className="text-xl text-accent" />
<p className="text-sm text-fg-muted">kontakt@littwin-systemtechnik.de</p> <p className="text-sm text-fg-muted">
kontakt@littwin-systemtechnik.de
</p>
</div> </div>
<div <div
className="flex flex-row space-x-2 cursor-pointer items-center group" className="flex flex-row space-x-2 cursor-pointer items-center group"
onClick={() => setShowSlider(true)} onClick={() => setShowSlider(true)}
> >
<Icon icon="bi:book" className="text-xl text-accent group-hover:brightness-110 transition" /> <Icon
<p className="text-sm text-fg-muted group-hover:text-[var(--color-fg)] transition">Handbücher</p> icon="bi:book"
className="text-xl text-accent group-hover:brightness-110 transition"
/>
<p className="text-sm text-fg-muted group-hover:text-[var(--color-fg)] transition">
Handbücher
</p>
</div> </div>
</div> </div>
@@ -88,7 +97,9 @@ function Footer() {
}`} }`}
> >
<div className="p-4 flex justify-between items-center border-b border-base"> <div className="p-4 flex justify-between items-center border-b border-base">
<h3 className="text-base font-semibold text-[var(--color-fg)]">PDF Handbücher</h3> <h3 className="text-base font-semibold text-[var(--color-fg)]">
PDF Handbücher
</h3>
<button <button
className="text-[var(--color-muted)] hover:text-[var(--color-fg)] transition" className="text-[var(--color-muted)] hover:text-[var(--color-fg)] transition"
onClick={() => setShowSlider(false)} onClick={() => setShowSlider(false)}

14
components/header/Header.tsx
View File

@@ -145,7 +145,7 @@ function Header() {
}, []); }, []);
return ( return (
<header className="bg-[var(--color-surface)] dark:bg-[var(--color-surface)]/90 backdrop-blur flex justify-between items-center w-full h-[13vh] laptop:h-[10vh] relative text-[var(--color-fg)] dark:text-[var(--color-fg)] shadow-sm border-b border-[var(--color-border)]"> <header className="bg-[var(--color-surface)] dark:bg-[var(--color-surface)]/90 backdrop-blur flex justify-between items-center w-full h-[13vh] laptop:h-[10vh] relative text-[var(--color-fg)] dark:text-[var(--color-fg)] shadow-sm border-b border-[var(--color-border)]">
<div <div
className="absolute transform -translate-y-1/2 className="absolute transform -translate-y-1/2
left-[8%] sm:left-[8%] md:left-[8%] lg:left-[8%] xl:left-[6%] 2xl:left-[2%] laptop:left-[4%] laptop: left-[8%] sm:left-[8%] md:left-[8%] lg:left-[8%] xl:left-[6%] 2xl:left-[2%] laptop:left-[4%] laptop:
@@ -195,9 +195,15 @@ function Header() {
title={isDark ? "Light Mode" : "Dark Mode"} title={isDark ? "Light Mode" : "Dark Mode"}
> >
{isDark ? ( {isDark ? (
<Icon icon="mdi:weather-night" className="text-xl text-yellow-300" /> <Icon
icon="mdi:weather-night"
className="text-xl text-yellow-300"
/>
) : ( ) : (
<Icon icon="mdi:white-balance-sunny" className="text-xl text-yellow-500" /> <Icon
icon="mdi:white-balance-sunny"
className="text-xl text-yellow-500"
/>
)} )}
</button> </button>
</div> </div>
@@ -218,7 +224,7 @@ function Header() {
{/* Warnhinweis, wenn der Admin angemeldet ist */} {/* Warnhinweis, wenn der Admin angemeldet ist */}
{isAdminLoggedIn && ( {isAdminLoggedIn && (
<div className="absolute top-0 left-1/2 transform -translate-x-1/2 w-full xl:w-1/4 2xl:w-1/4 h-8 bg-[var(--color-warning)] text-center py-2 text-black font-bold tracking-wide"> <div className="absolute top-0 left-1/2 transform -translate-x-1/2 w-full xl:w-1/4 2xl:w-1/4 h-8 bg-[var(--color-warning)] text-center py-2 text-black font-bold tracking-wide">
Admin-Modus aktiv Admin-Modus aktiv
</div> </div>
)} )}

2
components/main/analogInputs/AnalogInputsView.tsx
View File

@@ -36,7 +36,7 @@ function AnalogInputsView() {
}`} }`}
> >
<div className="grid grid-cols-1 gap-4 justify-items-start"> <div className="grid grid-cols-1 gap-4 justify-items-start">
<div className="rounded-lg p-4 max-w-3xl text-[var(--color-fg)] bg-[var(--color-surface)] dark:bg-[var(--color-surface)] border border-[var(--color-border)] shadow-sm"> <div className="rounded-lg p-4 max-w-3xl text-[var(--color-fg)] bg-[var(--color-surface)] dark:bg-[var(--color-surface)] border border-[var(--color-border)] shadow-sm">
<h2 className="text-xl font-semibold mb-4 text-[var(--color-fg)] tracking-wide"> <h2 className="text-xl font-semibold mb-4 text-[var(--color-fg)] tracking-wide">
Messwerteingänge Messwerteingänge
</h2> </h2>

2
components/main/dashboard/DashboardView.tsx
View File

@@ -25,7 +25,7 @@ const DashboardView: React.FC = () => {
}, [dispatch]); }, [dispatch]);
//------------------------------------- //-------------------------------------
return ( return (
<div className="flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)] laptop:h-[calc(100vh-10vh-5vh)] xl:h-[calc(100vh-10vh-6vh)] laptop:gap-0 bg-[var(--color-background)] text-[var(--color-fg)]"> <div className="flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)] laptop:h-[calc(100vh-10vh-5vh)] xl:h-[calc(100vh-10vh-6vh)] laptop:gap-0 bg-[var(--color-background)] text-[var(--color-fg)]">
{/* Header */} {/* Header */}
<div className="flex justify-between items-center w-full lg:w-2/3"> <div className="flex justify-between items-center w-full lg:w-2/3">
<div className="flex justify-between gap-1"> <div className="flex justify-between gap-1">

14
components/main/dashboard/NetworkInfo.tsx
View File

@@ -38,7 +38,7 @@ const NetworkInfo: React.FC = () => {
return ( return (
<div className="w-full flex-direction: row flex"> <div className="w-full flex-direction: row flex">
<div className=" flex-grow flex justify-between items-center mt-1 p-2 rounded-lg shadow-sm bg-[var(--color-surface)] dark:bg-[var(--color-surface)] border border-[var(--color-border)] laptop:m-0 laptop:scale-y-75 2xl:scale-y-75"> <div className=" flex-grow flex justify-between items-center mt-1 p-2 rounded-lg shadow-sm bg-[var(--color-surface)] dark:bg-[var(--color-surface)] border border-[var(--color-border)] laptop:m-0 laptop:scale-y-75 2xl:scale-y-75">
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
<Image <Image
src="/images/IP-icon.svg" src="/images/IP-icon.svg"
@@ -49,12 +49,8 @@ const NetworkInfo: React.FC = () => {
priority priority
/> />
<div> <div>
<p className="text-xs text-[var(--color-fg-muted)]"> <p className="text-xs text-[var(--color-fg-muted)]">IP-Adresse</p>
IP-Adresse <p className="text-sm font-medium text-[var(--color-fg)]">{ip}</p>
</p>
<p className="text-sm font-medium text-[var(--color-fg)]">
{ip}
</p>
</div> </div>
</div> </div>
@@ -68,9 +64,7 @@ const NetworkInfo: React.FC = () => {
priority priority
/> />
<div> <div>
<p className="text-xs text-[var(--color-fg-muted)]"> <p className="text-xs text-[var(--color-fg-muted)]">Subnet-Maske</p>
Subnet-Maske
</p>
<p className="text-sm font-medium text-[var(--color-fg)]"> <p className="text-sm font-medium text-[var(--color-fg)]">
{subnet} {subnet}
</p> </p>

4
components/main/dashboard/VersionInfo.tsx
View File

@@ -23,14 +23,14 @@ const VersionInfo: React.FC<VersionInfoProps> = ({ className = "" }) => {
<li className="flex items-start gap-2"> <li className="flex items-start gap-2">
<Icon icon="bx:code-block" className="text-xl text-accent" /> <Icon icon="bx:code-block" className="text-xl text-accent" />
<p className="text-sm text-fg-muted"> <p className="text-sm text-fg-muted">
Applikationsversion: {" "} Applikationsversion:{" "}
<span className="text-[var(--color-fg)]">{appVersion}</span> <span className="text-[var(--color-fg)]">{appVersion}</span>
</p> </p>
</li> </li>
<li className="flex items-start gap-2"> <li className="flex items-start gap-2">
<Icon icon="mdi:web" className="text-xl text-accent" /> <Icon icon="mdi:web" className="text-xl text-accent" />
<p className="text-sm text-fg-muted"> <p className="text-sm text-fg-muted">
Webversion: {" "} Webversion:{" "}
<span className="text-[var(--color-fg)]">{webVersion}</span> <span className="text-[var(--color-fg)]">{webVersion}</span>
</p> </p>
</li> </li>

2
components/main/digitalInputs/DigitalInputsWidget.tsx
View File

@@ -30,7 +30,7 @@ export default function DigitalInputsWidget({
//console.log("DigitalInputs", inputs); //console.log("DigitalInputs", inputs);
return ( return (
<div className="text-[var(--color-fg)] bg-[var(--color-surface)] dark:bg-[var(--color-surface)] shadow-sm border border-[var(--color-border)] p-3 rounded-lg w-full laptop:p-1 xl:p-1"> <div className="text-[var(--color-fg)] bg-[var(--color-surface)] dark:bg-[var(--color-surface)] shadow-sm border border-[var(--color-border)] p-3 rounded-lg w-full laptop:p-1 xl:p-1">
<h2 className="laptop:text-sm md:text-base 2xl:text-lg font-bold mb-3 flex items-center"> <h2 className="laptop:text-sm md:text-base 2xl:text-lg font-bold mb-3 flex items-center">
<Icon <Icon
icon={inputIcon} icon={inputIcon}

32
components/main/reports/MeldungenTabelle.tsx
View File

@@ -17,11 +17,21 @@ export default function MeldungenTabelle({
<table className="min-w-full border border-base table-surface text-fg"> <table className="min-w-full border border-base table-surface text-fg">
<thead className="text-left sticky top-0 z-10 bg-surface-alt/90 backdrop-blur supports-[backdrop-filter]:bg-surface-alt/70"> <thead className="text-left sticky top-0 z-10 bg-surface-alt/90 backdrop-blur supports-[backdrop-filter]:bg-surface-alt/70">
<tr> <tr>
<th className="p-2 border border-base bg-surface-alt text-fg font-medium">Prio</th> <th className="p-2 border border-base bg-surface-alt text-fg font-medium">
<th className="p-2 border border-base bg-surface-alt text-fg font-medium">Zeitstempel</th> Prio
<th className="p-2 border border-base bg-surface-alt text-fg font-medium">Quelle</th> </th>
<th className="p-2 border border-base bg-surface-alt text-fg font-medium">Meldung</th> <th className="p-2 border border-base bg-surface-alt text-fg font-medium">
<th className="p-2 border border-base bg-surface-alt text-fg font-medium">Status</th> Zeitstempel
</th>
<th className="p-2 border border-base bg-surface-alt text-fg font-medium">
Quelle
</th>
<th className="p-2 border border-base bg-surface-alt text-fg font-medium">
Meldung
</th>
<th className="p-2 border border-base bg-surface-alt text-fg font-medium">
Status
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -46,9 +56,15 @@ export default function MeldungenTabelle({
second: "2-digit", second: "2-digit",
})} })}
</td> </td>
<td className="border border-base p-2 bg-surface text-fg">{msg.i}</td> <td className="border border-base p-2 bg-surface text-fg">
<td className="border border-base p-2 bg-surface text-fg">{msg.m}</td> {msg.i}
<td className="border border-base p-2 bg-surface text-fg">{msg.v}</td> </td>
<td className="border border-base p-2 bg-surface text-fg">
{msg.m}
</td>
<td className="border border-base p-2 bg-surface text-fg">
{msg.v}
</td>
</tr> </tr>
))} ))}
</tbody> </tbody>

2
components/main/settingsPageComponents/DatabaseSettings.tsx
View File

@@ -10,7 +10,7 @@ import { useAdminAuth } from "./hooks/useAdminAuth";
const DatabaseSettings: React.FC = () => { const DatabaseSettings: React.FC = () => {
const { isAdminLoggedIn } = useAdminAuth(true); const { isAdminLoggedIn } = useAdminAuth(true);
return ( return (
<div className="p-6 bg-[var(--color-surface-alt)] max-w-5xl mr-auto rounded shadow text-[var(--color-fg)]"> <div className="p-6 bg-[var(--color-surface-alt)] max-w-5xl mr-auto rounded shadow text-[var(--color-fg)]">
<h2 className="text-lg font-bold mb-6">Datenbank Einstellungen</h2> <h2 className="text-lg font-bold mb-6">Datenbank Einstellungen</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">

12
components/main/settingsPageComponents/GeneralSettings.tsx
View File

@@ -63,10 +63,11 @@ const GeneralSettings: React.FC = () => {
setMac1(systemSettings.mac1 || ""); setMac1(systemSettings.mac1 || "");
}, [systemSettings]); }, [systemSettings]);
const inputCls = "border border-base focus:border-accent rounded h-8 p-1 w-full text-xs bg-[var(--color-surface)] text-[var(--color-fg)] placeholder-[var(--color-muted)] transition-colors duration-150 focus:outline-none"; const inputCls =
"border border-base focus:border-accent rounded h-8 p-1 w-full text-xs bg-[var(--color-surface)] text-[var(--color-fg)] placeholder-[var(--color-muted)] transition-colors duration-150 focus:outline-none";
return ( return (
<div className="p-6 md:p-3 bg-[var(--color-surface-alt)] max-w-5xl mr-auto overflow-y-auto max-h-[calc(100vh-200px)] text-[var(--color-fg)]"> <div className="p-6 md:p-3 bg-[var(--color-surface-alt)] max-w-5xl mr-auto overflow-y-auto max-h-[calc(100vh-200px)] text-[var(--color-fg)]">
<h2 className="text-sm md:text-md font-bold mb-2"> <h2 className="text-sm md:text-md font-bold mb-2">
Allgemeine Einstellungen Allgemeine Einstellungen
</h2> </h2>
@@ -86,12 +87,7 @@ const GeneralSettings: React.FC = () => {
<label className="block text-xs md:text-sm font-medium"> <label className="block text-xs md:text-sm font-medium">
MAC Adresse 1: MAC Adresse 1:
</label> </label>
<input <input type="text" className={inputCls} value={mac1} disabled />
type="text"
className={inputCls}
value={mac1}
disabled
/>
</div> </div>
{/* Systemzeit */} {/* Systemzeit */}
<div className="col-span-2"> <div className="col-span-2">

2
components/main/settingsPageComponents/NTPSettings.tsx
View File

@@ -27,7 +27,7 @@ const NTPSettings: React.FC = () => {
} }
return ( return (
<div className="p-6 md:p-3 bg-[var(--color-surface-alt)] max-w-5xl mr-auto text-[var(--color-fg)]"> <div className="p-6 md:p-3 bg-[var(--color-surface-alt)] max-w-5xl mr-auto text-[var(--color-fg)]">
<h2 className="text-sm md:text-md font-bold mb-4">NTP Einstellungen</h2> <h2 className="text-sm md:text-md font-bold mb-4">NTP Einstellungen</h2>
<div className="grid md:grid-cols-2 gap-3"> <div className="grid md:grid-cols-2 gap-3">

4
components/main/settingsPageComponents/OPCUAInterfaceSettings.tsx
View File

@@ -76,7 +76,7 @@ export default function OPCUAInterfaceSettings() {
{/* ✅ OPCUA Zustand */} {/* ✅ OPCUA Zustand */}
<div className="mb-3"> <div className="mb-3">
<label className="block font-medium text-sm mb-1">OPCUA Zustand</label> <label className="block font-medium text-sm mb-1">OPCUA Zustand</label>
<div className="p-1 border border-base rounded-md bg-[var(--color-surface)] text-sm text-[var(--color-fg)]"> <div className="p-1 border border-base rounded-md bg-[var(--color-surface)] text-sm text-[var(--color-fg)]">
{opcuaSettings.opcUaZustand} {opcuaSettings.opcUaZustand}
</div> </div>
</div> </div>
@@ -108,7 +108,7 @@ export default function OPCUAInterfaceSettings() {
<label className="block font-medium text-sm mb-1"> <label className="block font-medium text-sm mb-1">
Aktuelle OPC-Clients Aktuelle OPC-Clients
</label> </label>
<div className="p-1 border border-base rounded-md bg-[var(--color-surface)] text-sm text-[var(--color-fg)]"> <div className="p-1 border border-base rounded-md bg-[var(--color-surface)] text-sm text-[var(--color-fg)]">
{opcUaActiveClientCount} {opcUaActiveClientCount}
</div> </div>
</div> </div>

2
components/main/settingsPageComponents/modals/ProgressModal.tsx
View File

@@ -13,7 +13,7 @@ const ProgressModal: React.FC<Props> = ({ visible, progress, slot }) => {
return ( return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 "> <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 ">
<div className="p-6 rounded shadow-sm text-center w-80 bg-[var(--color-surface)] dark:bg-[var(--color-surface)] text-[var(--color-fg)] border border-[var(--color-border)]"> <div className="p-6 rounded shadow-sm text-center w-80 bg-[var(--color-surface)] dark:bg-[var(--color-surface)] text-[var(--color-fg)] border border-[var(--color-border)]">
{/* {/*
<h2 className="text-lg font-bold mb-4"> <h2 className="text-lg font-bold mb-4">
Firmwareupdate Firmwareupdate

2
components/main/system/DetailModal.tsx
View File

@@ -481,7 +481,7 @@ export const DetailModal = ({
isLoading={isLoading} isLoading={isLoading}
/> />
<div className="h-[85%] rounded shadow border p-2 bg-[var(--color-surface)] border-[var(--color-border)]"> <div className="h-[85%] rounded shadow border p-2 bg-[var(--color-surface)] border-[var(--color-border)]">
<Line ref={chartRef} data={chartData} options={chartOptions} /> <Line ref={chartRef} data={chartData} options={chartOptions} />
</div> </div>
</div> </div>

4
components/main/system/SystemView.tsx
View File

@@ -71,8 +71,8 @@ const SystemPage = () => {
}; };
return ( return (
<div className="p-4 bg-[var(--color-background)] text-[var(--color-fg)]"> <div className="p-4 bg-[var(--color-background)] text-[var(--color-fg)]">
<h1 className="text-xl font-bold mb-4 tracking-wide"> <h1 className="text-xl font-bold mb-4 tracking-wide">
System Spannungen & Temperaturen System Spannungen & Temperaturen
</h1> </h1>

10
components/navigation/Navigation.tsx
View File

@@ -36,7 +36,7 @@ const Navigation: React.FC<NavigationProps> = ({ className }) => {
]; ];
return ( return (
<aside className="h-full bg-[var(--color-surface)] dark:bg-[var(--color-surface)] border-r border-[var(--color-border)]"> <aside className="h-full bg-[var(--color-surface)] dark:bg-[var(--color-surface)] border-r border-[var(--color-border)]">
<nav className={`h-full flex-shrink-0 mt-16 ${className || "w-48"}`}> <nav className={`h-full flex-shrink-0 mt-16 ${className || "w-48"}`}>
{menuItems.map((item) => ( {menuItems.map((item) => (
<div key={item.name}> <div key={item.name}>
@@ -50,9 +50,11 @@ const Navigation: React.FC<NavigationProps> = ({ className }) => {
prefetch={false} prefetch={false}
onClick={() => setActiveLink(item.path)} onClick={() => setActiveLink(item.path)}
className={`block px-4 py-2 mb-4 font-semibold whitespace-nowrap transition duration-200 rounded-r-full pr-6 relative text-[1rem] sm:text-[1rem] md:text-[1rem] lg:text-[1rem] xl:text-sm 2xl:text-lg className={`block px-4 py-2 mb-4 font-semibold whitespace-nowrap transition duration-200 rounded-r-full pr-6 relative text-[1rem] sm:text-[1rem] md:text-[1rem] lg:text-[1rem] xl:text-sm 2xl:text-lg
${activeLink.startsWith(item.path) ${
? 'bg-[var(--color-accent)] text-white shadow-sm xl:mr-4 xl:w-full' activeLink.startsWith(item.path)
: 'text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] hover:bg-[var(--color-surface-alt)]/80 dark:hover:bg-[var(--color-surface-alt)]/40'} ? "bg-[var(--color-accent)] text-white shadow-sm xl:mr-4 xl:w-full"
: "text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] hover:bg-[var(--color-surface-alt)]/80 dark:hover:bg-[var(--color-surface-alt)]/40"
}
`} `}
> >
{item.name} {item.name}

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{ {
"name": "cpl-v4", "name": "cpl-v4",
"version": "1.6.877", "version": "1.6.878",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "cpl-v4", "name": "cpl-v4",
"version": "1.6.877", "version": "1.6.878",
"dependencies": { "dependencies": {
"@fontsource/roboto": "^5.1.0", "@fontsource/roboto": "^5.1.0",
"@headlessui/react": "^2.2.4", "@headlessui/react": "^2.2.4",

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "cpl-v4", "name": "cpl-v4",
"version": "1.6.877", "version": "1.6.878",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "next dev -p 3000", "dev": "next dev -p 3000",

4
pages/_app.tsx
View File

@@ -148,11 +148,11 @@ function AppContent({
}, [pathname, dispatch]); }, [pathname, dispatch]);
return ( return (
<div className="flex flex-col h-screen overflow-hidden bg-[var(--color-background)] text-[var(--color-fg)]"> <div className="flex flex-col h-screen overflow-hidden bg-[var(--color-background)] text-[var(--color-fg)]">
<Header /> <Header />
<div className="flex flex-grow w-full"> <div className="flex flex-grow w-full">
<Navigation className="w-56" /> <Navigation className="w-56" />
<main className="w-full flex-grow bg-[var(--color-surface)] dark:bg-[var(--color-surface)] border-l border-[var(--color-border)]"> <main className="w-full flex-grow bg-[var(--color-surface)] dark:bg-[var(--color-surface)] border-l border-[var(--color-border)]">
{sessionExpired && ( {sessionExpired && (
<div className="bg-red-500 text-white p-4 text-center"> <div className="bg-red-500 text-white p-4 text-center">
❌ Ihre Sitzung ist abgelaufen oder die Verbindung ist ❌ Ihre Sitzung ist abgelaufen oder die Verbindung ist

154
styles/globals.css
View File

@@ -58,11 +58,13 @@ body {
/* Smooth theme transitions (respect reduced motion) */ /* Smooth theme transitions (respect reduced motion) */
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
html, body { html,
transition: background-color .25s ease, color .25s ease; body {
transition: background-color 0.25s ease, color 0.25s ease;
} }
.theme-transition { .theme-transition {
transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; transition: background-color 0.25s ease, color 0.25s ease,
border-color 0.25s ease, box-shadow 0.25s ease;
} }
} }
@@ -71,18 +73,42 @@ body {
text-wrap: balance; text-wrap: balance;
} }
/* Semantic shortcut utilities */ /* Semantic shortcut utilities */
.bg-background { background-color: var(--color-background); } .bg-background {
.bg-surface { background-color: var(--color-surface); } background-color: var(--color-background);
.bg-surface-alt { background-color: var(--color-surface-alt); } }
.text-fg { color: var(--color-fg); } .bg-surface {
.text-fg-muted { color: var(--color-fg-muted); } background-color: var(--color-surface);
.text-muted { color: var(--color-muted); } }
.border-base { border-color: var(--color-border); } .bg-surface-alt {
.ring-accent { --tw-ring-color: var(--color-ring); } background-color: var(--color-surface-alt);
.bg-accent { background-color: var(--color-accent); } }
.bg-accent-soft { background-color: var(--color-accent-soft); } .text-fg {
.text-success { color: var(--color-success); } color: var(--color-fg);
.text-danger { color: var(--color-danger); } }
.text-fg-muted {
color: var(--color-fg-muted);
}
.text-muted {
color: var(--color-muted);
}
.border-base {
border-color: var(--color-border);
}
.ring-accent {
--tw-ring-color: var(--color-ring);
}
.bg-accent {
background-color: var(--color-accent);
}
.bg-accent-soft {
background-color: var(--color-accent-soft);
}
.text-success {
color: var(--color-success);
}
.text-danger {
color: var(--color-danger);
}
/* Component abstractions (no @apply to avoid processing issues in global layer) */ /* Component abstractions (no @apply to avoid processing issues in global layer) */
.card { .card {
@@ -90,14 +116,15 @@ body {
color: var(--color-fg); color: var(--color-fg);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 0.375rem; /* rounded-md */ border-radius: 0.375rem; /* rounded-md */
box-shadow: 0 1px 2px rgba(0,0,0,0.05); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
} }
.card-elevated { .card-elevated {
background: var(--color-surface); background: var(--color-surface);
color: var(--color-fg); color: var(--color-fg);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 0.375rem; border-radius: 0.375rem;
box-shadow: 0 4px 10px -2px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.15); box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.25),
0 2px 4px rgba(0, 0, 0, 0.15);
} }
.table-surface { .table-surface {
background: var(--color-surface); background: var(--color-surface);
@@ -113,7 +140,11 @@ body {
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
} }
.table-row-hover:hover { .table-row-hover:hover {
background-color: color-mix(in srgb,var(--color-surface-alt) 85%,transparent); background-color: color-mix(
in srgb,
var(--color-surface-alt) 85%,
transparent
);
} }
.btn-accent { .btn-accent {
background: var(--color-accent); background: var(--color-accent);
@@ -121,21 +152,66 @@ body {
border-radius: 0.375rem; border-radius: 0.375rem;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
font-weight: 500; font-weight: 500;
box-shadow: 0 1px 2px rgba(0,0,0,0.05); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
transition: filter .2s ease, box-shadow .2s ease; transition: filter 0.2s ease, box-shadow 0.2s ease;
}
.btn-accent:hover {
filter: brightness(1.1);
}
.btn-accent:focus {
outline: 2px solid var(--color-ring);
outline-offset: 2px;
} }
.btn-accent:hover { filter: brightness(1.1); }
.btn-accent:focus { outline: 2px solid var(--color-ring); outline-offset: 2px; }
/* Button Variants */ /* Button Variants */
.btn-primary { @media (prefers-reduced-motion: no-preference) { transition: background-color .2s ease, filter .2s ease; } background: var(--color-accent); color:#fff; border-radius:.375rem; font-weight:500; padding:.5rem 1rem; } .btn-primary {
.btn-primary:hover { filter:brightness(1.1); } @media (prefers-reduced-motion: no-preference) {
.btn-primary:focus { outline:2px solid var(--color-ring); outline-offset:2px; } transition: background-color 0.2s ease, filter 0.2s ease;
.btn-muted { background: var(--color-muted); color: var(--color-fg); border-radius:.375rem; font-weight:500; padding:.5rem 1rem; } }
.btn-muted:hover { background: var(--color-fg); color: var(--color-background); } background: var(--color-accent);
.btn-outline { background: transparent; color: var(--color-fg); border:1px solid var(--color-border); border-radius:.375rem; font-weight:500; padding:.5rem 1rem; } color: #fff;
.btn-outline:hover { background: var(--color-surface-alt); } border-radius: 0.375rem;
.btn-danger { background: var(--color-danger); color:#fff; border-radius:.375rem; font-weight:500; padding:.5rem 1rem; } font-weight: 500;
.btn-danger:hover { filter:brightness(1.1); } padding: 0.5rem 1rem;
}
.btn-primary:hover {
filter: brightness(1.1);
}
.btn-primary:focus {
outline: 2px solid var(--color-ring);
outline-offset: 2px;
}
.btn-muted {
background: var(--color-muted);
color: var(--color-fg);
border-radius: 0.375rem;
font-weight: 500;
padding: 0.5rem 1rem;
}
.btn-muted:hover {
background: var(--color-fg);
color: var(--color-background);
}
.btn-outline {
background: transparent;
color: var(--color-fg);
border: 1px solid var(--color-border);
border-radius: 0.375rem;
font-weight: 500;
padding: 0.5rem 1rem;
}
.btn-outline:hover {
background: var(--color-surface-alt);
}
.btn-danger {
background: var(--color-danger);
color: #fff;
border-radius: 0.375rem;
font-weight: 500;
padding: 0.5rem 1rem;
}
.btn-danger:hover {
filter: brightness(1.1);
}
.input-base { .input-base {
background: var(--color-input-bg); background: var(--color-input-bg);
color: var(--color-fg); color: var(--color-fg);
@@ -149,22 +225,30 @@ body {
outline: 1px solid var(--color-ring); outline: 1px solid var(--color-ring);
outline-offset: 2px; outline-offset: 2px;
} }
.input-base:disabled { opacity: 0.6; cursor: not-allowed; } .input-base:disabled {
opacity: 0.6;
cursor: not-allowed;
}
} }
/* Form elements use tokens */ /* Form elements use tokens */
input, select, textarea { input,
select,
textarea {
background-color: var(--color-input-bg) !important; background-color: var(--color-input-bg) !important;
color: var(--color-fg) !important; color: var(--color-fg) !important;
border: 1px solid var(--color-input-border); border: 1px solid var(--color-input-border);
} }
input::placeholder, textarea::placeholder { input::placeholder,
textarea::placeholder {
color: var(--color-muted); color: var(--color-muted);
opacity: 1; /* ensure consistent visibility */ opacity: 1; /* ensure consistent visibility */
} }
input:focus, select:focus, textarea:focus { input:focus,
select:focus,
textarea:focus {
outline: 2px solid var(--color-ring); outline: 2px solid var(--color-ring);
outline-offset: 2px; outline-offset: 2px;
border-color: var(--color-ring); border-color: var(--color-ring);