Added Analytics Page

next.config.js

@@ -1,24 +1,25 @@
 // next.config.js
+
 /** @type {import('next').NextConfig} */
+
 const nextConfig = {
   reactStrictMode: true,
+
   experimental: {
     turbo: {
       enabled: true, // Set turbo to true within an object
     },
   },
+
   images: {
-    domains: ['randomuser.me'],
+    domains: ["randomuser.me"],
   },
-
 };
 
 // export default nextConfig;
 
-
 // /** @type {import('next').NextConfig} */
+
 // const nextConfig = {};
 
 // module.exports = nextConfig;
-
-

package.json

@@ -40,7 +40,7 @@
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.5.2",
     "react-icons": "^5.5.0",
-    "recharts": "^2.15.3",
+    "recharts": "^2.15.4",
     "sharp": "^0.33.5",
     "starknet": "^6.23.1",
     "starknetkit": "^2.12.1",

src/app/book-lisiting-page/page.tsx

@@ -74,8 +74,6 @@ export default function Page() {
 
 
 
-
-
     return (
         <div className="w-full h-full flex flex-col items-start justify-start gap-6 " >
             <BooksPageNav setDisplayedSection={setDisplayedSection} displayedSection={displayedSection} />

src/app/dashboard/admin/analytics/page.tsx

@@ -1,21 +1,76 @@
-"use-client";
+"use client";
+import React, { useState } from "react";
 import { Header } from "@/components/dashboard/header";
-
-
+import SignupChart from "@/components/analytics/SignUpChart";
+import ChartDetails from "@/components/analytics/ChartDetails";
+import ReadersAnalytics from "@/components/analytics/ReaderAnalytics";
+import WritersAnalytics from "@/components/analytics/WritersAnalytics";
 export default function Analytics() {
+  const [selectedTab, setSelectedTab] = useState("This Week");
+  const [fromDate, setFromDate] = useState("");
+  const [toDate, setToDate] = useState("");
+
+  const tabs = ["This Week", "This Month", "This Year", "All Time"];
 
-
   return (
     <>
       <Header title="Analytics" />
-      <div className="space-y-6">
-        <div className="flex flex-col items-center justify-center h-screen">
-          <h1 className="text-2xl font-bold text-gray-800">Analytics</h1>
-          <p className="text-gray-600 mt-2">
-            Welcome to Analytics
-          </p>
+      <main className="p-4">
+        <h2 className="text-xl font-semibold mb-4">Total Signups</h2>
+
+        <div className="flex flex-col md:flex-row md:items-center justify-between mb-4 gap-4">
+          <div className="flex flex-wrap gap-2">
+            {tabs.map((tab) => (
+              <button
+                key={tab}
+                onClick={() => setSelectedTab(tab)}
+                className={`px-4 py-1 rounded-md text-sm border ${
+                  selectedTab === tab
+                    ? "bg-blue-500 text-white border-blue-500"
+                    : "bg-white text-gray-700 border-gray-300 hover:bg-gray-100"
+                }`}
+              >
+                {tab}
+              </button>
+            ))}
+          </div>
+
+          <div className="flex items-center gap-2">
+            <input
+              type="date"
+              value={fromDate}
+              onChange={(e) => setFromDate(e.target.value)}
+              className="border border-gray-300 rounded-md px-2 py-1 text-sm"
+            />
+            <span className="text-sm">to</span>
+            <input
+              type="date"
+              value={toDate}
+              onChange={(e) => setToDate(e.target.value)}
+              className="border border-gray-300 rounded-md px-2 py-1 text-sm"
+            />
+            <button
+              className="px-3 py-1 text-sm rounded-md bg-blue-500 text-white hover:bg-blue-600"
+              onClick={() => {
+                console.log("Apply clicked", fromDate, toDate);
+              }}
+            >
+              Apply
+            </button>
+          </div>
+        </div>
+
+        <div className="flex flex-wrap md:flex-nowrap ">
+          <div className=" w-full   ">
+            <SignupChart />
+          </div>
+          <div className="w-full  ">
+            <ChartDetails />
+          </div>
         </div>
-      </div>
+        <ReadersAnalytics />
+        <WritersAnalytics />
+      </main>
     </>
   );
 }

src/app/dashboard/admin/page.tsx

@@ -1,24 +1,33 @@
-"use-client";
+"use client";
+import StatCard from "@/components/analytics/StatCard";
+import { stats } from "@/assets/data/dummyData";
+import Transactions from "@/components/analytics/Transactions";
+import PayoutRequests from "@/components/analytics/PayoutRequests";
+import TrendingBooks from "@/components/analytics/TrendingBooks";
+import TopAuthors from "@/components/analytics/TopAuthors";
 import StarknetProvider from "@/components/blockchain/StarknetProviders";
 import { WalletProvider } from "@/components/blockchain/wallet-connect-context";
 import { Header } from "@/components/dashboard/header";
 
-
 export default function DashboardHome() {
-
   return (
     <>
       <StarknetProvider>
         <WalletProvider>
           <Header title="Dashboard" />
-          <div className="space-y-6">
-            <div className="flex flex-col items-center justify-center h-screen">
-              <h1 className="text-2xl font-bold text-gray-800">
-                Admin Dashboard
-              </h1>
-              <p className="text-gray-600 mt-2">
-                Welcome to your personalized admin space!
-              </p>
+          <div className="bg-gray-50 min-h-screen p-4 sm:p-6 lg:p-8">
+            <div className="max-w-7xl mx-auto">
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                {stats.map((stat, index) => (
+                  <StatCard key={index} {...stat} />
+                ))}
+              </div>
+              <div className="mt-6">
+                <Transactions />
+              </div>
+              <PayoutRequests />
+              <TrendingBooks />
+              <TopAuthors />
             </div>
           </div>
         </WalletProvider>

src/assets/data/dummyData.ts

@@ -0,0 +1,126 @@
+export const stats = [
+  {
+    title: "Number of Regular",
+    value: "257",
+    icon: "briefcase",
+    color: "bg-blue-100",
+    textColor: "text-blue-500",
+  },
+  {
+    title: "NFT Books",
+    value: "83",
+    icon: "book",
+    color: "bg-purple-100",
+    textColor: "text-purple-500",
+  },
+  {
+    title: "Readers",
+    value: "1093",
+    icon: "users",
+    color: "bg-green-100",
+    textColor: "text-green-500",
+  },
+  {
+    title: "Writers",
+    value: "204",
+    icon: "wallet",
+    color: "bg-orange-100",
+    textColor: "text-orange-500",
+  },
+] as const;
+export const payoutRequests = [
+  {
+    author: "Olu Ademola",
+    email: "oluade..@gmail.com",
+    amount: "900.67 STR",
+    wallet: "0xABC...789",
+    date: "27 May, 2025",
+    status: "Pending",
+  },
+  {
+    author: "Olu Ademola",
+    email: "oluade..@gmail.com",
+    amount: "900.67 STR",
+    wallet: "0xABC...789",
+    date: "27 May, 2025",
+    status: "Pending",
+  },
+  {
+    author: "Olu Ademola",
+    email: "oluade..@gmail.com",
+    amount: "900.67 STR",
+    wallet: "0xABC...789",
+    date: "27 May, 2025",
+    status: "Pending",
+  },
+  {
+    author: "Olu Ademola",
+    email: "oluade..@gmail.com",
+    amount: "900.67 STR",
+    wallet: "0xABC...789",
+    date: "27 May, 2025",
+    status: "Pending",
+  },
+  {
+    author: "Olu Ademola",
+    email: "oluade..@gmail.com",
+    amount: "900.67 STR",
+    wallet: "0xABC...789",
+    date: "27 May, 2025",
+    status: "Pending",
+  },
+];
+
+export const trendingBooks = [
+  {
+    title: "Native Invisibility",
+    author: "by Darrin Collins",
+    price: "193 STRK",
+    rating: 4.5,
+    cover: "",
+  },
+  {
+    title: "Native Invisibility",
+    author: "by Darrin Collins",
+    price: "193 STRK",
+    rating: 4.5,
+    cover: "",
+  },
+  {
+    title: "Native Invisibility",
+    author: "by Darrin Collins",
+    price: "193 STRK",
+    rating: 4.5,
+    cover: "",
+  },
+  {
+    title: "Native Invisibility",
+    author: "by Darrin Collins",
+    price: "193 STRK",
+    rating: 4.5,
+    cover: "",
+  },
+];
+
+export const topAuthors = [
+  {
+    name: "Elizabeth Joe",
+    image: "https://placehold.co/150x150/E0E0E0/000000?text=E.J",
+  },
+  {
+    name: "Alex Paul",
+    image: "https://placehold.co/150x150/D0D0D0/000000?text=A.P",
+  },
+  {
+    name: "Samson Toluwase",
+    image: "https://placehold.co/150x150/C0C0C0/000000?text=S.T",
+  },
+  {
+    name: "Vansika Maya",
+    image: "https://placehold.co/150x150/B0B0B0/000000?text=V.M",
+  },
+  {
+    name: "Samson Toluwase",
+    image: "https://placehold.co/150x150/A0A0A0/000000?text=S.T",
+  },
+];

src/components/analytics/AuthorCard.tsx

@@ -0,0 +1,21 @@
+"use client";
+import Image from "next/image";
+import Image2 from "@/assets/Images/footerimage.png";
+type AuthorCardProps = {
+  name: string;
+  image: string;
+};
+
+const AuthorCard: React.FC<AuthorCardProps> = ({ name, image }) => (
+  <div className="text-center">
+    <Image
+      src={Image2}
+      alt={name}
+      width={100}
+      height={100}
+      className="rounded-full object-cover mx-auto"
+    />
+    <p className="mt-2 font-semibold text-gray-800">{name}</p>
+  </div>
+);
+export default AuthorCard;

src/components/analytics/BookCard.tsx

@@ -0,0 +1,45 @@
+"use client";
+import Image from "next/image";
+import Image2 from "@/assets/Images/footerimage.png";
+type BookCardProps = {
+  title: string;
+  author: string;
+  price: string;
+  rating: number;
+  cover: string;
+};
+
+const BookCard: React.FC<BookCardProps> = ({
+  title,
+  author,
+  price,
+  rating,
+  cover,
+}) => (
+  <div className="bg-white p-4 rounded-lg shadow-sm flex items-center">
+    <Image
+      src={Image2}
+      alt={title}
+      width={60}
+      height={80}
+      className="rounded-md object-cover mr-4"
+    />
+    <div>
+      <h3 className="font-semibold text-gray-800">{title}</h3>
+      <p className="text-sm text-gray-500">{author}</p>
+      <p className="text-sm font-bold text-blue-600 mt-1">{price}</p>
+      <div className="flex items-center text-sm text-gray-500 mt-1">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-4 w-4 text-yellow-400 mr-1"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+        </svg>
+        {rating}
+      </div>
+    </div>
+  </div>
+);
+export default BookCard;