Integrated a from ai generated dashboard
This commit is contained in:
@@ -1,14 +1,31 @@
|
|||||||
import Header from "@/components/Header";
|
"use client";
|
||||||
|
|
||||||
const Layout = ({ children }: { children: React.ReactNode }) => {
|
import Header from "@/components/Header/index";
|
||||||
return (
|
import Sidebar from "@/components/Sidebar";
|
||||||
<main className="min-h-screen text-gray-400">
|
import React, { useState } from "react";
|
||||||
<Header />
|
|
||||||
<div className="container py-10">
|
interface LayoutProps {
|
||||||
{children}
|
children: React.ReactNode;
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const Layout: React.FC<LayoutProps> = ({ children }) => {
|
||||||
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div data-cmp="DashboardLayout" className="min-h-screen bg-muted/30">
|
||||||
|
<Sidebar />
|
||||||
|
|
||||||
|
{/* Mobile Sidebar Overlay */}
|
||||||
|
{sidebarOpen && (
|
||||||
|
<div className="fixed inset-0 bg-black/50 z-40 md:hidden" onClick={() => setSidebarOpen(false)} />
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className={`md:pl-64 flex flex-col min-h-screen transition-all duration-300`}>
|
||||||
|
<Header onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
|
||||||
|
<main className="flex-1 p-4 md:p-8 animate-in fade-in duration-500">{children}</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
export default Layout;
|
export default Layout;
|
||||||
@@ -1,11 +1,210 @@
|
|||||||
import { Button } from "@/components/ui/button";
|
"use client";
|
||||||
|
|
||||||
|
import ModuleCard from "@/components/ModuleCard";
|
||||||
|
import StatCard from "@/components/StatCard";
|
||||||
|
import { ModuleCategory } from "@/lib/types/dashboard";
|
||||||
|
import {
|
||||||
|
BookOpen,
|
||||||
|
Building2,
|
||||||
|
Calendar,
|
||||||
|
FileText,
|
||||||
|
History,
|
||||||
|
Languages,
|
||||||
|
Layout,
|
||||||
|
List,
|
||||||
|
MapPin,
|
||||||
|
Mic2,
|
||||||
|
Music,
|
||||||
|
Sparkles,
|
||||||
|
Tag,
|
||||||
|
UserCircle,
|
||||||
|
Users,
|
||||||
|
} from "lucide-react";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const Dashboard: React.FC = () => {
|
||||||
|
const categories: ModuleCategory[] = [
|
||||||
|
{
|
||||||
|
title: "People & Community",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
id: "users",
|
||||||
|
title: "Users",
|
||||||
|
description: "Manage registered users, permissions, and roles.",
|
||||||
|
icon: Users,
|
||||||
|
path: "/users",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "profiles",
|
||||||
|
title: "Profiles",
|
||||||
|
description: "Create, edit, or remove detailed user profiles.",
|
||||||
|
icon: UserCircle,
|
||||||
|
path: "/profiles",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "communities",
|
||||||
|
title: "Communities",
|
||||||
|
description: "Manage different community groups and branches.",
|
||||||
|
icon: Building2,
|
||||||
|
path: "/communities",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "addresses",
|
||||||
|
title: "Addresses",
|
||||||
|
description: "Database of addresses for registered users and locations.",
|
||||||
|
icon: MapPin,
|
||||||
|
path: "/addresses",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Worship & Events",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
id: "services",
|
||||||
|
title: "Services & Lectures",
|
||||||
|
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.",
|
||||||
|
icon: Mic2,
|
||||||
|
path: "/lectures",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "holidays",
|
||||||
|
title: "Feast Days",
|
||||||
|
description: "Configure upcoming holidays and special feast days.",
|
||||||
|
icon: Sparkles,
|
||||||
|
path: "/holidays",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "services_list",
|
||||||
|
title: "Services List",
|
||||||
|
description: "View only the scheduled services overview.",
|
||||||
|
icon: List,
|
||||||
|
path: "/services-list",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Music & Content",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
id: "songbooks",
|
||||||
|
title: "Songbooks",
|
||||||
|
description: "Manage digital songbook collections and versions.",
|
||||||
|
icon: BookOpen,
|
||||||
|
path: "/songbooks",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "songs",
|
||||||
|
title: "Songs & Poems",
|
||||||
|
description: "Create and edit lyrics, poems, and musical content.",
|
||||||
|
icon: Music,
|
||||||
|
path: "/songs",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "themes",
|
||||||
|
title: "Themes",
|
||||||
|
description: "Organize songs and poems into thematic categories.",
|
||||||
|
icon: Tag,
|
||||||
|
path: "/themes",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "titles",
|
||||||
|
title: "Titles",
|
||||||
|
description: "Index of all titles for lectures, songs, and poems.",
|
||||||
|
icon: Layout,
|
||||||
|
path: "/titles",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "System & Config",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
id: "changes",
|
||||||
|
title: "Change Log",
|
||||||
|
description: "Track database modifications and user activities.",
|
||||||
|
icon: History,
|
||||||
|
path: "/changes",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "types",
|
||||||
|
title: "Lecture Types",
|
||||||
|
description: "Define and categorize different types of presentations.",
|
||||||
|
icon: Tag,
|
||||||
|
path: "/types",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "contributions",
|
||||||
|
title: "Contributions",
|
||||||
|
description: "Manage community posts and member contributions.",
|
||||||
|
icon: FileText,
|
||||||
|
path: "/contributions",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "languages",
|
||||||
|
title: "Languages",
|
||||||
|
description: "Configure supported languages and translations.",
|
||||||
|
icon: Languages,
|
||||||
|
path: "/languages",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
const Home = () => {
|
|
||||||
return (
|
return (
|
||||||
<div className="flex min-h-screen home-wrapper">
|
<div data-cmp="Dashboard" className="max-w-7xl mx-auto space-y-8">
|
||||||
<Button>Backend Home Page</Button>
|
{/* Welcome Section */}
|
||||||
</div>
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||||
)
|
<div>
|
||||||
}
|
<h1 className="text-3xl font-bold text-foreground 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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
export default Home;
|
{/* 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>
|
||||||
|
|
||||||
|
{/* 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>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
{category.items.map((item) => (
|
||||||
|
<ModuleCard
|
||||||
|
key={item.id}
|
||||||
|
title={item.title}
|
||||||
|
description={item.description}
|
||||||
|
icon={item.icon}
|
||||||
|
onClick={() => console.log(`Navigating to ${item.path}`)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Dashboard;
|
||||||
|
|||||||
52
components/Header/index.tsx
Normal file
52
components/Header/index.tsx
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
import { Bell, Menu, Search, User } from "lucide-react";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
interface HeaderProps {
|
||||||
|
onMenuClick: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Header: React.FC<HeaderProps> = ({ onMenuClick }) => {
|
||||||
|
return (
|
||||||
|
<header
|
||||||
|
data-cmp="Header"
|
||||||
|
className="h-16 bg-card border-b border-border sticky top-0 z-20 px-4 md:px-8 flex items-center justify-between"
|
||||||
|
>
|
||||||
|
<div className="flex items-center md:hidden">
|
||||||
|
<button title="Menu" onClick={onMenuClick} className="p-2 -ml-2 text-foreground hover:bg-muted rounded-md">
|
||||||
|
<Menu className="w-6 h-6" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="hidden md:flex flex-1 max-w-xl relative">
|
||||||
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search modules, users, or files..."
|
||||||
|
className="w-full pl-10 pr-4 py-2 bg-muted/50 border-none rounded-lg text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<button
|
||||||
|
title="Notifications"
|
||||||
|
className="relative p-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-full transition-colors"
|
||||||
|
>
|
||||||
|
<Bell className="w-5 h-5" />
|
||||||
|
<span className="absolute top-1.5 right-1.5 w-2 h-2 bg-destructive rounded-full border-2 border-card"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div className="flex items-center space-x-3 pl-4 border-l border-border/50">
|
||||||
|
<div className="text-right hidden sm:block">
|
||||||
|
<p className="text-sm font-medium text-foreground">Community Admin</p>
|
||||||
|
<p className="text-xs text-muted-foreground">Super Administrator</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-9 h-9 bg-primary/10 rounded-full flex items-center justify-center border border-primary/20">
|
||||||
|
<User className="w-5 h-5 text-primary" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Header;
|
||||||
33
components/ModuleCard/index.tsx
Normal file
33
components/ModuleCard/index.tsx
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
import { ArrowRight, LucideIcon } from "lucide-react";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
interface ModuleCardProps {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
icon: LucideIcon;
|
||||||
|
onClick?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ModuleCard: React.FC<ModuleCardProps> = ({ title, description, icon: Icon, onClick }) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-cmp="ModuleCard"
|
||||||
|
onClick={onClick}
|
||||||
|
className="group bg-card hover:bg-muted/50 border border-border rounded-xl p-6 transition-all duration-300 hover:shadow-custom cursor-pointer flex flex-col h-full relative overflow-hidden"
|
||||||
|
>
|
||||||
|
<div className="absolute top-0 right-0 p-4 opacity-0 group-hover:opacity-100 transition-opacity transform translate-x-2 group-hover:translate-x-0">
|
||||||
|
<ArrowRight className="w-5 h-5 text-primary" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-4 p-3 bg-primary/10 w-fit rounded-lg group-hover:bg-primary/20 transition-colors">
|
||||||
|
<Icon className="w-6 h-6 text-primary" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 className="text-lg font-semibold text-foreground mb-2 group-hover:text-primary transition-colors">{title}</h3>
|
||||||
|
|
||||||
|
<p className="text-sm text-muted-foreground line-clamp-3 leading-relaxed">{description}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ModuleCard;
|
||||||
62
components/Sidebar/index.tsx
Normal file
62
components/Sidebar/index.tsx
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
import { Building2, Calendar, FileText, LayoutDashboard, LogOut, Music, Settings, Users } from "lucide-react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { usePathname } from "next/navigation";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const navItems = [
|
||||||
|
{ icon: LayoutDashboard, label: "Overview", path: "/" },
|
||||||
|
{ icon: Users, label: "People", path: "#people" },
|
||||||
|
{ icon: Calendar, label: "Worship & Events", path: "#events" },
|
||||||
|
{ icon: Music, label: "Music & Media", path: "#music" },
|
||||||
|
{ icon: FileText, label: "Changes & Logs", path: "#logs" },
|
||||||
|
{ icon: Settings, label: "Settings", path: "#settings" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const Sidebar: React.FC = () => {
|
||||||
|
const pathName = usePathname();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<aside
|
||||||
|
data-cmp="Sidebar"
|
||||||
|
className="hidden md:flex flex-col w-64 h-screen bg-card border-r border-border fixed left-0 top-0 z-30"
|
||||||
|
>
|
||||||
|
<div className="p-6 border-b border-border">
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
|
||||||
|
<Building2 className="w-5 h-5 text-primary-foreground" />
|
||||||
|
</div>
|
||||||
|
<span className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-purple-600">
|
||||||
|
CGR Admin
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav className="flex-1 overflow-y-auto py-6 px-3 space-y-1">
|
||||||
|
{navItems.map((item) => {
|
||||||
|
const isActive = pathName === item.path;
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={item.label}
|
||||||
|
href={item.path}
|
||||||
|
className={`flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${
|
||||||
|
isActive ? "bg-primary/10 text-primary" : "text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<item.icon className={`w-5 h-5 ${isActive ? "text-primary" : ""}`} />
|
||||||
|
<span>{item.label}</span>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div className="p-4 border-t border-border">
|
||||||
|
<button className="flex items-center space-x-3 w-full px-3 py-2.5 rounded-lg text-sm font-medium text-destructive hover:bg-destructive/10 transition-colors">
|
||||||
|
<LogOut className="w-5 h-5" />
|
||||||
|
<span>Sign Out</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Sidebar;
|
||||||
40
components/StatCard/index.tsx
Normal file
40
components/StatCard/index.tsx
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
import { ArrowDownRight, ArrowUpRight, LucideIcon, Minus } from "lucide-react";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
interface StatCardProps {
|
||||||
|
label: string;
|
||||||
|
value: string;
|
||||||
|
icon: LucideIcon;
|
||||||
|
trend?: "up" | "down" | "neutral";
|
||||||
|
change?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const StatCard: React.FC<StatCardProps> = ({ label, value, icon: Icon, trend, change }) => {
|
||||||
|
return (
|
||||||
|
<div data-cmp="StatCard" className="bg-card border border-border rounded-xl p-6 shadow-sm">
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<span className="text-sm font-medium text-muted-foreground">{label}</span>
|
||||||
|
<div className="p-2 bg-muted rounded-full">
|
||||||
|
<Icon className="w-4 h-4 text-foreground" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-baseline space-x-2">
|
||||||
|
<h2 className="text-3xl font-bold text-foreground">{value}</h2>
|
||||||
|
{change && (
|
||||||
|
<span
|
||||||
|
className={`flex items-center text-xs font-medium ${
|
||||||
|
trend === "up" ? "text-green-600" : trend === "down" ? "text-red-500" : "text-muted-foreground"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{trend === "up" && <ArrowUpRight className="w-3 h-3 mr-1" />}
|
||||||
|
{trend === "down" && <ArrowDownRight className="w-3 h-3 mr-1" />}
|
||||||
|
{trend === "neutral" && <Minus className="w-3 h-3 mr-1" />}
|
||||||
|
{change}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default StatCard;
|
||||||
23
lib/types/dashboard.ts
Normal file
23
lib/types/dashboard.ts
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
import { LucideIcon } from "lucide-react";
|
||||||
|
|
||||||
|
export interface DashboardStat {
|
||||||
|
label: string;
|
||||||
|
value: string;
|
||||||
|
change?: string;
|
||||||
|
trend?: "up" | "down" | "neutral";
|
||||||
|
icon: LucideIcon;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ModuleItem {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
icon: LucideIcon;
|
||||||
|
path: string;
|
||||||
|
color?: string; // Optional nice-to-have accent color
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ModuleCategory {
|
||||||
|
title: string;
|
||||||
|
items: ModuleItem[];
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user