diff --git a/app/(backend)/layout.tsx b/app/(backend)/layout.tsx index 3ecc8ac..7e4c359 100644 --- a/app/(backend)/layout.tsx +++ b/app/(backend)/layout.tsx @@ -1,14 +1,31 @@ -import Header from "@/components/Header"; +"use client"; -const Layout = ({ children }: { children: React.ReactNode }) => { - return ( -
-
-
- {children} -
-
- ) +import Header from "@/components/Header/index"; +import Sidebar from "@/components/Sidebar"; +import React, { useState } from "react"; + +interface LayoutProps { + children: React.ReactNode; } -export default Layout; \ No newline at end of file +const Layout: React.FC = ({ children }) => { + const [sidebarOpen, setSidebarOpen] = useState(false); + + return ( +
+ + + {/* Mobile Sidebar Overlay */} + {sidebarOpen && ( +
setSidebarOpen(false)} /> + )} + +
+
setSidebarOpen(!sidebarOpen)} /> +
{children}
+
+
+ ); +}; + +export default Layout; diff --git a/app/(backend)/page.tsx b/app/(backend)/page.tsx index a2a7ea3..56011b7 100644 --- a/app/(backend)/page.tsx +++ b/app/(backend)/page.tsx @@ -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 ( -
- -
- ) -} +
+ {/* Welcome Section */} +
+
+

Community Dashboard

+

+ Welcome to the admin area. Manage your community resources safely. +

+
+
+ v2.4.0 Live +
+
-export default Home; \ No newline at end of file + {/* Quick Stats */} +
+ + + +
+ + {/* Categories */} +
+ {categories.map((category) => ( +
+
+

{category.title}

+
+
+ +
+ {category.items.map((item) => ( + console.log(`Navigating to ${item.path}`)} + /> + ))} +
+
+ ))} +
+
+ ); +}; + +export default Dashboard; diff --git a/components/Header/index.tsx b/components/Header/index.tsx new file mode 100644 index 0000000..7f5d9e5 --- /dev/null +++ b/components/Header/index.tsx @@ -0,0 +1,52 @@ +import { Bell, Menu, Search, User } from "lucide-react"; +import React from "react"; + +interface HeaderProps { + onMenuClick: () => void; +} + +const Header: React.FC = ({ onMenuClick }) => { + return ( +
+
+ +
+ +
+ + +
+ +
+ + +
+
+

Community Admin

+

Super Administrator

+
+
+ +
+
+
+
+ ); +}; + +export default Header; diff --git a/components/ModuleCard/index.tsx b/components/ModuleCard/index.tsx new file mode 100644 index 0000000..4148438 --- /dev/null +++ b/components/ModuleCard/index.tsx @@ -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 = ({ title, description, icon: Icon, onClick }) => { + return ( +
+
+ +
+ +
+ +
+ +

{title}

+ +

{description}

+
+ ); +}; + +export default ModuleCard; diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx new file mode 100644 index 0000000..70735ae --- /dev/null +++ b/components/Sidebar/index.tsx @@ -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 ( + + ); +}; + +export default Sidebar; diff --git a/components/StatCard/index.tsx b/components/StatCard/index.tsx new file mode 100644 index 0000000..fdb9a9f --- /dev/null +++ b/components/StatCard/index.tsx @@ -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 = ({ label, value, icon: Icon, trend, change }) => { + return ( +
+
+ {label} +
+ +
+
+
+

{value}

+ {change && ( + + {trend === "up" && } + {trend === "down" && } + {trend === "neutral" && } + {change} + + )} +
+
+ ); +}; + +export default StatCard; diff --git a/lib/types/dashboard.ts b/lib/types/dashboard.ts new file mode 100644 index 0000000..44eb921 --- /dev/null +++ b/lib/types/dashboard.ts @@ -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[]; +}