Merge pull request #4525 from OneCommunityGlobal/Akshay-add-darkMode-resourceUsage

Akshay - Add - Dark Mode resourceUsage component

Author: one-community

src/components/CommunityPortal/ResourceUsage/ResourceUsage.jsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
+import { useSelector } from 'react-redux';
 import { Dropdown } from 'react-bootstrap';
 import {
   BarChart,
@@ -69,10 +70,10 @@ const allInsights = {
   ],
 };
 
-function CustomTooltip({ active, payload }) {
+function CustomTooltip({ active, payload, darkMode }) {
   if (active && payload && payload.length) {
     return (
-      <div className={styles.customTooltip}>
+      <div className={`${styles.customTooltip} ${darkMode ? styles.darkTooltip : ''}`}>
         <p className="mb-1">{`${payload[0].payload.name}`}</p>
         <p className="mb-1" style={{ color: '#22c55e' }}>{`Returned: ${payload[0].value}`}</p>
         <p className="mb-0" style={{ color: '#fca5a5' }}>{`Loaned: ${payload[1].value}`}</p>
@@ -88,6 +89,8 @@ export default function ResourceUsage() {
   const [insightsTimePeriod, setInsightsTimePeriod] = useState('Last Week');
   const [data, setData] = useState(allData.venue);
   const [insights, setInsights] = useState(allInsights['Last Week']);
+  const darkMode = useSelector(state => state.theme.darkMode);
+  const badgeRefs = useRef([]);
 
   const filterDataByDate = (datas, period) => {
     // Create different datasets for different time periods to demonstrate filtering
@@ -108,6 +111,14 @@ export default function ResourceUsage() {
     }
   };
 
+  useEffect(() => {
+    badgeRefs.current.forEach(badge => {
+      if (badge) {
+        badge.style.setProperty('color', '#000', 'important');
+      }
+    });
+  }, [insights]);
+
   useEffect(() => {
     const resourceTypeKey = resourceType.toLowerCase();
     const filteredData = filterDataByDate(allData[resourceTypeKey], timePeriod);
@@ -119,9 +130,9 @@ export default function ResourceUsage() {
   }, [insightsTimePeriod]);
 
   return (
-    <div className={styles.resourceUsageContainer}>
+    <div className={`${styles.resourceUsageContainer} ${darkMode ? styles.darkContainer : ''}`}>
       {/* Left Section - Chart */}
-      <div className={styles.chartSection}>
+      <div className={`${styles.chartSection} ${darkMode ? styles.darkChartSection : ''}`}>
         <div className={styles.headerSection}>
           <h1>Resources usage</h1>
           <div className={styles.filters}>
@@ -157,10 +168,14 @@ export default function ResourceUsage() {
                   dataKey="name"
                   axisLine={false}
                   tickLine={false}
-                  tick={{ fill: '#666', fontSize: 12 }}
+                  tick={{ fill: darkMode ? '#eee' : '#666', fontSize: 12 }}
                 />
-                <YAxis axisLine={false} tickLine={false} tick={{ fill: '#666', fontSize: 12 }} />
-                <Tooltip content={<CustomTooltip />} />
+                <YAxis
+                  axisLine={false}
+                  tickLine={false}
+                  tick={{ fill: darkMode ? '#eee' : '#666', fontSize: 12 }}
+                />
+                <Tooltip content={<CustomTooltip darkMode={darkMode} />} />
                 <Legend
                   align="right"
                   verticalAlign="top"
@@ -200,7 +215,7 @@ export default function ResourceUsage() {
       </div>
 
       {/* Right Section - Insights */}
-      <div className={styles.insightsSection}>
+      <div className={`${styles.insightsSection} ${darkMode ? styles.darkInsightsSection : ''}`}>
         <div className={styles.insightsHeader}>
           <h2>Insights</h2>
           <Dropdown>
@@ -222,9 +237,16 @@ export default function ResourceUsage() {
         </div>
         <div className={styles.insightsGrid}>
           {insights.map((insight, index) => (
-            <div key={index} className={styles.insightCard}>
+            <div
+              key={index}
+              className={`${styles.insightCard} ${darkMode ? styles.darkInsightCard : ''}`}
+            >
               <div className={styles.insightTitle}>{insight.title}</div>
-              <div className={styles.insightBadge} style={{ backgroundColor: insight.color }}>
+              <div
+                ref={el => (badgeRefs.current[index] = el)}
+                className={styles.insightBadge}
+                style={{ backgroundColor: insight.color }}
+              >
                 {insight.value}
               </div>
             </div>

src/components/CommunityPortal/ResourceUsage/ResourceUsage.module.css

@@ -4,12 +4,20 @@
   background-color: #fff;
 }
 
+.darkContainer {
+  background: #1B2A41;
+}
+
 .chartSection {
   flex: 1;
   padding: 1.5rem;
   background: #fff;
 }
 
+.darkChartSection {
+  background: #2b3e59;
+}
+
 .headerSection {
   margin-bottom: 2rem;
 }
@@ -42,7 +50,7 @@
 
 .customDropdown:hover,
 .customDropdown:focus {
-  background-color: #f9fafb !important;
+  background-color: #b7b7b8 !important;
   border-color: #e5e7eb !important;
 }
 
@@ -62,6 +70,10 @@
   padding: 1.5rem;
 }
 
+.darkInsightsSection {
+  background: #1B2A41;
+}
+
 .insightsHeader {
   display: flex;
   justify-content: space-between;
@@ -89,6 +101,10 @@
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
+.darkInsightCard {
+  background: #2b3e59;
+}
+
 .insightTitle {
   color: #6b7280;
   font-size: 0.875rem;
@@ -111,6 +127,10 @@
   border: 1px solid #e5e7eb;
 }
 
+.darkTooltip{
+    background: #1B2A41;
+}
+
 /* Responsive Design */
 @media (max-width: 1200px) {
   .resourceUsageContainer {