cgr-next-js/app/(backend)/page.tsx

"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",
        },
      ],
    },
  ];

  return (
    <div data-cmp="Dashboard" className="max-w-7xl mx-auto space-y-8">
      {/* Welcome Section */}
      <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>

      {/* 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;