Integrated a from ai generated dashboard

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<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;

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<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;

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 (
+    <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;

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<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;