1 files changed, 52 insertions, 0 deletions
diff --git a/panel/src/pages/Dashboard.jsx b/panel/src/pages/Dashboard.jsx
new file mode 100644
index 0000000..d16204d
--- /dev/null
+++ b/panel/src/pages/Dashboard.jsx
@@ -0,0 +1,52 @@
+import React, { useEffect, useRef } from 'react';
+import { Chart, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js';
+import { Bar } from 'react-chartjs-2';
+import Navbar from '../components/Navbar';
+
+Chart.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
+
+const Dashboard = () => {
+  const userStats = { totalUsers: 100, totalAds: 50, totalRevenue: 5000 };
+
+  const chartData = {
+    labels: ['Users', 'Revenue'],
+    datasets: [
+      {
+        label: 'Statistics',
+        data: [userStats.totalUsers, userStats.totalRevenue],
+        backgroundColor: ['rgba(75,192,192,0.6)', 'rgba(153,102,255,0.6)'],
+      },
+    ],
+  };
+
+  const chartRef = useRef(null);
+
+  useEffect(() => {
+    const chartInstance = chartRef.current.chartInstance;
+
+    return () => {
+      if (chartInstance) {
+        chartInstance.destroy();
+      }
+    };
+  }, []);
+
+  return (
+    <div>
+      <Navbar />
+      <div className="container mt-5">
+        <h4 className="mb-4">Dashboard</h4>
+        <div className="mb-4">
+          <h6>Total Users: {userStats.totalUsers}</h6>
+          <h6>Total Ads: {userStats.totalAds}</h6>
+          <h6>Total Revenue: {userStats.totalRevenue}</h6>
+        </div>
+        <div>
+          <Bar ref={chartRef} data={chartData} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;