feat(analytics): Implement comprehensive analytics dashboard

package.json

@@ -15,8 +15,10 @@
     "@headlessui/react": "^2.2.0",
     "@mui/material": "^7.0.2",
     "@radix-ui/react-checkbox": "^1.2.3",
-    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-slot": "^1.2.0",
+    "@radix-ui/react-tabs": "^1.1.12",
     "@splidejs/react-splide": "^0.7.12",
     "@splidejs/splide": "^4.1.4",
     "@starknet-react/chains": "^3.1.2",
@@ -25,15 +27,18 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^12.5.0",
+    "install": "^0.13.0",
     "keen-slider": "^6.8.6",
     "lodash": "^4.17.21",
     "lucide-react": "^0.474.0",
+    "lunpm": "^1.0.1",
     "next": "^14.2.25",
     "react": "^18.3.1",
     "react-datepicker": "^8.2.1",
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.5.2",
     "react-icons": "^5.5.0",
+    "recharts": "^2.15.3",
     "sharp": "^0.33.5",
     "starknet": "^6.23.1",
     "tailwind-merge": "^2.6.0",

src/app/dashboard/analytics/page.tsx

@@ -1,13 +1,26 @@
+import AnalyticsHeader from "@/components/analytics/analytics-header";
+import AnalyticsStatsGrid from "@/components/analytics/analytics-stats-grid";
+import AnalyticsTabs from "@/components/analytics/analytics-tabs";
 
-
-
-function AnalyticsPage() {
+export default function AnalyticsDashboard() {
   return (
-    <div>
-      <h1>Analytics</h1>
-      <p>Analytics page content goes here.</p>
+    <div className="min-h-screen bg-gray-50 p-6">
+      <div className="max-w-7xl mx-auto space-y-6">
+        {/* Header with back button */}
+        <AnalyticsHeader />
+        {/* Top Stats Grid */}
+        <AnalyticsStatsGrid />
+
+        <div className="flex flex-col bg-white rounded-lg border border-gray-200/40 p-6 gap-6">
+          {/* Book Performance Stats */}
+          <div className="bg-white p-3">
+            <h2 className="text-xl px-4 font-bold text-gray-400 mb-4">
+              Book Performance Stats
+            </h2>
+            <AnalyticsTabs />
+          </div>
+        </div>
+      </div>
     </div>
   );
 }
-
-export default AnalyticsPage

src/app/dashboard/earnings/page.tsx

@@ -1,6 +1,3 @@
-
-
-
 function EarningsPage() {
   return (
     <div className="flex flex-col gap-4">
@@ -12,4 +9,4 @@ function EarningsPage() {
   );
 }
 
-export default EarningsPage;
+export default EarningsPage;

src/components/analytics/analytics-header.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+import Link from "next/link";
+import { ArrowLeft } from "lucide-react";
+const AnalyticsHeader = () => {
+  return (
+    <div className="flex lg:hidden items-center gap-4 mb-6">
+      <Link href="/dashboard" className="text-gray-600 hover:text-gray-900">
+        <ArrowLeft className="h-6 w-6" />
+      </Link>
+      <h1 className="text-2xl font-bold text-gray-900">Analytics</h1>
+    </div>
+  );
+};
+
+export default AnalyticsHeader;

src/components/analytics/analytics-stats-grid.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+const AnalyticsStatsGrid = () => {
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 bg-white rounded-lg border border-gray-200/40 p-6 gap-6">
+      <div className="bg-white p-3 rounded-lg border border-gray-200/40">
+        <div className="text-sm text-gray-600 mb-2">Total Read</div>
+        <div className="text-lg font-semibold text-blue-600">192</div>
+      </div>
+
+      <div className="bg-white p-3 rounded-lg border border-gray-200/40">
+        <div className="text-sm text-gray-600 mb-2">Subscribers</div>
+        <div className="text-lg font-semibold text-blue-600">70</div>
+      </div>
+
+      <div className="bg-white p-3 rounded-lg border border-gray-200/40">
+        <div className="text-sm text-gray-600 mb-2">Followers</div>
+        <div className="text-lg font-semibold text-blue-600">2071</div>
+      </div>
+
+      <div className="bg-white p-3 rounded-lg border border-gray-200/40">
+        <div className="text-sm text-gray-600 mb-2">Total Purchase</div>
+        <div className="text-lg font-semibold text-blue-600">25</div>
+      </div>
+
+      <div className="bg-white p-3 rounded-lg border border-gray-200/40">
+        <div className="text-sm text-gray-600 mb-2">NFT Minted</div>
+        <div className="text-lg font-semibold text-blue-600">18</div>
+      </div>
+
+      <div className="bg-white p-3 rounded-lg border border-gray-200/40">
+        <div className="text-sm text-gray-600 mb-2">Read Completion Rate</div>
+        <div className="text-lg font-semibold text-blue-600">70%</div>
+      </div>
+
+      <div className="bg-white p-3 rounded-lg border border-gray-200/40">
+        <div className="text-sm text-gray-600 mb-2">Average Rating</div>
+        <div className="text-lg font-semibold text-blue-600">4.0</div>
+      </div>
+    </div>
+  );
+};
+
+export default AnalyticsStatsGrid;