Neeraj Add Amount Label and Extend Graph Bars in Resource Usage Chart

src/components/CommunityPortal/ResourceUsage/ResourceUsage.jsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Dropdown } from 'react-bootstrap';
 import {
   BarChart,
@@ -82,6 +82,10 @@ const insightDefinitions = {
   'Highest cost venues/hr': 'Venue with the highest hourly cost during the selected period.',
 };
 
+function filterDataByDate(data, timePeriod) {
+  return data;
+}
+
 function CustomTooltip({ active, payload, darkMode }) {
   if (!active || !payload || !payload.length) return null;
 
@@ -120,10 +124,21 @@ export default function ResourceUsage() {
   const [insights, setInsights] = useState(allInsights['Last Week']);
 
   const darkMode = useSelector(state => state.theme.darkMode);
+  const badgeRefs = useRef([]);
+
+  useEffect(() => {
+    badgeRefs.current.forEach(badge => {
+      if (badge) {
+        badge.style.setProperty('color', '#000');
+      }
+    });
+  }, [insights, darkMode]);
 
   useEffect(() => {
-    setData(allData[resourceType.toLowerCase()]);
-  }, [resourceType]);
+    const resourceTypeKey = resourceType.toLowerCase();
+    const filteredData = filterDataByDate(allData[resourceTypeKey], timePeriod);
+    setData(filteredData);
+  }, [resourceType, timePeriod, allData]);
 
   useEffect(() => {
     setInsights(allInsights[insightsTimePeriod]);
@@ -172,59 +187,71 @@ export default function ResourceUsage() {
             Amount
           </div>
 
-          <ResponsiveContainer width="100%" height="100%">
-            <BarChart data={data} margin={{ top: 20, right: 30, left: 30, bottom: 80 }}>
-              <CartesianGrid
-                strokeDasharray="3 3"
-                stroke={darkMode ? '#3A506B' : '#eee'}
-                vertical={false}
-              />
+          {data && data.length > 0 ? (
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart data={data} margin={{ top: 20, right: 30, left: 30, bottom: 80 }}>
+                <CartesianGrid
+                  strokeDasharray="3 3"
+                  stroke={darkMode ? '#3A506B' : '#eee'}
+                  vertical={false}
+                />
 
-              <XAxis
-                dataKey="name"
-                axisLine={false}
-                tickLine={false}
-                tick={{
-                  fill: darkMode ? '#ffffff' : '#666',
-                  fontWeight: 700,
-                  fontSize: 12,
-                }}
-              />
+                <XAxis
+                  dataKey="name"
+                  axisLine={false}
+                  tickLine={false}
+                  tick={{
+                    fill: darkMode ? '#ffffff' : '#666',
+                    fontWeight: 700,
+                    fontSize: 12,
+                  }}
+                />
 
-              <YAxis
-                axisLine={false}
-                tickLine={false}
-                tick={{
-                  fill: darkMode ? '#ffffff' : '#666',
-                  fontWeight: 700,
-                  fontSize: 12,
-                }}
-              />
+                <YAxis
+                  axisLine={false}
+                  tickLine={false}
+                  tick={{
+                    fill: darkMode ? '#ffffff' : '#666',
+                    fontWeight: 700,
+                    fontSize: 12,
+                  }}
+                />
 
-              <Tooltip content={<CustomTooltip darkMode={darkMode} />} />
+                <Tooltip content={<CustomTooltip darkMode={darkMode} />} />
 
-              <Legend
-                align="right"
-                verticalAlign="top"
-                iconType="circle"
-                iconSize={8}
-                wrapperStyle={{
-                  color: darkMode ? '#ffffff' : '#666',
-                }}
-              />
+                <Legend
+                  align="right"
+                  verticalAlign="top"
+                  iconType="circle"
+                  iconSize={8}
+                  wrapperStyle={{
+                    color: darkMode ? '#ffffff' : '#666',
+                  }}
+                />
 
-              <Bar dataKey="returned" stackId="a" fill="#22c55e" radius={[4, 4, 0, 0]} />
-              <Bar dataKey="loaned" stackId="a" fill="#fca5a5" radius={[4, 4, 0, 0]} />
-            </BarChart>
-          </ResponsiveContainer>
+                <Bar dataKey="returned" stackId="a" fill="#22c55e" radius={[4, 4, 0, 0]} />
+                <Bar dataKey="loaned" stackId="a" fill="#fca5a5" radius={[4, 4, 0, 0]} />
+              </BarChart>
+            </ResponsiveContainer>
+          ) : (
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                height: '100%',
+              }}
+            >
+              <p>No data available for the selected time period and resource type.</p>
+            </div>
+          )}
         </div>
       </div>
 
       {/* RIGHT SECTION */}
       <div className={`${styles.insightsSection} ${darkMode ? styles.darkInsightsSection : ''}`}>
         <div className={styles.insightsHeader}>
           <h2>Insights</h2>
-
           <Dropdown>
             <Dropdown.Toggle className={styles.customDropdown}>
               {insightsTimePeriod}
@@ -249,25 +276,28 @@ export default function ResourceUsage() {
               key={idx}
               className={`${styles.insightCard} ${darkMode ? 'bg-yinmn-blue text-light' : ''}`}
             >
-              {/* 🔹 ADD THIS LINE RIGHT HERE */}
-              <div className={styles.insightTooltip}>{insightDefinitions[insight.title]}</div>
+              <div className={styles.insightContent}>
+                <div
+                  className={styles.insightTitle}
+                  title={insightDefinitions[insight.title]}
+                  style={{ color: darkMode ? '#e5e7eb' : '#6b7280', fontWeight: 600 }}
+                >
+                  {insight.title}
+                </div>
 
-              <div
-                className={styles.insightTitle}
-                title={insightDefinitions[insight.title]}
-                style={{ color: darkMode ? '#342d2dff' : '#6b7280', fontWeight: 600 }}
-              >
-                {insight.title}
-              </div>
+                <div
+                  ref={el => (badgeRefs.current[idx] = el)}
+                  className={styles.insightBadge}
+                  style={{ backgroundColor: insight.color }}
+                >
+                  {insight.value}
+                </div>
 
-              <div
-                className={`${styles.insightBadge} ${darkMode ? 'text-dark' : ''}`}
-                style={{ backgroundColor: insight.color }}
-              >
-                {insight.value}
+                <div className={styles.insightMeta}>Based on returned vs loaned comparison</div>
               </div>
 
-              <div className={styles.insightMeta}>Based on returned vs loaned comparison</div>
+              {/* Tooltip */}
+              <div className={styles.insightTooltip}>{insightDefinitions[insight.title]}</div>
             </div>
           ))}
         </div>

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

@@ -1,7 +1,6 @@
 .resourceUsageContainer {
   display: flex;
   min-height: 100vh;
-  background-color: #fff;
 }
 
 .darkContainer {
@@ -13,6 +12,10 @@
   padding: 1.5rem;
 }
 
+.darkChartSection {
+  background: #2b3e59;
+}
+
 .headerSection {
   margin-bottom: 2rem;
 }
@@ -27,6 +30,22 @@
   padding: 0.5rem 1rem !important;
   border-radius: 0.375rem !important;
   font-size: 0.875rem !important;
+
+  /* Your enhancements */
+  box-shadow: none !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 0.5rem !important;
+}
+
+.customDropdown:hover,
+.customDropdown:focus {
+  background-color: #b7b7b8 !important;
+  border-color: #e5e7eb !important;
+}
+
+.customDropdown::after {
+  margin-left: 0.5rem !important;
 }
 
 .chartContainer {
@@ -51,10 +70,6 @@
   border-left: 1px solid #e5e7eb;
 }
 
-.darkInsightsSection {
-  background: #1b2a41;
-}
-
 .insightCard {
   position: relative;
   padding: 1rem;
@@ -83,27 +98,22 @@
 /* Tooltip */
 .insightTooltip {
   position: absolute;
-  bottom: 3.25rem;
+  bottom: 100%;
   left: 50%;
-  transform: translateX(-50%) translateY(6px);
-  max-width: 140px;
-  width: max-content;
-  padding: 0.6rem 0.75rem;
-  background-color: #374151;
-  color: #fff;
-  font-size: 0.75rem;
-  line-height: 1.35;
-  border-radius: 0.5rem;
-  white-space: normal;
-  text-align: left;
-  box-shadow: 0 8px 20px rgb(0 0 0 / 18%);
+  transform: translateX(-50%);
+  background: #374151;
+  color: white;
+  padding: 8px 10px;
+  border-radius: 6px;
+  font-size: 12px;
   opacity: 0;
+  visibility: hidden;
+  transition: all 0.2s ease;
   pointer-events: none;
-  transition: opacity 0.15s ease, transform 0.15s ease;
-  z-index: 5;
+  z-index: 10;
 }
 
-/* 🔥 FIX: Apply dark styles INSIDE insights section */
+/* FIX: Apply dark styles INSIDE insights section */
 .darkInsightsSection .insightCard {
   background-color: #1e293b;
   border: 1px solid #334155;
@@ -134,6 +144,7 @@
   font-weight: 600;
   margin: 0;
   color: #111827;
+  border-left: 1px solid #e5e7eb;
 }
 
 .darkInsightsSection .insightsHeader h2 {
@@ -147,6 +158,7 @@
 }
 
 /* BADGE */
+
 .insightBadge {
   padding: 0.25rem 0.75rem;
   border-radius: 1rem;
@@ -155,11 +167,17 @@
   color: #111827;
 }
 
-
 .insightCard .insightBadge {
   color: #111827 !important;
 }
 
+/* Tooltip */
+.customTooltip {
+  padding: 0.75rem;
+  border-radius: 0.375rem;
+  border: 1px solid #e5e7eb;
+}
+
 .insightCard:hover .insightTooltip {
   opacity: 1;
   transform: translateX(-50%) translateY(0);
@@ -176,6 +194,7 @@
   line-height: 1.3;
 }
 
+/* Tooltip styles */
 .tooltipTitle {
   font-weight: 600;
   font-size: 0.8rem;
@@ -201,36 +220,35 @@
   font-weight: 600;
 }
 
-/* ---------------- DARK MODE DROPDOWNS ---------------- */
-
+/* DARK MODE DROPDOWN */
 .dark-mode .customDropdown,
 .dark-mode .dropdown-toggle.customDropdown {
-  background-color: #1c2541 !important;
+  background-color: #1C2541 !important;
   color: #fff !important;
-  border-color: #3a506b !important;
+  border-color: #3A506B !important;
 }
 
 .dark-mode .dropdown-toggle.customDropdown.show,
 .dark-mode .show > .customDropdown.dropdown-toggle {
-  background-color: #243b5a !important;
+  background-color: #243B5A !important;
 }
 
 .dark-mode .dropdown-menu {
-  background-color: #1c2541 !important;
-  border-color: #3a506b !important;
+  background-color: #1C2541 !important;
+  border-color: #3A506B !important;
 }
 
 .dark-mode .dropdown-item {
   color: #fff !important;
 }
 
 .dark-mode .dropdown-item:hover {
-  background-color: #3a506b !important;
+  background-color: #3A506B !important;
 }
 
 /* Chart ticks */
 .recharts-cartesian-axis-tick-value {
   font-size: 12px;
   font-weight: 700;
   fill: #666;
-}
+}

src/components/CommunityPortal/ResourceUsage/__tests__/ResourceUsage.test.jsx

@@ -39,6 +39,7 @@ describe('ResourceUsage Component', () => {
     // Find ALL "Venue" buttons
     const venueButtons = screen.getAllByRole('button', { name: 'Venue' });
 
+    // The LAST one is the dropdown menu option
     const menuOption = venueButtons[venueButtons.length - 1];
 
     fireEvent.click(menuOption);