daniel-gitea/cgr-next-js
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Add prettier and plugin for tailwind; Adapted global css for light and dark theme

Browse Source
This commit is contained in:
Eduard Schulteis
2026-01-28 10:43:42 +01:00
parent 30228bf6b1
commit 66e3f5a3d1
8 changed files with 335 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/(backend)/layout.tsx
View File

@@ -12,17 +12,24 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
const [sidebarOpen, setSidebarOpen] = useState(false);
return (
<div data-cmp="DashboardLayout" className="min-h-screen bg-muted/30">
<div className="dashboard">
<Sidebar />
{/* Mobile Sidebar Overlay */}
{sidebarOpen && (
<div className="fixed inset-0 bg-black/50 z-40 md:hidden" onClick={() => setSidebarOpen(false)} />
<div
className="fixed inset-0 z-40 bg-black/50 md:hidden"
onClick={() => setSidebarOpen(false)}
/>
)}
<div className={`md:pl-64 flex flex-col min-h-screen transition-all duration-300`}>
<div
className={`flex min-h-screen flex-col transition-all duration-300 md:pl-64`}
>
<Header onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
<main className="flex-1 p-4 md:p-8 animate-in fade-in duration-500">{children}</main>
<main className="animate-in fade-in flex-1 p-4 duration-500 md:p-8">
{children}
</main>
</div>
</div>
);

65
app/(backend)/page.tsx
View File

@@ -51,7 +51,8 @@ const Dashboard: React.FC = () => {
{
id: "addresses",
title: "Addresses",
description: "Database of addresses for registered users and locations.",
description:
"Database of addresses for registered users and locations.",
icon: MapPin,
path: "/addresses",
},
@@ -63,14 +64,16 @@ const Dashboard: React.FC = () => {
{
id: "services",
title: "Services & Lectures",
description: "Schedule and manage church services and lecture events.",
description:
"Schedule and manage church services and lecture events.",
icon: Calendar,
path: "/services",
},
{
id: "lectures_list",
title: "Lectures List",
description: "Browse the complete archive of lectures from all communities.",
description:
"Browse the complete archive of lectures from all communities.",
icon: Mic2,
path: "/lectures",
},
@@ -136,7 +139,8 @@ const Dashboard: React.FC = () => {
{
id: "types",
title: "Lecture Types",
description: "Define and categorize different types of presentations.",
description:
"Define and categorize different types of presentations.",
icon: Tag,
path: "/types",
},
@@ -159,37 +163,64 @@ const Dashboard: React.FC = () => {
];
return (
<div data-cmp="Dashboard" className="max-w-7xl mx-auto space-y-8">
<div className="mx-auto max-w-7xl space-y-8">
{/* Welcome Section */}
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
<div className="flex flex-col justify-between gap-4 md:flex-row md:items-center">
<div>
<h1 className="text-3xl font-bold text-foreground tracking-tight">Community Dashboard</h1>
<h1 className="text-foreground text-3xl font-bold tracking-tight">
Community Dashboard
</h1>
<p className="text-muted-foreground mt-1">
Welcome to the admin area. Manage your community resources safely.
</p>
</div>
<div className="flex space-x-3">
<span className="text-sm px-3 py-1 bg-primary/10 text-primary rounded-full font-medium">v2.4.0 Live</span>
<span className="bg-primary/10 text-primary rounded-full px-3 py-1 text-sm font-medium">
v2.4.0 Live
</span>
</div>
</div>
{/* Quick Stats */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<StatCard label="Total Members" value="2,845" icon={Users} trend="up" change="12% this month" />
<StatCard label="Upcoming Services" value="24" icon={Calendar} trend="neutral" change="Next 7 days" />
<StatCard label="Songs Database" value="1,430" icon={Music} trend="up" change="5 new added" />
<div className="grid grid-cols-1 gap-6 md:grid-cols-3">
<StatCard
label="Total Members"
value="2,845"
icon={Users}
trend="up"
change="12% this month"
/>
<StatCard
label="Upcoming Services"
value="24"
icon={Calendar}
trend="neutral"
change="Next 7 days"
/>
<StatCard
label="Songs Database"
value="1,430"
icon={Music}
trend="up"
change="5 new added"
/>
</div>
{/* Categories */}
<div className="space-y-10">
{categories.map((category) => (
<div key={category.title} className="animate-in fade-in slide-in-from-bottom-4 duration-700">
<div className="flex items-center space-x-2 mb-6">
<h2 className="text-xl font-semibold text-foreground border-l-4 border-primary pl-3">{category.title}</h2>
<div className="h-px bg-border flex-1 ml-4 opacity-50"></div>
<div
key={category.title}
className="animate-in fade-in slide-in-from-bottom-4 duration-700"
>
<div className="mb-6 flex items-center space-x-2">
<h2 className="text-foreground border-primary border-l-4 pl-3 text-xl font-semibold">
{category.title}
</h2>
<div className="bg-border ml-4 h-px flex-1 opacity-50"></div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
{category.items.map((item) => (
<ModuleCard
key={item.id}