Merge pull request #4279 from OneCommunityGlobal/fatima-fix-for-Distribution-Labor-Hours

Fatima added Dark mode to Distribution Labour Hours

Author: one-community

src/components/BMDashboard/WeeklyProjectSummary/DistributionLaborHours/DistributionLaborHours.jsx

@@ -1,17 +1,24 @@
 import React, { useState, useEffect } from 'react';
-import { PieChart, Pie, Cell, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+import { useSelector } from 'react-redux';
+import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from 'recharts';
 import styles from './DistributionLaborHours.module.css';
 
-const COLORS = ['#f9f3e3', '#2a647c', '#2e8ea3', '#ffab91', '#ffccbb', '#bbbbbbff'];
+const COLORS = ['#2a647c', '#2e8ea3', '#ffab91', '#ffccbb', '#bbbbbb', '#f9f3e3'];
 
-const CustomTooltip = ({ active, payload, total }) => {
+const CustomTooltip = ({ active, payload, total, darkMode }) => {
   if (active && payload && payload.length) {
-    const category = payload[0].name;
-    const value = payload[0].value;
+    const { name, value } = payload[0];
     const percent = ((value / total) * 100).toFixed(1);
     return (
-      <div className={styles.tooltip}>
-        <p>{category}</p>
+      <div
+        className={styles.tooltip}
+        style={{
+          backgroundColor: darkMode ? '#2E3E5A' : '#fff',
+          color: darkMode ? '#fff' : '#000',
+          border: darkMode ? '1px solid #555' : '1px solid #ccc',
+        }}
+      >
+        <p>{name}</p>
         <p>{`Hours: ${value} hrs`}</p>
         <p>{`Percentage: ${percent}%`}</p>
       </div>
@@ -21,6 +28,8 @@ const CustomTooltip = ({ active, payload, total }) => {
 };
 
 export default function DistributionLaborHours() {
+  const darkMode = useSelector(state => state.theme.darkMode);
+
   const [originalData, setOriginalData] = useState([]);
   const [filteredData, setFilteredData] = useState([]);
   const [dateRange, setDateRange] = useState({ from: '', to: '' });
@@ -56,47 +65,55 @@ export default function DistributionLaborHours() {
   const totalHours = filteredData.reduce((sum, item) => sum + item.value, 0);
 
   return (
-    <div className={styles.container}>
-      <h3 className={styles.title}>Distribution of Labor Hours</h3>
+    <div
+      className={styles.container}
+      style={{
+        backgroundColor: darkMode ? '#2E3E5A' : '#fff',
+        color: darkMode ? '#f5f5f5' : '#000',
+      }}
+    >
+      <h3 className={styles.title} style={{ color: darkMode ? '#ffffff' : '#000000' }}>
+        Distribution of Labor Hours
+      </h3>
 
+      {/* Filters */}
       <div className={styles.filters}>
-        <label>
+        <label style={{ color: darkMode ? '#ffffff' : '#000000' }}>
           From:
           <input
             type="date"
             value={dateRange.from}
             onChange={e => setDateRange({ ...dateRange, from: e.target.value })}
           />
         </label>
-        <label>
+        <label style={{ color: darkMode ? '#ffffff' : '#000000' }}>
           To:
           <input
             type="date"
             value={dateRange.to}
             onChange={e => setDateRange({ ...dateRange, to: e.target.value })}
           />
         </label>
-        <label>
+        <label style={{ color: darkMode ? '#ffffff' : '#000000' }}>
           Project:
           <select onChange={e => setProjectFilter(e.target.value)} value={projectFilter}>
             <option value="">All</option>
             <option value="Project A">Project A</option>
             <option value="Project B">Project B</option>
           </select>
         </label>
-        <label>
+        <label style={{ color: darkMode ? '#ffffff' : '#000000' }}>
           Member:
           <select onChange={e => setMemberFilter(e.target.value)} value={memberFilter}>
             <option value="">All</option>
             <option value="Member 1">Member 1</option>
             <option value="Member 2">Member 2</option>
           </select>
         </label>
-        <button className={styles.button} onClick={() => window.location.reload()}>
-          Submit
-        </button>
+        <button className={styles.button}>Submit</button>
       </div>
 
+      {/* Chart + Legend */}
       <div className={styles.chartWrapper}>
         <div className={styles.legend}>
           {filteredData.map((entry, index) => (
@@ -105,7 +122,9 @@ export default function DistributionLaborHours() {
                 className={styles.colorBox}
                 style={{ backgroundColor: COLORS[index % COLORS.length] }}
               />
-              {entry.name}: {entry.value} hrs
+              <span style={{ color: darkMode ? '#f5f5f5' : '#000' }}>
+                {entry.name}: {entry.value} hrs
+              </span>
             </div>
           ))}
         </div>
@@ -120,13 +139,14 @@ export default function DistributionLaborHours() {
                 cx="50%"
                 cy="50%"
                 outerRadius={100}
-                onClick={data => alert(`Drilldown for: ${data.name}`)}
+                labelLine={false}
+                label={({ value }) => `${((value / totalHours) * 100).toFixed(1)}%`}
               >
                 {filteredData.map((entry, index) => (
                   <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                 ))}
               </Pie>
-              <Tooltip content={<CustomTooltip total={totalHours} />} />
+              <Tooltip content={<CustomTooltip total={totalHours} darkMode={darkMode} />} />
             </PieChart>
           </ResponsiveContainer>
         </div>

src/components/BMDashboard/WeeklyProjectSummary/DistributionLaborHours/DistributionLaborHours.module.css

@@ -1,18 +1,19 @@
+
 .container {
-  background-color: white;
   border-radius: 8px;
   padding: 16px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
+  transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 .title {
   font-size: large;
-  color: black;
   font-weight: bold;
+  margin-bottom: 8px;
 }
 
 .filters {
@@ -58,24 +59,24 @@
 }
 
 .tooltip {
-  background-color: white;
-  border: 1px solid #ccc;
+  border-radius: 6px;
   padding: 8px;
   font-size: 0.85rem;
-  border-radius: 4px;
+  transition: background-color 0.2s ease, color 0.2s ease;
 }
 
 .button {
-  background-color: white;
-  border: 1px solid black;
-  border-radius: 10%;
-  padding: 10px 20px;
+  background-color: transparent;
+  color: inherit;
+  border: 1px solid currentColor;
+  border-radius: 6px;
+  padding: 8px 16px;
   cursor: pointer;
-  transition: background-color 0.3s ease;
+  transition: all 0.3s ease;
 }
 
 .button:hover {
-  background-color: #fff2f0;
+  background-color: rgba(255, 255, 255, 0.1);
 }
 
 .pieChartContainer {
@@ -85,7 +86,6 @@
   width: 100%;
 }
 
-
 @media (max-width: 768px) {
   .chartWrapper {
     flex-direction: column;