From d781e2a7911325bf088df3b631f6ee4528f79237 Mon Sep 17 00:00:00 2001 From: Biswakalyan Bhuyan Date: Thu, 1 Aug 2024 20:11:08 +0530 Subject: css added --- panel/src/pages/Dashboard.css | 63 ++++++++++++++++++++++++++++++++ panel/src/pages/Dashboard.jsx | 61 ++++++++++++++++++++++--------- panel/src/pages/ManageAds.css | 84 +++++++++++++++++++++++++++++++++++++++++++ panel/src/pages/ManageAds.jsx | 1 + panel/src/pages/Roles.css | 64 +++++++++++++++++++++++++++++++++ 5 files changed, 256 insertions(+), 17 deletions(-) create mode 100644 panel/src/pages/Dashboard.css create mode 100644 panel/src/pages/ManageAds.css create mode 100644 panel/src/pages/Roles.css (limited to 'panel') diff --git a/panel/src/pages/Dashboard.css b/panel/src/pages/Dashboard.css new file mode 100644 index 0000000..08a15eb --- /dev/null +++ b/panel/src/pages/Dashboard.css @@ -0,0 +1,63 @@ +.dashboard { + display: flex; + flex-direction: column; + align-items: center; + background-color: #f4f7fc; + min-height: 100vh; +} + +.dashboard-container { + width: 90%; + max-width: 1200px; + margin-top: 20px; + padding: 20px; + background-color: white; + border-radius: 10px; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); +} + +.dashboard-header { + text-align: center; + margin-bottom: 30px; +} + +.dashboard-header h4 { + font-size: 28px; + color: #333; +} + +.dashboard-stats { + display: flex; + justify-content: space-between; + margin-bottom: 30px; +} + +.stat-card { + flex: 1; + padding: 20px; + margin: 0 10px; + background-color: #f9fafc; + border-radius: 10px; + text-align: center; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +.stat-card h6 { + font-size: 16px; + color: #666; + margin-bottom: 10px; +} + +.stat-card p { + font-size: 24px; + color: #333; +} + +.chart-container { + margin-top: 30px; +} + +.chart-container canvas { + width: 100% !important; + height: 400px !important; +} diff --git a/panel/src/pages/Dashboard.jsx b/panel/src/pages/Dashboard.jsx index d16204d..344371d 100644 --- a/panel/src/pages/Dashboard.jsx +++ b/panel/src/pages/Dashboard.jsx @@ -1,21 +1,37 @@ import React, { useEffect, useRef } from 'react'; -import { Chart, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js'; -import { Bar } from 'react-chartjs-2'; +import { Chart, CategoryScale, LinearScale, LineElement, PointElement, LineController, Title, Tooltip, Legend } from 'chart.js'; +import { Line } from 'react-chartjs-2'; import Navbar from '../components/Navbar'; +import './Dashboard.css'; -Chart.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend); +Chart.register(CategoryScale, LinearScale, LineElement, PointElement, LineController, Title, Tooltip, Legend); const Dashboard = () => { - const userStats = { totalUsers: 100, totalAds: 50, totalRevenue: 5000 }; + const userStats = { + totalUsers: [50, 70, 60, 80, 100, 90, 110], + totalAds: 50, + totalRevenue: [40, 50, 30, 70, 60, 80, 75] + }; const chartData = { - labels: ['Users', 'Revenue'], + labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], datasets: [ { - label: 'Statistics', - data: [userStats.totalUsers, userStats.totalRevenue], - backgroundColor: ['rgba(75,192,192,0.6)', 'rgba(153,102,255,0.6)'], + label: 'Total Users', + data: userStats.totalUsers, + borderColor: 'rgba(75,192,192,1)', + backgroundColor: 'rgba(75,192,192,0.2)', + fill: true, + tension: 0.4, }, + { + label: 'Total Revenue', + data: userStats.totalRevenue, + borderColor: 'rgba(153,102,255,1)', + backgroundColor: 'rgba(153,102,255,0.2)', + fill: true, + tension: 0.4, + } ], }; @@ -32,17 +48,28 @@ const Dashboard = () => { }, []); return ( -
+
-
-

Dashboard

-
-
Total Users: {userStats.totalUsers}
-
Total Ads: {userStats.totalAds}
-
Total Revenue: {userStats.totalRevenue}
+
+
+

Dashboard

+
+
+
+
Total Users
+

{userStats.totalUsers[userStats.totalUsers.length - 1]}

+
+
+
Total Ads
+

{userStats.totalAds}

+
+
+
Total Revenue
+

${userStats.totalRevenue[userStats.totalRevenue.length - 1]}

+
-
- +
+
diff --git a/panel/src/pages/ManageAds.css b/panel/src/pages/ManageAds.css new file mode 100644 index 0000000..c9f154e --- /dev/null +++ b/panel/src/pages/ManageAds.css @@ -0,0 +1,84 @@ +.manage-ads { + display: flex; + flex-direction: column; + align-items: center; + background-color: #f4f7fc; + min-height: 100vh; +} + +.manage-ads-container { + width: 90%; + max-width: 1200px; + margin-top: 20px; + padding: 20px; + background-color: white; + border-radius: 10px; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); +} + +.manage-ads-header { + text-align: center; + margin-bottom: 30px; +} + +.manage-ads-header h4 { + font-size: 28px; + color: #333; +} + +.ad-form { + display: flex; + flex-direction: column; + margin-bottom: 30px; +} + +.ad-form .form-control { + margin-bottom: 15px; + padding: 10px; + font-size: 16px; + border: 1px solid #ccc; + border-radius: 5px; +} + +.ad-form button { + align-self: flex-start; + padding: 10px 20px; + background-color: #007bff; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +.ad-list { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.ad-card { + flex: 1; + padding: 20px; + margin: 10px; + background-color: #f9fafc; + border-radius: 10px; + text-align: center; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +.ad-card img { + max-width: 100%; + border-radius: 5px; + margin-bottom: 15px; +} + +.ad-card h5 { + font-size: 20px; + color: #333; + margin-bottom: 10px; +} + +.ad-card p { + font-size: 16px; + color: #666; +} diff --git a/panel/src/pages/ManageAds.jsx b/panel/src/pages/ManageAds.jsx index 70142d2..8999db3 100644 --- a/panel/src/pages/ManageAds.jsx +++ b/panel/src/pages/ManageAds.jsx @@ -1,6 +1,7 @@ import React, { useState, useEffect } from 'react'; import { db } from '../firebase'; import { collection, addDoc, getDocs } from 'firebase/firestore'; +import './ManageAds.css'; import Navbar from '../components/Navbar'; const ManageAds = () => { diff --git a/panel/src/pages/Roles.css b/panel/src/pages/Roles.css new file mode 100644 index 0000000..5304391 --- /dev/null +++ b/panel/src/pages/Roles.css @@ -0,0 +1,64 @@ +.manage-roles { + display: flex; + flex-direction: column; + align-items: center; + background-color: #f4f7fc; + min-height: 100vh; +} + +.manage-roles-container { + width: 90%; + max-width: 1200px; + margin-top: 20px; + padding: 20px; + background-color: white; + border-radius: 10px; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); +} + +.manage-roles-header { + text-align: center; + margin-bottom: 30px; +} + +.manage-roles-header h4 { + font-size: 28px; + color: #333; +} + +.user-list { + display: flex; + flex-direction: column; +} + +.user-card { + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px; + margin-bottom: 10px; + background-color: #f9fafc; + border-radius: 10px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +.user-card p { + font-size: 16px; + color: #666; + margin: 0; +} + +.user-card button { + padding: 5px 10px; + margin-left: 10px; + font-size: 14px; + background-color: #007bff; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +.user-card button.btn-secondary { + background-color: #6c757d; +} -- cgit v1.2.3-59-g8ed1b