- // Custom tooltip to show percentage
- const CustomTooltip = ({ active, payload, label }) => {
- if (active && payload && payload.length) {
- return (
-
-
-
-
Supplier Performance by On-Time Delivery %
-
-
-
Dates
-
setSelectedDateRange(e.target.value)}
- style={styles.select}
- className="supplier-performance-select"
- aria-label="Date Range"
+ {/* Chart Content */}
+
+ {loading &&
Loading...
}
+
+ {error &&
{error}
}
+
+ {!loading && !error && supplierData.length === 0 && (
+
+ No supplier performance data available.
+
+ )}
+
+ {!loading && !error && supplierData.length > 0 && (
+
+
+ {/* Added grid lines: Dotted (3 3) and custom theme color */}
+
+
+
- {getDateRangeOptions().map(option => (
-
- ))}
-
-
-
- Project
- setSelectedProject(e.target.value)}
- style={styles.select}
- className="supplier-performance-select"
- aria-label="Project"
+
+
+
+
-
- {projects.map(project => (
-
- ))}
-
-
-
-
+
+
-
- {loading &&
Loading...
}
- {error &&
{error}
}
+
}
+ cursor={{ fill: darkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)' }}
+ />
- {!loading &&
- !error &&
- (supplierData && supplierData.length > 0 ? (
-
-
-
-
-
-
-
-
-
- } />
-
- `${value}`}
- />
-
-
-
- ) : (
-
No supplier performance data available.
- ))}
-
+
+ `${value}%`}
+ />
+
+
+
+ )}
);
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css
index b4fdfb59fa..2607011f93 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css
@@ -3,6 +3,7 @@
min-height: 100vh;
background-color: var(--bg-color);
color: var(--text-color);
+ transition: background-color 0.3s ease, color 0.3s ease;
}
.weeklyProjectSummaryContainer html,
@@ -22,6 +23,11 @@
.weeklyProjectSummaryHeaderWrapper {
background-color: var(--bg-color) !important;
+ transition: background-color 0.3s ease;
+}
+
+.weeklyProjectSummaryContainer * {
+ transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
/* ---------------- HEADER ---------------- */
@@ -29,9 +35,9 @@
display: flex;
justify-content: center;
width: 100%;
+ background-color: var(--bg-color);
}
-/* Header Container */
.weeklySummaryHeaderContainer {
display: flex;
flex-wrap: wrap;
@@ -42,33 +48,58 @@
background: var(--section-bg);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 8px;
+ transition: all 0.3s ease;
+ min-height: 80px;
}
-/* Title */
.weeklySummaryHeaderTitle {
padding-top: 5px;
color: var(--text-color);
font-size: x-large;
text-align: center;
flex-wrap: wrap;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.weeklySummaryHeaderSubtitle {
+ font-size: 14px;
+ opacity: 0.7;
+ font-weight: normal;
}
-/* Header Controls */
.weeklySummaryHeaderControls {
display: flex;
gap: 10px;
align-items: center;
+ flex-wrap: wrap;
}
-/* Dropdown Styling */
+/* Fix for select dropdown arrows */
.weeklySummaryHeaderControls select {
- padding: 8px 12px;
+ padding: 8px 32px 8px 12px;
border: 1px solid var(--border-color, #ccc);
border-radius: 6px;
min-width: 200px;
font-size: 14px;
background: var(--section-bg);
color: var(--text-color);
+ transition: all 0.3s ease;
+ appearance: none;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ background-image: url("data:image/svg+xml;utf8,
");
+ background-repeat: no-repeat;
+ background-position: right 8px center;
+ background-size: 16px;
+}
+
+.darkMode .weeklySummaryHeaderControls select {
+ background-image: url("data:image/svg+xml;utf8,
");
+ background-color: var(--card-bg) !important;
+ color: var(--text-color) !important;
+ border-color: var(--card-shadow) !important;
}
.weeklySummaryHeaderControls select:focus {
@@ -76,12 +107,16 @@
border-color: var(--focus-border-color, #3b82f6);
}
-/* Dropdown Hover */
.weeklySummaryHeaderControls select:hover {
background-color: var(--section-title-hover) !important;
}
-/* Share Button */
+.darkMode select option {
+ background-color: var(--card-bg);
+ color: var(--text-color);
+}
+
+/* Share PDF Button - Fixed */
.weeklySummaryShareBtn {
background-color: var(--button-bg) !important;
color: white;
@@ -89,12 +124,32 @@
white-space: nowrap;
border-radius: 8px !important;
transition: background 0.2s ease-in-out;
+ padding: 8px 16px;
+ border: none;
+ cursor: pointer;
+ font-weight: 500;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 100px;
+ font-size: 14px;
+ line-height: 1.5;
}
.weeklySummaryShareBtn:hover {
background-color: var(--button-hover) !important;
}
+.weeklySummaryShareBtn:focus {
+ outline: none;
+ box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
+}
+
+.weeklySummaryShareBtn:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+}
+
/* ---------------- DASHBOARD ---------------- */
.weeklyProjectSummaryDashboardGrid {
@@ -103,7 +158,6 @@
gap: 15px;
}
-/* .weeklyProjectSummaryDashboardSection options */
.full {
grid-column: span 4;
}
@@ -121,20 +175,64 @@
}
/* ---------------- CARDS ---------------- */
-
.weeklyProjectSummaryCard {
padding: 10px;
border-radius: 6px;
text-align: center;
box-shadow: 0 2px 5px var(--card-shadow);
+ transition: all 0.3s ease;
+ background: var(--card-bg);
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
}
-
.darkMode .weeklyProjectSummaryCard {
background: var(--card-bg);
box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1);
}
+.weeklyProjectSummaryCard :global(.container) {
+ background: #ffffff !important;
+ width: 100% !important;
+ height: 100% !important;
+ padding: 0 !important;
+ border: none !important;
+ box-shadow: none !important;
+}
+
+.darkMode .weeklyProjectSummaryCard :global(.container) {
+ background: #1e293b !important;
+}
+
+.weeklyProjectSummaryCard :global(.recharts-wrapper) {
+ width: 100% !important;
+ height: 100% !important;
+}
+
+.weeklyProjectSummaryCard :global(.recharts-surface) {
+ overflow: visible !important;
+}
+
+.weeklyProjectSummaryCard :global(.chartContainer) {
+ flex: 1;
+ min-height: 280px;
+ position: relative;
+}
+
+.weeklyProjectSummaryCard :global(.recharts-bar-rectangle) {
+ shape-rendering: geometricPrecision !important;
+}
+
+.weeklyProjectSummaryCard :global(.recharts-cartesian-axis-tick-value) {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
+}
+
+.weeklyProjectSummaryCard :global(.recharts-cartesian-grid-horizontal line) {
+ stroke-dasharray: 3 3 !important;
+}
+
.financialSmall {
min-height: 100px;
max-height: 120px;
@@ -142,7 +240,6 @@
grid-column: span 1;
}
-
.weekly-project-summary-card.financial-big {
grid-column: span 4;
min-height: 600px;
@@ -160,7 +257,6 @@
margin: 0;
font-weight: normal;
font-size: 24px;
-
}
.fullCard {
@@ -182,7 +278,8 @@
.normalCard {
width: 100%;
- min-height: 250px;
+ min-height: 300px;
+ padding: 15px;
}
.mapCard {
@@ -193,11 +290,28 @@
grid-column: span 4;
}
+/* ---------------- DASHBOARD SECTIONS ---------------- */
.weeklyProjectSummaryDashboardSection {
background: var(--section-bg);
border-radius: 8px;
padding: 10px;
box-shadow: 0 2px 4px var(--card-shadow);
+ transition: all 0.3s ease;
+}
+
+/* Fix for double arrows - ensure no pseudo-elements add extra arrows */
+.weeklyProjectSummaryDashboardCategoryTitle::before,
+.weeklyProjectSummaryDashboardCategoryTitle::after {
+ display: none !important;
+ content: none !important;
+}
+
+/* Ensure the button only shows our arrow span */
+.weeklyProjectSummaryDashboardCategoryTitle span {
+ display: inline-block;
+ margin-left: 8px;
+ font-size: 16px;
+ font-weight: bold;
}
.weeklyProjectSummaryDashboardCategoryTitle {
@@ -210,6 +324,10 @@
justify-content: space-between;
align-items: center;
color: var(--text-color);
+ border: none;
+ width: 100%;
+ transition: all 0.3s ease;
+ font-weight: 600;
}
.weeklyProjectSummaryDashboardCategoryTitle:hover {
@@ -217,17 +335,18 @@
}
.weeklyProjectSummaryDashboardCategoryContent {
- padding: 15px;
- display: grid;
- /* grid-template-columns: repeat(4, 1fr); */
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
- gap: 20px;
+ padding: 20px;
+ width: 100%;
border-top: 1px solid var(--card-shadow);
animation: fadeIn 0.3s ease-in-out;
background: var(--section-bg);
+ transition: all 0.3s ease;
+}
+
+.weeklyProjectSummaryDashboardCategoryContent > * {
+ width: 100%;
}
-/* Adjust grid columns based on section size */
.weeklyProjectSummaryDashboardSection.half .weeklyProjectSummaryDashboardCategoryContent {
grid-template-columns: repeat(2, 1fr);
}
@@ -236,31 +355,95 @@
grid-template-columns: 1fr;
}
-/* ---------------- DARK MODE VARIABLES ---------------- */
+/* ---------------- LESSONS LEARNED SECTION ---------------- */
+.lessonsLearnedGrid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 24px;
+ width: 100%;
+ align-items: stretch;
+ min-height: 600px;
+}
+
+.lessonsCard {
+ min-height: 600px;
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ border-radius: 12px;
+ box-shadow: 0 4px 6px var(--card-shadow);
+ transition: all 0.3s ease;
+}
+
+/* ---------------- TOOLS TRACKING LAYOUT ---------------- */
+.toolsTrackingLayout {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 20px;
+ width: 100%;
+}
+
+.toolsDonutWrap {
+ grid-column: span 1;
+ min-height: 300px;
+}
+
+/* ---------------- FINANCIALS GRID ---------------- */
+.financialsGrid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 15px;
+ width: 100%;
+}
+
+.financialsGrid .financialBig {
+ grid-column: span 4;
+ min-height: 400px;
+}
+
+/* ---------------- LABOR TIME GRID ---------------- */
+.laborTimeGrid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 20px;
+ width: 100%;
+}
+
+/* ---------------- FINANCIALS TRACKING GRID ---------------- */
+.financialsTrackingGrid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 15px;
+ width: 100%;
+}
+
+/* ---------------- LIGHT MODE VARIABLES ---------------- */
:root {
--bg-color: #ffffff;
--text-color: #000000;
- --card-bg: #fafafa;
+ --text-secondary: #666666;
+ --card-bg: #ffffff;
--card-shadow: rgba(0, 0, 0, 0.1);
- --section-bg: white;
- --section-title-bg: white;
- --section-title-hover: #e0e0e0;
+ --section-bg: #ffffff;
+ --section-title-bg: #f8fafc;
+ --section-title-hover: #f1f5f9;
--button-bg: black;
--button-hover: #333;
-
- --pos-color: #15803d; /* darker green for light bg */
- --neg-color: #b91c1c; /* darker red for light bg */
+ --border-color: #e5e7eb;
+ --pos-color: #15803d;
+ --neg-color: #b91c1c;
--neutral-change: rgba(0, 0, 0, 0.65);
-
--card-elev: rgba(0, 0, 0, 0.15);
--card-elev-hover: rgba(0, 0, 0, 0.18);
- --card-border: rgba(0, 0, 0, 0.1);
}
-/* ---------------- DARK MODE STYLES ---------------- */
+/* ---------------- DARK MODE VARIABLES ---------------- */
.darkMode {
--bg-color: #1b2a41;
--text-color: #ffffff;
+ --text-secondary: #94a3b8;
--card-bg: #2b3e59;
--card-shadow: rgba(255, 255, 255, 0.1);
--section-bg: #253342;
@@ -270,14 +453,11 @@
--button-hover: #f5b13a;
--border-color: #4a5a77;
--focus-border-color: #e8a71c;
-
- --pos-color: #22c55e; /* bright green for dark bg */
- --neg-color: #ef4444; /* bright red for dark bg */
+ --pos-color: #22c55e;
+ --neg-color: #ef4444;
--neutral-change: rgba(255, 255, 255, 0.75);
-
--card-elev: rgba(0, 0, 0, 0.45);
--card-elev-hover: rgba(0, 0, 0, 0.6);
- --card-border: rgba(255, 255, 255, 0.18);
}
.darkMode .weeklyProjectSummaryDashboardCategoryTitle {
@@ -299,17 +479,35 @@
color: var(--text-color);
}
-/* First, set a max-height and make it scrollable */
+.darkMode .weeklySummaryShareBtn {
+ background-color: var(--button-bg) !important;
+}
+
+.darkMode .weeklySummaryShareBtn:hover {
+ background-color: var(--button-hover) !important;
+}
+
+.darkMode .statusCard {
+ background: var(--card-bg) !important;
+ color: var(--text-color) !important;
+ border-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+.darkMode .weeklyCardTitle,
+.darkMode .weeklyStatusValue,
+.darkMode .weekly-status-change {
+ color: var(--text-color) !important;
+}
+
+/* Tooltip styles */
.quantityOfMaterialsUsedChartTooltip {
- max-height: 80vh !important; /* Limit to 80% of viewport height */
- overflow-y: auto !important; /* Enable vertical scrolling */
- padding-right: 15px !important; /* Add some padding for the scrollbar */
- /* Support for Firefox */
+ max-height: 80vh !important;
+ overflow-y: auto !important;
+ padding-right: 15px !important;
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1);
}
-/* Style the scrollbar for better visibility - Webkit browsers */
.quantityOfMaterialsUsedChartTooltip::-webkit-scrollbar {
width: 8px;
}
@@ -324,7 +522,6 @@
border-radius: 4px;
}
-/* Additional adjustments for dark mode if needed */
.darkMode .quantityOfMaterialsUsedChartTooltip::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
}
@@ -333,12 +530,139 @@
background: rgba(255, 255, 255, 0.3);
}
-.darkMode .quantityOfMaterialsUsedChartTooltip {
- scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
+/* Animation */
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(-10px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+/* ---------------- STATUS CARD ---------------- */
+.statusCard {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ border-radius: 25px;
+ width: 100%;
+ max-width: 284px;
+ height: 190px;
+ text-align: center;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+ padding: 20px;
+ border: 1px solid rgba(0, 0, 0, 0.1);
+ position: relative;
+ transition: all 0.3s ease;
+}
+
+/* ---------------- RESPONSIVE GRID LAYOUT ---------------- */
+.projectStatusGrid {
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+ gap: 20px;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ max-width: 1600px;
+ margin: auto;
+}
+
+/* ---------------- OVAL STATUS BUTTON ---------------- */
+.weeklyStatusButton {
+ width: 130px;
+ height: 65px;
+ border-radius: 50px / 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
+ margin: 12px 0;
+ transition: all 0.3s ease;
+}
+
+.weeklyCardTitle {
+ color: #000;
+ font-size: clamp(14px, 1.4vw, 18px);
+ font-weight: 600;
+ transition: color 0.3s ease;
+}
+
+.darkMode .weeklyCardTitle {
+ color: var(--text-color) !important;
+}
+
+.weeklyStatusValue {
+ color: #000;
+ font-size: 40px;
+ font-weight: 600;
+ transition: color 0.3s ease;
+}
+
+.darkMode .weeklyStatusValue {
+ color: var(--text-color) !important;
+}
+
+.weekly-status-change {
+ transition: color 0.3s ease;
+ font-size: 14px;
+ font-weight: 500;
+}
+
+.darkMode .weekly-status-change {
+ color: var(--text-color) !important;
+}
+
+/* ---------------- RESPONSIVE BREAKPOINTS ---------------- */
+
+/* Large Screens */
+@media (min-width: 1400px) {
+ .lessonsLearnedGrid {
+ min-height: 650px;
+ }
+
+ .lessonsCard {
+ min-height: 650px;
+ }
+}
+
+@media (max-width: 1399px) and (min-width: 1200px) {
+ .lessonsLearnedGrid {
+ min-height: 600px;
+ }
+
+ .lessonsCard {
+ min-height: 600px;
+ }
+}
+
+@media (max-width: 1199px) and (min-width: 992px) {
+ .lessonsLearnedGrid {
+ min-height: 550px;
+ gap: 20px;
+ }
+
+ .lessonsCard {
+ min-height: 550px;
+ }
+}
+
+@media (max-width: 991px) and (min-width: 769px) {
+ .lessonsLearnedGrid {
+ min-height: 500px;
+ gap: 16px;
+ }
+
+ .lessonsCard {
+ min-height: 500px;
+ }
}
-/* ---------------- RESPONSIVE DESIGN ---------------- */
-/* Medium Screens - Wrap Items */
+/* Medium Screens */
@media (max-width: 1024px) {
.weeklySummaryHeaderContainer {
flex-direction: column;
@@ -356,11 +680,12 @@
}
}
-/* Small Screens - Make Dropdowns Vertical */
+/* Small Screens */
@media (max-width: 768px) {
.weeklySummaryHeaderContainer {
flex-direction: column;
align-items: center;
+ width: 95%;
}
.weeklySummaryHeaderControls {
@@ -369,14 +694,13 @@
width: 100%;
}
- /* Make Dropdowns Full Width */
.weeklySummaryHeaderControls select {
width: 100%;
}
- /* Make Button Full Width */
.weeklySummaryShareBtn {
width: 100%;
+ margin-top: 5px;
}
.weeklyProjectSummaryDashboardGrid {
@@ -393,126 +717,76 @@
.projectStatusGrid {
grid-template-columns: 1fr;
}
-}
-
-/* ---------------- STATUS CARD ---------------- */
-.statusCard {
- background: var(--status-card-bg, var(--card-bg));
- border: 1px solid var(--card-border);
- box-shadow: 0 4px 10px var(--card-elev);
- color: var(--text-color);
- border-radius: 25px;
- width: 100%;
- max-width: 284px;
- height: 190px;
- padding: 20px;
- text-align: center;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- transition: box-shadow 160ms ease, filter 160ms ease;
- position: relative;
-}
-
-.weeklyStatusChange {
- font-weight: 600;
- color: #1b2a41;
- font-size: clamp(12px, 1.2vw, 14px);
-}
-
-.darkMode .statusCard .weeklyStatusChange,
-.statusCard .weeklyStatusChange {
- color: var(--wow-color) !important;
-}
-
-/* Hover/focus: no transform => no layout shift */
-.statusCard:hover {
- box-shadow: 0 8px 18px var(--card-elev-hover, rgba(0, 0, 0, 0.18));
- filter: brightness(1.03);
-}
-
-.statusCard:focus-visible {
- outline: 2px solid var(--focus-border-color, #3b82f6);
- outline-offset: 3px;
- box-shadow: 0 10px 22px var(--card-elev-hover, rgba(0, 0, 0, 0.18));
-}
-
-
-
-/* ---------------- RESPONSIVE GRID LAYOUT ---------------- */
-.projectStatusGrid {
- display: grid;
- grid-template-columns: repeat(5, 1fr);
- gap: 20px;
- justify-content: center;
- align-items: center;
- width: 100%;
- max-width: 1600px;
- margin: auto;
-}
-
-
-/* ---------------- OVAL STATUS BUTTON ---------------- */
-.weeklyStatusButton {
- color: var(--status-pill-text, var(--text-color));
- background: var(--status-pill-bg, rgba(255, 255, 255, 0.6));
-
- /* ✅ allow bigger values */
- width: fit-content;
- min-width: 130px;
- padding: 10px 18px;
- height: auto;
-
- border-radius: 999px;
- display: flex;
- align-items: center;
- justify-content: center;
- margin: 12px 0;
-
- border: 1px solid var(--pill-border, rgba(0, 0, 0, 0.12));
- box-shadow: 0 2px 6px var(--pill-elev, rgba(0, 0, 0, 0.14));
-}
-
-.weeklyStatusValue {
- color: inherit;
- font-weight: 700;
- white-space: nowrap;
-
- /* ✅ scales a bit for longer strings like $27.6K / 12.8K */
- font-size: clamp(28px, 3vw, 40px);
- line-height: 1;
-}
-
-/* This targets the value text specifically when in Dark Mode */
-:global(body.dark-mode) .weeklyStatusValue,
-:global(body.bm-dashboard-dark) .weeklyStatusValue {
- /* If you want the pink color back, it needs !important to beat the global rule */
- color: #090336 !important;
- /* OR, if you prefer white text, we should darken the background bubble instead */
-}
+
+ .weeklyProjectSummaryDashboardSection.half .weeklyProjectSummaryDashboardCategoryContent {
+ grid-template-columns: 1fr;
+ }
+
+ .weeklyProjectSummaryCard :global(.chartContainer) {
+ min-height: 240px;
+ }
+
+ .normalCard {
+ min-height: 280px;
+ }
-/* Title/value should NEVER be hard-coded black */
-.weeklyCardTitle {
- color: var(--card-title, var(--text-color));
- font-size: clamp(14px, 1.4vw, 18px);
- font-weight: 600;
+ .lessonsLearnedGrid {
+ grid-template-columns: 1fr;
+ gap: 16px;
+ min-height: auto;
+ }
+
+ .lessonsCard {
+ min-height: 500px;
+ }
+
+ .toolsTrackingLayout {
+ grid-template-columns: 1fr;
+ }
+
+ .toolsDonutWrap {
+ grid-column: span 1;
+ }
+
+ .financialsGrid {
+ grid-template-columns: 1fr;
+ }
+
+ .financialsGrid .financialBig {
+ grid-column: span 1;
+ }
+
+ .laborTimeGrid {
+ grid-template-columns: 1fr;
+ }
+
+ .financialsTrackingGrid {
+ grid-template-columns: 1fr;
+ }
}
-/* Accent bar */
-.statusCard::before {
- content: "";
- position: absolute;
- top: 14px;
- left: 14px;
- right: 14px;
- height: 4px;
- border-radius: 999px;
- background: var(--status-accent, transparent);
- opacity: 0.95;
+/* Extra Small Screens */
+@media (max-width: 480px) {
+ .lessonsCard {
+ min-height: 450px;
+ }
+
+ .weeklyProjectSummaryCard :global(.chartContainer) {
+ min-height: 220px;
+ }
+
+ .normalCard {
+ min-height: 260px;
+ }
+
+ .weeklySummaryHeaderTitle {
+ font-size: large;
+ flex-direction: column;
+ gap: 5px;
+ }
}
-/* ---------------- RESPONSIVE BREAKPOINTS ---------------- */
+/* Status Grid Responsive */
@media (min-width: 1600px) {
.projectStatusGrid {
grid-template-columns: repeat(6, 1fr);
@@ -541,116 +815,61 @@
.projectStatusGrid {
grid-template-columns: repeat(1, 1fr);
}
+
+ .weeklyProjectSummaryCard :global(.chartContainer) {
+ min-height: 220px;
+ }
+
+ .normalCard {
+ min-height: 260px;
+ }
+}
+
+/* Dark mode fixes */
+.darkMode .weeklyProjectSummaryContainer {
+ background-color: var(--bg-color);
+ color: var(--text-color);
+}
+
+.darkMode .weeklyProjectSummaryDashboardContainer {
+ background-color: var(--bg-color);
}
-/* ---------------- OVERRIDE GLOBAL DARK MODE FOR PROJECT STATUS CARDS ---------------- */
-/* These rules override the global dark mode text color rules specifically for Project Status cards */
-/* Using high specificity selectors to ensure they take precedence over global !important rules */
-/* The global CSS uses body.dark-mode * and body.bm-dashboard-dark * with !important, */
-/* so we need selectors with higher specificity (more elements) and also use !important */
-
-/* Target all text elements within Project Status cards - most specific selector */
-:global(body.dark-mode) .weeklyProjectSummaryContainer .projectStatusGrid .statusCard div.weeklyCardTitle,
-:global(body.bm-dashboard-dark) .weeklyProjectSummaryContainer .projectStatusGrid .statusCard div.weeklyCardTitle,
-:global(body.dark-mode) .weeklyProjectSummaryContainer .projectStatusGrid .statusCard span.weeklyStatusValue,
-:global(body.bm-dashboard-dark) .weeklyProjectSummaryContainer .projectStatusGrid .statusCard span.weeklyStatusValue,
-:global(body.dark-mode) .weeklyProjectSummaryContainer .projectStatusGrid .statusCard div.weekly-status-change,
-:global(body.bm-dashboard-dark) .weeklyProjectSummaryContainer .projectStatusGrid .statusCard div.weekly-status-change {
- color: #1b2a41 !important;
-}
-
-/* Also target with class selectors for maximum specificity */
-:global(body.dark-mode) .weeklyProjectSummaryContainer .projectStatusGrid .statusCard .weeklyCardTitle,
-:global(body.bm-dashboard-dark) .weeklyProjectSummaryContainer .projectStatusGrid .statusCard .weeklyCardTitle {
- color: #1b2a41 !important;
-}
-
-:global(body.dark-mode) .weeklyProjectSummaryContainer .projectStatusGrid .statusCard .weeklyStatusValue,
-:global(body.bm-dashboard-dark) .weeklyProjectSummaryContainer .projectStatusGrid .statusCard .weeklyStatusValue {
- color: #1b2a41 !important;
-}
-
-:global(body.dark-mode) .weeklyProjectSummaryContainer .projectStatusGrid .statusCard .weekly-status-change,
-:global(body.bm-dashboard-dark) .weeklyProjectSummaryContainer .projectStatusGrid .statusCard .weekly-status-change {
- color: #1b2a41 !important;
-}
-
-/* Target the statusCard container and all children with universal selector */
-:global(body.dark-mode) .weeklyProjectSummaryContainer .projectStatusGrid .statusCard,
-:global(body.bm-dashboard-dark) .weeklyProjectSummaryContainer .projectStatusGrid .statusCard {
- color: #1b2a41 !important;
-}
-
-:global(body.dark-mode) .weeklyProjectSummaryContainer .projectStatusGrid .statusCard *,
-:global(body.bm-dashboard-dark) .weeklyProjectSummaryContainer .projectStatusGrid .statusCard * {
- color: #1b2a41 !important;
-}
-
-/* Additional specific selectors for p, span, div elements within status cards */
-:global(body.dark-mode) .weeklyProjectSummaryContainer .projectStatusGrid .statusCard p,
-:global(body.dark-mode) .weeklyProjectSummaryContainer .projectStatusGrid .statusCard span,
-:global(body.dark-mode) .weeklyProjectSummaryContainer .projectStatusGrid .statusCard div,
-:global(body.bm-dashboard-dark) .weeklyProjectSummaryContainer .projectStatusGrid .statusCard p,
-:global(body.bm-dashboard-dark) .weeklyProjectSummaryContainer .projectStatusGrid .statusCard span,
-:global(body.bm-dashboard-dark) .weeklyProjectSummaryContainer .projectStatusGrid .statusCard div {
- color: #1b2a41 !important;
-}
-
-/* Target the weeklyStatusChange class specifically */
-:global(body.dark-mode) .weeklyProjectSummaryContainer .projectStatusGrid .statusCard .weeklyStatusChange,
-:global(body.bm-dashboard-dark) .weeklyProjectSummaryContainer .projectStatusGrid .statusCard .weeklyStatusChange,
-:global(body.dark-mode) .weeklyProjectSummaryContainer .projectStatusGrid .statusCard .weekly-status-change,
-:global(body.bm-dashboard-dark) .weeklyProjectSummaryContainer .projectStatusGrid .statusCard .weekly-status-change {
- color: #1b2a41 !important;
-}
-
-/* Extra specific selectors including intermediate containers for maximum specificity */
-:global(body.dark-mode) .weeklyProjectSummaryContainer .weeklyProjectSummaryDashboardCategoryContent .projectStatusGrid .statusCard *,
-:global(body.bm-dashboard-dark) .weeklyProjectSummaryContainer .weeklyProjectSummaryDashboardCategoryContent .projectStatusGrid .statusCard * {
- color: #1b2a41 !important;
-}
-
-/* ---------------- SUPPLIER PERFORMANCE DARK MODE STYLES ---------------- */
-/* Style reactstrap Input select elements in Supplier Performance component */
-/* Using high specificity to override global body.dark-mode .form-control rules */
-:global(body.dark-mode) .supplier-performance-card-dark select.form-control,
-:global(body.bm-dashboard-dark) .supplier-performance-card-dark select.form-control,
-:global(body.dark-mode) .supplier-performance-card-dark select,
-:global(body.bm-dashboard-dark) .supplier-performance-card-dark select,
-:global(body.dark-mode) .supplier-performance-card-dark .supplier-performance-select,
-:global(body.bm-dashboard-dark) .supplier-performance-card-dark .supplier-performance-select,
-:global(body.dark-mode) .supplier-performance-card-dark .supplier-performance-select.form-control,
-:global(body.bm-dashboard-dark) .supplier-performance-card-dark .supplier-performance-select.form-control {
- background-color: #2b3344 !important;
- border-color: #3a506b !important;
- color: #ffffff !important;
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e") !important;
- background-repeat: no-repeat !important;
- background-position: right 0.75rem center !important;
- background-size: 16px 12px !important;
- padding-right: 2.25rem !important;
-}
-
-:global(body.dark-mode) .supplier-performance-card-dark select.form-control:focus,
-:global(body.bm-dashboard-dark) .supplier-performance-card-dark select.form-control:focus,
-:global(body.dark-mode) .supplier-performance-card-dark select:focus,
-:global(body.bm-dashboard-dark) .supplier-performance-card-dark select:focus,
-:global(body.dark-mode) .supplier-performance-card-dark .supplier-performance-select:focus,
-:global(body.bm-dashboard-dark) .supplier-performance-card-dark .supplier-performance-select:focus,
-:global(body.dark-mode) .supplier-performance-card-dark .supplier-performance-select.form-control:focus,
-:global(body.bm-dashboard-dark) .supplier-performance-card-dark .supplier-performance-select.form-control:focus {
- background-color: #2b3344 !important;
- border-color: #4a6072 !important;
- color: #ffffff !important;
- box-shadow: 0 0 0 0.2rem rgba(74, 96, 114, 0.25) !important;
-}
-
-:global(body.dark-mode) .supplier-performance-card-dark select.form-control option,
-:global(body.bm-dashboard-dark) .supplier-performance-card-dark select.form-control option,
-:global(body.dark-mode) .supplier-performance-card-dark select option,
-:global(body.bm-dashboard-dark) .supplier-performance-card-dark select option,
-:global(body.dark-mode) .supplier-performance-card-dark .supplier-performance-select option,
-:global(body.bm-dashboard-dark) .supplier-performance-card-dark .supplier-performance-select option {
- background-color: #2b3344 !important;
- color: #ffffff !important;
+.darkMode .weeklyProjectSummaryDashboardSection {
+ background: var(--section-bg);
+}
+
+.darkMode * {
+ color: inherit;
+}
+
+.darkMode .lessonsCard {
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+}
+
+/* Print styles */
+@media print {
+ .weeklyProjectSummaryCard {
+ break-inside: avoid;
+ page-break-inside: avoid;
+ }
+
+ .weeklyProjectSummaryCard :global(.container) {
+ box-shadow: none;
+ border: 1px solid #ddd;
+ }
+
+ .lessonsLearnedGrid,
+ .toolsTrackingLayout,
+ .financialsGrid,
+ .laborTimeGrid,
+ .financialsTrackingGrid {
+ break-inside: avoid;
+ page-break-inside: avoid;
+ }
+
+ .weeklySummaryShareBtn,
+ .weeklySummaryHeaderControls select {
+ display: none;
+ }
}
\ No newline at end of file
From 7aadec26a7f928b5e0360e6e85c9e3d94341ee23 Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Fri, 6 Mar 2026 17:53:32 -0800
Subject: [PATCH 19/21] fix(build): add missing
SupplierPerformanceGraph.module.css
The development version of SupplierPerformanceGraph.jsx imports this CSS
module but the file was not present on this branch, causing the build to
fail. Taken directly from development branch (no changes on this branch).
---
.../SupplierPerformanceGraph.module.css | 185 ++++++++++++++++++
1 file changed, 185 insertions(+)
create mode 100644 src/components/BMDashboard/WeeklyProjectSummary/SupplierPerformanceGraph.module.css
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/SupplierPerformanceGraph.module.css b/src/components/BMDashboard/WeeklyProjectSummary/SupplierPerformanceGraph.module.css
new file mode 100644
index 0000000000..7decf06c53
--- /dev/null
+++ b/src/components/BMDashboard/WeeklyProjectSummary/SupplierPerformanceGraph.module.css
@@ -0,0 +1,185 @@
+/* SupplierPerformanceGraph.module.css */
+
+/* Main Card Component */
+.supplier-performance-card {
+ background-color: var(--card-bg, #ffffff);
+ border-radius: 8px;
+ padding: 16px;
+ height: 100%;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ display: flex;
+ flex-direction: column;
+ transition: transform 0.2s ease;
+ min-height: 420px;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.supplier-performance-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+/* Dark Mode Overrides for Card */
+.supplier-performance-card.supplier-performance-dark-mode {
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+ /* Background relies on global var(--card-bg) */
+}
+
+/* Title */
+.supplier-performance-title {
+ font-size: 16px;
+ font-weight: 600;
+ margin: 0 0 16px 0;
+ color: var(--text-color, #333);
+ text-align: center;
+ flex-shrink: 0;
+}
+
+.supplier-performance-dark-mode .supplier-performance-title {
+ color: #ffffff;
+}
+
+/* Content Area */
+.supplier-performance-content {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ min-height: 0;
+ margin-top: 10px;
+}
+
+/* Filters Styling */
+.supplier-performance-filters {
+ padding: 12px 0;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+ margin-bottom: 12px;
+ display: flex;
+ gap: 16px;
+ flex-wrap: wrap;
+}
+
+.supplier-performance-dark-mode .supplier-performance-filters {
+ border-bottom-color: rgba(255, 255, 255, 0.2);
+}
+
+.supplier-performance-filter-group {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ min-width: 140px;
+}
+
+.supplier-performance-filter-group label {
+ display: block;
+ font-size: 12px;
+ font-weight: 500;
+ margin-bottom: 4px;
+ color: var(--label-color, #555);
+}
+
+.supplier-performance-dark-mode .supplier-performance-filter-group label {
+ color: #e0e0e0;
+}
+
+/* SELECT INPUT STYLING
+ This styles the "closed" box.
+*/
+.supplier-performance-select {
+ width: 100%;
+ padding: 6px 10px;
+ font-size: 12px;
+ border-radius: 4px;
+ border: 1px solid #ddd;
+ background-color: #fff;
+ color: #333;
+ outline: none;
+ height: 38px;
+ cursor: pointer;
+}
+
+.supplier-performance-select:focus {
+ border-color: #2196f3;
+ box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
+}
+
+/* DARK MODE INPUTS - EXACT COLOR MATCH
+ 1. Target the Select Box (.supplier-performance-select)
+ 2. Target the Options inside (option)
+ Using !important to ensure we beat Bootstrap/User Agent styles.
+*/
+
+/* The Box itself */
+.supplier-performance-dark-mode .supplier-performance-select {
+ background-color: #2c3344 !important; /* The specific Slate Blue from Tools */
+ border-color: #364156 !important; /* The specific Border from Tools */
+ color: #e0e0e0 !important; /* The specific Text from Tools */
+}
+
+/* The Dropdown Menu Items */
+.supplier-performance-dark-mode .supplier-performance-select option {
+ background-color: #2c3344 !important;
+ color: #e0e0e0 !important;
+}
+
+/* Focus State in Dark Mode */
+.supplier-performance-dark-mode .supplier-performance-select:focus {
+ border-color: #2196f3 !important;
+ box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2) !important;
+}
+
+/* Tooltip Styling */
+.supplier-performance-tooltip {
+ background-color: rgba(255, 255, 255, 0.95);
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ padding: 8px 12px;
+ font-size: 12px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+ max-width: 200px;
+ z-index: 1000;
+}
+
+.supplier-performance-tooltip-label {
+ font-weight: 600;
+ margin: 0 0 4px 0;
+ color: #333;
+}
+
+.supplier-performance-dark-mode .supplier-performance-tooltip {
+ background-color: rgba(45, 45, 45, 0.95);
+ border-color: #555;
+}
+
+.supplier-performance-dark-mode .supplier-performance-tooltip-label {
+ color: #e0e0e0;
+}
+
+/* Loading/Empty States */
+.supplier-performance-loading,
+.supplier-performance-empty,
+.supplier-performance-error {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+ min-height: 200px;
+ font-size: 14px;
+ color: #666;
+ opacity: 0.7;
+}
+
+.supplier-performance-dark-mode .supplier-performance-loading,
+.supplier-performance-dark-mode .supplier-performance-empty {
+ color: #a0a0a0;
+}
+
+.supplier-performance-error {
+ color: #f44336;
+}
+
+@media (max-width: 768px) {
+ .supplier-performance-filters {
+ flex-direction: column;
+ gap: 12px;
+ }
+}
From fc4fb13b677f563fd0a0271bd436b68ee4302d0a Mon Sep 17 00:00:00 2001
From: Aditya Gambhir <67105262+Aditya-gam@users.noreply.github.com>
Date: Fri, 6 Mar 2026 18:51:39 -0800
Subject: [PATCH 20/21] fix(merge): restore branch-specific changes lost during
conflict resolution
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- MostFrequentKeywords.jsx: fix classNamePrefix mismatch — CSS module
targets data-select__* classes (dev version) but JSX still generated
project-select__* classes, making all react-select dark mode CSS dead code.
Changed classNamePrefix from 'project-select' to 'data-select'.
- WeeklyProjectSummary.module.css: re-add .weeklyStatusChange class that
was present in branch's CSS but missing from the development version we
took during conflict resolution. WeeklyProjectSummary.jsx uses
styles.weeklyStatusChange, which requires the camelCase class to exist.
Uses --wow-color CSS variable (already set via inline style on the card)
to apply the correct color for positive/negative/neutral change indicators.
---
.../MostFrequentKeywords/MostFrequentKeywords.jsx | 2 +-
.../WeeklyProjectSummary.module.css | 10 ++++++++++
2 files changed, 11 insertions(+), 1 deletion(-)
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/MostFrequentKeywords/MostFrequentKeywords.jsx b/src/components/BMDashboard/WeeklyProjectSummary/MostFrequentKeywords/MostFrequentKeywords.jsx
index b380f18cce..fbd8edb108 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/MostFrequentKeywords/MostFrequentKeywords.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/MostFrequentKeywords/MostFrequentKeywords.jsx
@@ -238,7 +238,7 @@ function MostFrequentKeywords() {