Added FE for Admin dashboard and Analytics

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,77 @@
-"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 md:w-2/3">
+            <SignupChart />
+          </div>
+          <div className="w-full md:w-1/3">
+            <ChartDetails />
+          </div>
         </div>
-      </div>
+
+        <ReadersAnalytics />
+        <WritersAnalytics />
+      </main>
     </>
   );
 }