Improve dashboard contribution calendar timeline

src/components/ContributionHeatmap.tsx

@@ -57,6 +57,10 @@ export interface ContributionHeatmapProps {
   showColorLegend?: boolean;
   scrollContainerRef?: React.RefObject<HTMLDivElement | null>;
   scrollContainerSx?: SxProps<Theme>;
+  getBlockColor?: (activity: {
+    count: number;
+    date: string;
+  }) => string | undefined;
 }
 
 const ContributionHeatmap: React.FC<ContributionHeatmapProps> = ({
@@ -80,6 +84,7 @@ const ContributionHeatmap: React.FC<ContributionHeatmapProps> = ({
   showColorLegend,
   scrollContainerRef,
   scrollContainerSx,
+  getBlockColor,
 }) => {
   const theme = useTheme();
   const heatmapLevels = [...CONTRIBUTION_HEATMAP_SCALE];
@@ -168,13 +173,19 @@ const ContributionHeatmap: React.FC<ContributionHeatmapProps> = ({
           renderBlock={(block, activity) => {
             const clickable = interactive;
             const isSelected = selectedDate === activity.date;
+            const blockColor = getBlockColor?.(activity);
+            const coloredBlock = blockColor
+              ? React.cloneElement(block as React.ReactElement, {
+                  fill: blockColor,
+                })
+              : block;
             const highlighted =
               clickable && isSelected
-                ? React.cloneElement(block as React.ReactElement, {
+                ? React.cloneElement(coloredBlock as React.ReactElement, {
                     stroke: theme.palette.text.primary,
                     strokeWidth: 1.5,
                   })
-                : block;
+                : coloredBlock;
             const wrapped = clickable ? (
               <g
                 onClick={() => onDayClick?.(activity.date)}

src/pages/dashboard/DashboardPage.tsx

@@ -10,13 +10,20 @@ import DashboardFeaturedWorkSection from './views/DashboardFeaturedWork';
 import DashboardTopContributors from './views/DashboardTopContributors';
 import LiveSidebar from './views/LiveSidebar';
 
+const getCurrentMonthKey = () => {
+  const now = new Date();
+  return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
+};
+
 const DashboardFeaturePage: React.FC = () => {
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   const isTablet = useMediaQuery(theme.breakpoints.between('sm', 'md'));
   const isLargeScreen = useMediaQuery(theme.breakpoints.up('xl'));
   const showSidebarRight = useMediaQuery(theme.breakpoints.up('xl'));
 
   const [range, setRange] = useState<TrendTimeRange>('35d');
+  const [calendarMonth, setCalendarMonth] =
+    useState<string>(getCurrentMonthKey);
   const {
     kpis,
     overview,
@@ -28,7 +35,7 @@ const DashboardFeaturePage: React.FC = () => {
     featuredContributors,
     featuredDiscoveryContributors,
     isLoading,
-  } = useDashboardData(range);
+  } = useDashboardData(range, calendarMonth);
 
   const sidebarWidth =
     isMobile || isTablet ? '100%' : isLargeScreen ? '340px' : '300px';
@@ -81,6 +88,7 @@ const DashboardFeaturePage: React.FC = () => {
               kpis={kpis}
               isLoading={isLoading}
               onRangeChange={setRange}
+              onCalendarMonthChange={setCalendarMonth}
             />
 
             <DashboardTopContributors