From 4045e97a9d1b6bb7ebe4e378393048f92bbe2df1 Mon Sep 17 00:00:00 2001
From: Adithya Cherukuri <adithyacherukuri@gmail.com>
Date: Thu, 28 May 2026 13:55:23 -0400
Subject: [PATCH] feat: add customToolTip

---
 .../Financials/ExpenseBarChart.jsx            | 57 +++++++++++++++++++
 1 file changed, 57 insertions(+)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/Financials/ExpenseBarChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/Financials/ExpenseBarChart.jsx
index f1c4594a55..5f88096070 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/Financials/ExpenseBarChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/Financials/ExpenseBarChart.jsx
@@ -4,6 +4,63 @@ import { useState, useEffect } from 'react';
 const categories = ['Plumbing', 'Electrical', 'Structural', 'Mechanical'];
 const projects = ['Project A', 'Project B', 'Project C'];
 
+const CustomTooltip = ({ active, payload, label }) => {
+  if (active && payload && payload.length) {
+    const chartData = payload[0].payload;
+
+    const isOverBudget = chartData.variance > 0;
+
+    return (
+      <div
+        style={{
+          backgroundColor: 'rgba(25, 25, 25, 0.95)',
+          border: '1px solid #444',
+          color: '#f8f9fa',
+          padding: '12px',
+          fontSize: '12px',
+          borderRadius: '6px',
+          boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
+        }}
+      >
+        <p
+          style={{
+            fontWeight: 'bold',
+            margin: '0 0 8px 0',
+            borderBottom: '1px solid #444',
+            paddingBottom: '6px',
+            color: '#adb5bd',
+          }}
+        >
+          {label}
+        </p>
+
+        <p style={{ margin: '0 0 4px 0' }}>
+          Planned: <strong>${chartData.planned}</strong>
+        </p>
+
+        <p style={{ margin: '0 0 4px 0' }}>
+          Actual: <strong>${chartData.actual}</strong>
+        </p>
+
+        <p
+          style={{
+            margin: '8px 0 0 0',
+
+            color: isOverBudget ? '#ff6b6b' : '#51cf66',
+
+            fontWeight: 'bold',
+          }}
+        >
+          Variance: {chartData.variance > 0 ? '+' : ''}${chartData.variance} (
+          {chartData.variancePercent})
+        </p>
+      </div>
+    );
+  }
+
+  return null;
+};
+
 export default function ExpenseBarChart({ darkMode }) {
   const [projectId, setProjectId] = useState('');
   const [categoryFilter, setCategoryFilter] = useState('ALL');