Add scientific tag filtering and weekly/daily heatmap view toggle

Features added:
- Scientific area tag selector with 9 categories (antibody, hormones, materials-science, drug-discovery, biology, medicine, physics, data, education)
- Tagged all 14 organizations with relevant scientific areas
- Weekly activity view as default (aggregated from daily data)
- Toggle between weekly and daily heatmap views
- Enhanced tooltips for both view modes
- Improved visual design with proper theme support
- Responsive layout for all screen sizes

Technical changes:
- Added TagSelector component for filtering organizations
- Added ViewToggle component for switching heatmap granularity
- Updated ProviderInfo type to include tags property
- Created weeklyCalendar utility for data aggregation
- Enhanced Heatmap component to support both view modes
- Updated all related components to pass viewMode prop
- Added theme context and toggle (prepared for future use)

package.json

@@ -19,7 +19,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.427.0",
-    "next": "14.2.5",
+    "next": "^14.2.33",
     "react": "^18",
     "react-activity-calendar": "^2.2.11",
     "react-dom": "^18",
@@ -27,11 +27,11 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "postcss": "^8",
-    "tailwindcss": "^3.4.1"
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
   }
 }

src/components/ClientNavbar.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import React from "react";
+import UserSearchDialog from "./UserSearchDialog";
+import ThemeToggle from "./ThemeToggle";
+
+const Navbar: React.FC = () => {
+  return (
+    <nav className="w-full mt-4">
+      <div className="max-w-6xl mx-auto px-4 py-3">
+        <div className="flex items-center justify-end gap-3">
+          <ThemeToggle />
+          <UserSearchDialog />
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;

src/components/Heatmap.tsx

@@ -2,6 +2,9 @@ import React from "react";
 import ActivityCalendar from "react-activity-calendar";
 import { Tooltip, Avatar } from "@mui/material";
 import Link from "next/link";
+import { aggregateToWeeklyData, getWeekDateRange } from "../utils/weeklyCalendar";
+
+type ViewMode = 'daily' | 'weekly';
 
 type HeatmapProps = {
   data: Array<{ date: string; count: number; level: number }>;
@@ -11,9 +14,22 @@ type HeatmapProps = {
   avatarUrl: string;
   authorId: string;
   showHeader?: boolean;
+  viewMode: ViewMode;
 };
 
-const Heatmap: React.FC<HeatmapProps> = ({ data, color, providerName, fullName, avatarUrl, authorId, showHeader = true }) => {
+const Heatmap: React.FC<HeatmapProps> = ({ 
+  data, 
+  color, 
+  providerName, 
+  fullName, 
+  avatarUrl, 
+  authorId, 
+  showHeader = true,
+  viewMode 
+}) => {
+  // Process data based on view mode
+  const processedData = viewMode === 'weekly' ? aggregateToWeeklyData(data) : data;
+  
   return (
     <div className="flex flex-col items-center w-full mx-auto">
       {showHeader && (
@@ -37,16 +53,20 @@ const Heatmap: React.FC<HeatmapProps> = ({ data, color, providerName, fullName,
       )}
       <div className="w-full overflow-x-auto flex justify-center">
         <ActivityCalendar
-          data={data}
+          data={processedData}
           theme={{
             dark: ["#161b22", color],
             light: ["#e0e0e0", color],
           }}
-          blockSize={11}
+          blockSize={viewMode === 'weekly' ? 15 : 11}
           hideTotalCount
           renderBlock={(block, activity) => (
             <Tooltip
-              title={`${activity.count} new repos on ${activity.date}`}
+              title={
+                viewMode === 'weekly'
+                  ? `${activity.count} new repos in week of ${getWeekDateRange(activity.date)}`
+                  : `${activity.count} new repos on ${activity.date}`
+              }
               arrow
             >
               {block}

src/components/HeatmapGrid.tsx

@@ -1,7 +1,10 @@
-import React from "react";
+import React, { useState } from "react";
 import { ProviderInfo, CalendarData } from "../types/heatmap";
 import OrganizationCard from "./OrganizationCard";
 import ProviderHeatmapSkeleton from "./ProviderHeatmapSkeleton";
+import ViewToggle from "./ViewToggle";
+
+type ViewMode = 'daily' | 'weekly';
 
 interface HeatmapGridProps {
   sortedProviders: ProviderInfo[];
@@ -10,6 +13,8 @@ interface HeatmapGridProps {
 }
 
 const HeatmapGrid: React.FC<HeatmapGridProps> = ({ sortedProviders, calendarData, isLoading }) => {
+  const [viewMode, setViewMode] = useState<ViewMode>('weekly');
+
   if (isLoading) {
     return (
       <div className="flex flex-col gap-8 max-w-4xl mx-auto mb-16">
@@ -22,12 +27,22 @@ const HeatmapGrid: React.FC<HeatmapGridProps> = ({ sortedProviders, calendarData
 
   return (
     <div className="flex flex-col gap-8 max-w-4xl mx-auto mb-16">
+      {/* View Toggle */}
+      <div className="flex justify-center">
+        <ViewToggle
+          viewMode={viewMode}
+          onToggle={setViewMode}
+        />
+      </div>
+
+      {/* Heatmap Cards */}
       {sortedProviders.map((provider, index) => (
         <OrganizationCard 
           key={provider.fullName || provider.authors[0]}
           provider={provider} 
           calendarData={calendarData}
           rank={index + 1}
+          viewMode={viewMode}
         />
       ))}
     </div>

src/components/Navbar.tsx

@@ -5,7 +5,7 @@ const Navbar: React.FC = () => {
   return (
     <nav className="w-full mt-4">
       <div className="max-w-6xl mx-auto px-4 py-3">
-        <div className="flex items-center justify-end">
+        <div className="flex items-center justify-end gap-3">
           <UserSearchDialog />
         </div>
       </div>

src/components/OrganizationCard.tsx

@@ -3,13 +3,16 @@ import { ProviderInfo, CalendarData } from "../types/heatmap";
 import Heatmap from "./Heatmap";
 import OrganizationHeader from "./OrganizationHeader";
 
+type ViewMode = 'daily' | 'weekly';
+
 interface OrganizationCardProps {
   provider: ProviderInfo;
   calendarData: CalendarData;
   rank: number;
+  viewMode: ViewMode;
 }
 
-const OrganizationCard = React.memo(({ provider, calendarData, rank }: OrganizationCardProps) => {
+const OrganizationCard = React.memo(({ provider, calendarData, rank, viewMode }: OrganizationCardProps) => {
   const providerName = provider.fullName || provider.authors[0];
   const calendarKey = provider.authors[0];
   const totalCount = calendarData[calendarKey]?.reduce((sum, day) => sum + day.count, 0) || 0;
@@ -32,6 +35,7 @@ const OrganizationCard = React.memo(({ provider, calendarData, rank }: Organizat
           avatarUrl={provider.avatarUrl ?? ''}
           authorId={calendarKey}
           showHeader={false}
+          viewMode={viewMode}
         />
       </div>
 

src/components/TagSelector.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { cn } from "../lib/utils";
+
+export interface Tag {
+  id: string;
+  label: string;
+  color?: string;
+}
+
+interface TagSelectorProps {
+  tags: Tag[];
+  selectedTags: string[];
+  onTagToggle: (tagId: string) => void;
+  className?: string;
+}
+
+const TagSelector: React.FC<TagSelectorProps> = ({
+  tags,
+  selectedTags,
+  onTagToggle,
+  className,
+}) => {
+  return (
+    <div className={cn("flex flex-col items-center gap-4", className)}>
+      <div className="flex items-center gap-3">
+        <h3 className="text-lg font-medium text-foreground">Select Tags</h3>
+        <span className="bg-blue-500 text-white text-sm px-2 py-1 rounded-full min-w-[24px] h-6 flex items-center justify-center">
+          {selectedTags.length}
+        </span>
+      </div>
+      
+      <div className="flex flex-wrap gap-3 justify-center max-w-4xl">
+        {tags.map((tag) => {
+          const isSelected = selectedTags.includes(tag.id);
+          return (
+            <button
+              key={tag.id}
+              onClick={() => onTagToggle(tag.id)}
+              className={cn(
+                "px-4 py-2 rounded-full border-2 transition-all duration-200 font-medium",
+                "hover:scale-105 active:scale-95",
+                isSelected
+                  ? "bg-blue-500 text-white border-blue-500 shadow-lg"
+                  : cn(
+                      "border-border hover:border-accent-foreground/20",
+                      "bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground",
+                      "dark:bg-card dark:text-card-foreground dark:border-border",
+                      "light:bg-white light:text-gray-700 light:border-gray-300 light:hover:border-gray-400"
+                    )
+              )}
+            >
+              {tag.label}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default TagSelector;

src/components/ThemeToggle.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from 'react';
+import { useTheme } from '../contexts/ThemeContext';
+import { cn } from '../lib/utils';
+
+interface ThemeToggleProps {
+  className?: string;
+}
+
+const ThemeToggle: React.FC<ThemeToggleProps> = ({ className }) => {
+  const [mounted, setMounted] = useState(false);
+  const { theme, toggleTheme } = useTheme();
+
+  // Only render after hydration to prevent SSR issues
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    // Return a placeholder that matches the final component size
+    return (
+      <div className={cn(
+        "relative inline-flex h-10 w-10 items-center justify-center rounded-lg border border-border bg-background",
+        className
+      )}>
+        <div className="h-5 w-5 animate-pulse bg-muted rounded"></div>
+      </div>
+    );
+  }
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className={cn(
+        "relative inline-flex h-10 w-10 items-center justify-center rounded-lg border border-border bg-background hover:bg-accent hover:text-accent-foreground transition-colors",
+        className
+      )}
+      aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
+    >
+      <div className="relative h-5 w-5">
+        {/* Sun Icon */}
+        <svg
+          className={cn(
+            "absolute inset-0 h-5 w-5 transition-all",
+            theme === 'dark' ? "rotate-90 scale-0" : "rotate-0 scale-100"
+          )}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+          />
+        </svg>
+        
+        {/* Moon Icon */}
+        <svg
+          className={cn(
+            "absolute inset-0 h-5 w-5 transition-all",
+            theme === 'dark' ? "rotate-0 scale-100" : "-rotate-90 scale-0"
+          )}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+          />
+        </svg>
+      </div>
+    </button>
+  );
+};
+
+export default ThemeToggle;

src/components/ViewToggle.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { cn } from "../lib/utils";
+
+type ViewMode = 'daily' | 'weekly';
+
+interface ViewToggleProps {
+  viewMode: ViewMode;
+  onToggle: (mode: ViewMode) => void;
+  className?: string;
+}
+
+const ViewToggle: React.FC<ViewToggleProps> = ({ viewMode, onToggle, className }) => {
+  return (
+    <div className={cn("flex items-center gap-1 bg-muted rounded-lg p-1", className)}>
+      <button
+        onClick={() => onToggle('weekly')}
+        className={cn(
+          "px-3 py-1.5 text-sm font-medium rounded-md transition-all duration-200",
+          viewMode === 'weekly'
+            ? "bg-background text-foreground shadow-sm"
+            : "text-muted-foreground hover:text-foreground"
+        )}
+      >
+        Weekly
+      </button>
+      <button
+        onClick={() => onToggle('daily')}
+        className={cn(
+          "px-3 py-1.5 text-sm font-medium rounded-md transition-all duration-200",
+          viewMode === 'daily'
+            ? "bg-background text-foreground shadow-sm"
+            : "text-muted-foreground hover:text-foreground"
+        )}
+      >
+        Daily
+      </button>
+    </div>
+  );
+};
+
+export default ViewToggle;

src/constants/organizations.ts

@@ -1,18 +1,87 @@
 import { ProviderInfo } from "../types/heatmap";
 
+// Scientific area tags
+export const SCIENTIFIC_TAGS = [
+  { id: "antibody", label: "antibody" },
+  { id: "hormones", label: "hormones" },
+  { id: "materials-science", label: "materials-science" },
+  { id: "drug-discovery", label: "drug-discovery" },
+  { id: "biology", label: "biology" },
+  { id: "medicine", label: "medicine" },
+  { id: "physics", label: "physics" },
+  { id: "data", label: "data" },
+  { id: "education", label: "education" },
+];
+
 export const ORGANIZATIONS: ProviderInfo[] = [
-  { color: "#ff7000", authors: ["LeMaterial", "Entalpic"] },
-  { color: "#1877F2", authors: ["arcinstitute"]},
-  { color: "#10A37F", authors: ["SandboxAQ"] },
-  { color: "#cc785c", authors: ["Anthropic"] },
-  { color: "#DB4437", authors: ["polymathic-ai"] },
-  { color: "#F45098", authors: ["NASA-AIML", "nasa-ibm-ai4science", "nasa-impact"] },
-  { color: "#FEB800", authors: ["facebook"] },
-  { color: "#76B900", authors: ["nvidia"] },
-  { color: "#0088cc", authors: ["Merck"] },
-  { color: "#0088cc", authors: ["wanglab"] },
-  { color: "#0088cc", authors: ["jablonkagroup"] },
-  { color: "#4C6EE6", authors: ["Orbital-Materials"] },
-  { color: "#4C6EE6", authors: ["Xaira-Therapeutics"] },
-  { color: "#FEC912", authors: ["hugging-science"] },
+  { 
+    color: "#ff7000", 
+    authors: ["LeMaterial", "Entalpic"],
+    tags: ["materials-science", "drug-discovery"]
+  },
+  { 
+    color: "#1877F2", 
+    authors: ["arcinstitute"],
+    tags: ["biology", "medicine", "drug-discovery"]
+  },
+  { 
+    color: "#10A37F", 
+    authors: ["SandboxAQ"],
+    tags: ["physics", "materials-science", "drug-discovery"]
+  },
+  { 
+    color: "#cc785c", 
+    authors: ["Anthropic"],
+    tags: ["data", "education"]
+  },
+  { 
+    color: "#DB4437", 
+    authors: ["polymathic-ai"],
+    tags: ["physics", "data"]
+  },
+  { 
+    color: "#F45098", 
+    authors: ["NASA-AIML", "nasa-ibm-ai4science", "nasa-impact"],
+    tags: ["physics", "data", "education"]
+  },
+  { 
+    color: "#FEB800", 
+    authors: ["facebook"],
+    tags: ["data", "education"]
+  },
+  { 
+    color: "#76B900", 
+    authors: ["nvidia"],
+    tags: ["data", "physics", "materials-science"]
+  },
+  { 
+    color: "#0088cc", 
+    authors: ["Merck"],
+    tags: ["drug-discovery", "medicine", "biology"]
+  },
+  { 
+    color: "#0088cc", 
+    authors: ["wanglab"],
+    tags: ["biology", "medicine"]
+  },
+  { 
+    color: "#0088cc", 
+    authors: ["jablonkagroup"],
+    tags: ["materials-science", "drug-discovery"]
+  },
+  { 
+    color: "#4C6EE6", 
+    authors: ["Orbital-Materials"],
+    tags: ["materials-science", "physics"]
+  },
+  { 
+    color: "#4C6EE6", 
+    authors: ["Xaira-Therapeutics"],
+    tags: ["drug-discovery", "medicine", "biology", "antibody"]
+  },
+  { 
+    color: "#FEC912", 
+    authors: ["hugging-science"],
+    tags: ["data", "education", "biology", "physics"]
+  },
 ];

src/contexts/ThemeContext.tsx

@@ -0,0 +1,68 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+type Theme = 'light' | 'dark';
+
+interface ThemeContextType {
+  theme: Theme;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
+  const [theme, setTheme] = useState<Theme>('dark');
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    // Get theme from localStorage or system preference
+    const savedTheme = localStorage.getItem('theme') as Theme | null;
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    const initialTheme = savedTheme || systemTheme;
+    
+    setTheme(initialTheme);
+  }, []);
+
+  useEffect(() => {
+    if (!mounted) return;
+    
+    // Apply theme to document
+    const root = document.documentElement;
+    
+    if (theme === 'dark') {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+    
+    // Save to localStorage
+    localStorage.setItem('theme', theme);
+  }, [theme, mounted]);
+
+  const toggleTheme = () => {
+    setTheme(prev => prev === 'light' ? 'dark' : 'light');
+  };
+
+  // Prevent hydration mismatch by not rendering until mounted
+  if (!mounted) {
+    return <>{children}</>;
+  }
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};

src/pages/index.tsx

@@ -1,10 +1,11 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import { ProviderInfo, ModelData, CalendarData } from "../types/heatmap";
 import OrganizationButton from "../components/OrganizationButton";
 import HeatmapGrid from "../components/HeatmapGrid";
 import Navbar from "../components/Navbar";
+import TagSelector from "../components/TagSelector";
 import { getProviders } from "../utils/ranking";
-import { ORGANIZATIONS } from "../constants/organizations";
+import { ORGANIZATIONS, SCIENTIFIC_TAGS } from "../constants/organizations";
 
 interface PageProps {
   calendarData: CalendarData;
@@ -16,6 +17,7 @@ function Page({
   providers,
 }: PageProps) {
   const [isLoading, setIsLoading] = useState(true);
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
 
   useEffect(() => {
     if (calendarData && Object.keys(calendarData).length > 0) {
@@ -23,6 +25,27 @@ function Page({
     }
   }, [calendarData]);
 
+  // Filter providers based on selected tags
+  const filteredProviders = useMemo(() => {
+    if (selectedTags.length === 0) {
+      return providers;
+    }
+    
+    return providers.filter(provider => {
+      if (!provider.tags) return false;
+      return selectedTags.some(tag => provider.tags!.includes(tag));
+    });
+  }, [providers, selectedTags]);
+
+  const handleTagToggle = (tagId: string) => {
+    setSelectedTags(prev => {
+      if (prev.includes(tagId)) {
+        return prev.filter(t => t !== tagId);
+      } else {
+        return [...prev, tagId];
+      }
+    });
+  };
 
   return (
     <div className="w-full">
@@ -45,10 +68,19 @@ function Page({
           </p>
         </div>
 
+        {/* Tag Selector */}
+        <div className="mb-16">
+          <TagSelector
+            tags={SCIENTIFIC_TAGS}
+            selectedTags={selectedTags}
+            onTagToggle={handleTagToggle}
+          />
+        </div>
+
         <div className="mb-16 mx-auto">
           <div className="overflow-x-auto scrollbar-hide">
             <div className="flex gap-6 px-4 py-2 min-w-max justify-center">
-              {providers.map((provider, index) => (
+              {filteredProviders.map((provider, index) => (
                 <OrganizationButton
                   key={provider.fullName || provider.authors[0]}
                   provider={provider}
@@ -61,7 +93,7 @@ function Page({
         </div>
              
         <HeatmapGrid 
-          sortedProviders={providers}
+          sortedProviders={filteredProviders}
           calendarData={calendarData}
           isLoading={isLoading}
         />

src/styles/globals.css

@@ -33,35 +33,33 @@
     --background-rgb: 255, 255, 255;
   }
 
-  @media (prefers-color-scheme: dark) {
-    :root {
-      --foreground-rgb: 255, 255, 255;
-      --background-rgb: 0, 0, 0;
-      --background: 222.2 84% 4.9%;
-      --foreground: 210 40% 98%;
-      --card: 222.2 84% 4.9%;
-      --card-foreground: 210 40% 98%;
-      --popover: 222.2 84% 4.9%;
-      --popover-foreground: 210 40% 98%;
-      --primary: 210 40% 98%;
-      --primary-foreground: 222.2 47.4% 11.2%;
-      --secondary: 217.2 32.6% 17.5%;
-      --secondary-foreground: 210 40% 98%;
-      --muted: 217.2 32.6% 17.5%;
-      --muted-foreground: 215 20.2% 65.1%;
-      --accent: 217.2 32.6% 17.5%;
-      --accent-foreground: 210 40% 98%;
-      --destructive: 0 62.8% 30.6%;
-      --destructive-foreground: 210 40% 98%;
-      --border: 217.2 32.6% 17.5%;
-      --input: 217.2 32.6% 17.5%;
-      --ring: 212.7 26.8% 83.9%;
-      --chart-1: 220 70% 50%;
-      --chart-2: 160 60% 45%;
-      --chart-3: 30 80% 55%;
-      --chart-4: 280 65% 60%;
-      --chart-5: 340 75% 55%;
-    }
+  .dark {
+    --foreground-rgb: 255, 255, 255;
+    --background-rgb: 0, 0, 0;
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
   }
 }
 

src/types/heatmap.ts

@@ -1,6 +1,7 @@
 export interface ProviderInfo {
   color: string;
   authors: string[];
+  tags?: string[];
   fullName?: string;
   avatarUrl?: string | null;
   isVerified?: boolean;

src/utils/weeklyCalendar.ts

@@ -0,0 +1,63 @@
+import { Activity } from "../types/heatmap";
+
+export const aggregateToWeeklyData = (dailyData: Activity[]): Activity[] => {
+  if (!dailyData || dailyData.length === 0) return [];
+
+  const weeklyData: Activity[] = [];
+  let currentWeekStart: Date | null = null;
+  let currentWeekCount = 0;
+  let currentWeekLevel = 0;
+
+  for (const dayActivity of dailyData) {
+    const date = new Date(dayActivity.date);
+    const dayOfWeek = date.getDay(); // 0 = Sunday, 1 = Monday, etc.
+
+    // If it's Sunday or we don't have a current week, start a new week
+    if (dayOfWeek === 0 || currentWeekStart === null) {
+      // Save the previous week if it exists
+      if (currentWeekStart !== null) {
+        weeklyData.push({
+          date: currentWeekStart.toISOString().split('T')[0],
+          count: currentWeekCount,
+          level: currentWeekLevel,
+        });
+      }
+
+      // Start new week
+      currentWeekStart = new Date(date);
+      currentWeekCount = dayActivity.count;
+      currentWeekLevel = dayActivity.level;
+    } else {
+      // Add to current week
+      currentWeekCount += dayActivity.count;
+      // Use the maximum level for the week
+      currentWeekLevel = Math.max(currentWeekLevel, dayActivity.level);
+    }
+  }
+
+  // Don't forget the last week
+  if (currentWeekStart !== null) {
+    weeklyData.push({
+      date: currentWeekStart.toISOString().split('T')[0],
+      count: currentWeekCount,
+      level: currentWeekLevel,
+    });
+  }
+
+  return weeklyData;
+};
+
+export const getWeekDateRange = (weekStartDate: string): string => {
+  const startDate = new Date(weekStartDate);
+  const endDate = new Date(startDate);
+  endDate.setDate(startDate.getDate() + 6);
+
+  const formatDate = (date: Date) => {
+    return date.toLocaleDateString('en-US', { 
+      month: 'short', 
+      day: 'numeric' 
+    });
+  };
+
+  return `${formatDate(startDate)} - ${formatDate(endDate)}`;
+};