bo/worklenz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(reporting): enhance overview reports with memoization and dark mode support

Browse Source 
- Refactored components in the reporting section to utilize React.memo, useCallback, and useMemo for improved performance and reduced unnecessary re-renders.
- Updated the OverviewStatCard to support dark mode styling and added enhanced hover effects.
- Improved the Avatars component by memoizing rendering logic and preventing event propagation.
- Enhanced OverviewReportsTable with memoized columns and row props for better performance.
- Applied consistent styling adjustments across various components to ensure a cohesive user experience.
This commit is contained in:
chamikaJ
2025-06-13 16:04:32 +05:30
parent d0c231ee43
commit 4426b5f3ef
7 changed files with 423 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
worklenz-frontend/src/styles/customOverrides.css
View File

@@ -79,6 +79,83 @@
border: 1px solid #d3d3d3;
}
/* Enhanced overview stat card styles */
.overview-stat-card {
border-radius: 0 !important;
}
.overview-stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
}
/* Light mode stat cards */
.overview-stat-card.light-mode {
background-color: #ffffff !important;
border: 1px solid #f0f0f0 !important;
}
.overview-stat-card.light-mode:hover {
border-color: #1890ff !important;
box-shadow: 0 4px 16px rgba(24, 144, 255, 0.15) !important;
}
.overview-stat-card.light-mode .ant-card {
background-color: transparent !important;
border: none !important;
}
.overview-stat-card.light-mode .ant-card-body {
background-color: transparent !important;
}
/* Dark mode stat cards */
.overview-stat-card.dark-mode {
background-color: #1f1f1f !important;
border: 1px solid #303030 !important;
}
.overview-stat-card.dark-mode:hover {
border-color: #1890ff !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}
.overview-stat-card.dark-mode .ant-card {
background-color: transparent !important;
border: none !important;
}
.overview-stat-card.dark-mode .ant-card-body {
background-color: transparent !important;
}
/* Force dark mode styles when body has dark class or data attribute */
body.dark .overview-stat-card,
[data-theme="dark"] .overview-stat-card,
.ant-theme-dark .overview-stat-card {
background-color: #1f1f1f !important;
border: 1px solid #303030 !important;
}
body.dark .overview-stat-card .ant-card,
[data-theme="dark"] .overview-stat-card .ant-card,
.ant-theme-dark .overview-stat-card .ant-card {
background-color: transparent !important;
border: none !important;
}
body.dark .overview-stat-card .ant-card-body,
[data-theme="dark"] .overview-stat-card .ant-card-body,
.ant-theme-dark .overview-stat-card .ant-card-body {
background-color: transparent !important;
}
/* Ensure no border radius on card components */
.overview-stat-card .ant-card,
.overview-stat-card .ant-card-body {
border-radius: 0 !important;
}
/* reporting sidebar */
.custom-reporting-sider .ant-menu-item-selected {
border-inline-end: 3px solid #1890ff !important;