feat: implement analytics dashboard and fix server-side filtering

package.json

@@ -30,6 +30,7 @@
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.3.0",
     "react-router-dom": "^6.28.0",
+    "recharts": "^3.8.1",
     "tailwindcss": "^3.4.14"
   },
   "devDependencies": {
@@ -50,8 +51,16 @@
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
+    "express": "^5.2.1",
     "express-session": "^1.18.2",
     "globals": "^15.11.0",
+    "jasmine": "^5.9.0",
+    "mongoose": "^9.6.2",
+    "passport": "^0.7.0",
+    "passport-local": "^1.0.0",
+    "supertest": "^7.1.4",
+    "typescript-eslint": "^8.59.3",
+    "vite": "^5.4.10",
     "jasmine": "^5.13.0",
     "jasmine-spec-reporter": "^7.0.0",
     "jsdom": "^29.1.1",

src/components/Dashboard.tsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import {
+  PieChart,
+  Pie,
+  Cell,
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer
+} from 'recharts';
+import { Paper, Typography, Box, Grid, Theme } from '@mui/material';
+
+interface GitHubItem {
+  id: number;
+  title: string;
+  state: string;
+  created_at: string;
+  pull_request?: { merged_at: string | null };
+  repository_url: string;
+  html_url: string;
+}
+
+interface DashboardProps {
+  totalIssues: number;
+  totalPrs: number;
+  data: GitHubItem[];
+  theme: Theme;
+}
+
+const Dashboard: React.FC<DashboardProps> = ({ totalIssues, totalPrs, data, theme }) => {
+
+  // Data for Pie Chart
+  const pieData = [
+    { name: 'Issues', value: totalIssues },
+    { name: 'Pull Requests', value: totalPrs },
+  ];
+
+  // Use theme-aware colors
+  const COLORS = [theme.palette.primary.main, theme.palette.secondary.main];
+
+  // Data for Bar Chart (Top 5 Repositories) - Improved safety
+  const repoCounts: { [key: string]: number } = {};
+  data.forEach(item => {
+    if (item?.repository_url) {
+      const repoName = item.repository_url
+        .split('/')
+        .filter(Boolean)
+        .pop();
+
+      if (repoName) {
+        repoCounts[repoName] = (repoCounts[repoName] || 0) + 1;
+      }
+    }
+  });
+
+  const barData = Object.entries(repoCounts)
+    .map(([name, count]) => ({ name, count }))
+    .sort((a, b) => b.count - a.count)
+    .slice(0, 5);
+
+  const hasData = totalIssues > 0 || totalPrs > 0;
+
+  if (!hasData) {
+    return (
+      <Paper elevation={1} sx={{ p: 4, mb: 4, textAlign: 'center', backgroundColor: theme.palette.background.paper }}>
+        <Typography variant="h6" color="textSecondary">
+          No data available. Enter a username to view analytics.
+        </Typography>
+      </Paper>
+    );
+  }
+
+  return (
+    <Box sx={{ mb: 4 }}>
+      <Grid container spacing={3}>
+        {/* Pie Chart: Issues vs PRs */}
+        <Grid item xs={12} md={6}>
+          <Paper elevation={2} sx={{ p: 2, height: 350, backgroundColor: theme.palette.background.paper }}>
+            <Typography variant="h6" gutterBottom align="center" color="textPrimary">
+              Contribution Mix (Total)
+            </Typography>
+            <ResponsiveContainer width="100%" height="90%">
+              <PieChart>
+                <Pie
+                  data={pieData}
+                  cx="50%"
+                  cy="50%"
+                  innerRadius={60}
+                  outerRadius={80}
+                  fill={theme.palette.primary.main}
+                  paddingAngle={5}
+                  dataKey="value"
+                  label
+                >
+                  {pieData.map((_entry, index) => (
+                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                  ))}
+                </Pie>
+                <Tooltip 
+                   contentStyle={{ backgroundColor: theme.palette.background.paper, color: theme.palette.text.primary }}
+                />
+                <Legend />
+              </PieChart>
+            </ResponsiveContainer>
+          </Paper>
+        </Grid>
+
+        {/* Bar Chart: Activity by Repository */}
+        <Grid item xs={12} md={6}>
+          <Paper elevation={2} sx={{ p: 2, height: 350, backgroundColor: theme.palette.background.paper }}>
+            <Typography variant="h6" gutterBottom align="center" color="textPrimary">
+              Top Repositories (Current View)
+            </Typography>
+            {barData.length > 0 ? (
+              <ResponsiveContainer width="100%" height="90%">
+                <BarChart data={barData}>
+                  <CartesianGrid strokeDasharray="3 3" stroke={theme.palette.divider} />
+                  <XAxis dataKey="name" stroke={theme.palette.text.secondary} />
+                  <YAxis stroke={theme.palette.text.secondary} />
+                  <Tooltip 
+                    contentStyle={{ backgroundColor: theme.palette.background.paper, color: theme.palette.text.primary }}
+                  />
+                  <Bar dataKey="count" fill={theme.palette.primary.light} radius={[4, 4, 0, 0]} />
+                </BarChart>
+              </ResponsiveContainer>
+            ) : (
+              <Box display="flex" justifyContent="center" alignItems="center" height="100%">
+                 <Typography color="textSecondary">No repository data found in this view.</Typography>
+              </Box>
+            )}
+          </Paper>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default Dashboard;

src/hooks/useDebounce.ts

@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react';
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

src/hooks/useGitHubAuth.ts

@@ -4,7 +4,6 @@ import { Octokit } from '@octokit/core';
 export const useGitHubAuth = () => {
   const [username, setUsername] = useState('');
   const [token, setToken] = useState('');
-  const [error, setError] = useState('');
 
   const octokit = useMemo(() => {
     if (!username) return null;
@@ -21,8 +20,6 @@ export const useGitHubAuth = () => {
     setUsername,
     token,
     setToken,
-    error,
-    setError,
     getOctokit,
   };
 };

src/hooks/useGitHubData.ts

@@ -1,16 +1,57 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useRef } from 'react';
+import { Octokit } from '@octokit/core';
 
-export const useGitHubData = (getOctokit: () => any) => {
-  const [issues, setIssues] = useState([]);
-  const [prs, setPrs] = useState([]);
+interface GitHubItem {
+  id: number;
+  title: string;
+  state: string;
+  created_at: string;
+  pull_request?: { merged_at: string | null };
+  repository_url: string;
+  html_url: string;
+}
+
+interface FetchFilters {
+  search?: string;
+  repo?: string;
+  startDate?: string;
+  endDate?: string;
+  state?: string;
+}
+
+export const useGitHubData = (getOctokit: () => Octokit | null) => {
+  const [issues, setIssues] = useState<GitHubItem[]>([]);
+  const [prs, setPrs] = useState<GitHubItem[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
   const [totalIssues, setTotalIssues] = useState(0);
   const [totalPrs, setTotalPrs] = useState(0);
   const [rateLimited, setRateLimited] = useState(false);
+
+  // Track the latest request ID to prevent stale overwrites
+  const lastRequestId = useRef(0);
+
+  const fetchPaginated = async (
+    octokit: Octokit, 
+    username: string, 
+    type: string, 
+    page = 1, 
+    per_page = 10,
+    filters: FetchFilters = {}
+  ) => {
+    let q = `author:${username} is:${type}`;
+
+    if (filters.search) q += ` ${filters.search} in:title`;
+    if (filters.repo) q += ` repo:${filters.repo}`;
+    if (filters.startDate) q += ` created:>=${filters.startDate}`;
+    if (filters.endDate) q += ` created:<=${filters.endDate}`;
+
+    if (filters.state === 'open' || filters.state === 'closed') {
+      q += ` is:${filters.state}`;
+    } else if (filters.state === 'merged') {
+      q += ` is:merged`;
+    }
 
-  const fetchPaginated = async (octokit: any, username: string, type: string, page = 1, per_page = 10) => {
-    const q = `author:${username} is:${type}`;
     const response = await octokit.request('GET /search/issues', {
       q,
       sort: 'created',
@@ -26,27 +67,39 @@ export const useGitHubData = (getOctokit: () => any) => {
   };
 
   const fetchData = useCallback(
-    async (username: string, page = 1, perPage = 10) => {
-
+    async (username: string, page = 1, perPage = 10, activeTab: 'issue' | 'pr' = 'issue', filters: FetchFilters = {}) => {
       const octokit = getOctokit();
+      if (!octokit || !username || rateLimited) return;
 
       if (!octokit || !username) return;
 
+      const requestId = ++lastRequestId.current;
       setLoading(true);
       setError('');
 
       try {
+        // We fetch BOTH even if one tab is active to keep totals synchronized as requested
         const [issueRes, prRes] = await Promise.all([
-          fetchPaginated(octokit, username, 'issue', page, perPage),
-          fetchPaginated(octokit, username, 'pr', page, perPage),
+          fetchPaginated(octokit, username, 'issue', activeTab === 'issue' ? page : 1, perPage, filters),
+          fetchPaginated(octokit, username, 'pr', activeTab === 'pr' ? page : 1, perPage, filters),
         ]);
 
-        setIssues(issueRes.items);
-        setPrs(prRes.items);
-        setTotalIssues(issueRes.total);
-        setTotalPrs(prRes.total);
-        setRateLimited(false);
-      } catch (err: any) {
+        // Only update state if this is still the latest request
+        if (requestId === lastRequestId.current) {
+          setIssues(issueRes.items);
+          setTotalIssues(issueRes.total);
+          setPrs(prRes.items);
+          setTotalPrs(prRes.total);
+        }
+      } catch (err: unknown) {
+        if (requestId === lastRequestId.current) {
+          const error = err as { status?: number; message?: string };
+          if (error.status === 403) {
+            setError('GitHub API rate limit exceeded. Please wait or use a token.');
+            setRateLimited(true);
+          } else {
+            setError(error.message || 'Failed to fetch data');
+          }
         const errorMessage = err.message?.toLowerCase() || "";
         if (err.status === 403) {
           setError('GitHub API rate limit exceeded. Please provide a PAT to continue.');
@@ -66,8 +119,11 @@ export const useGitHubData = (getOctokit: () => any) => {
             'Unable to fetch GitHub data. Please verify the username, token, or network connection.'
           );
         }
+        }
       } finally {
-        setLoading(false);
+        if (requestId === lastRequestId.current) {
+          setLoading(false);
+        }
       }
     },
     [getOctokit]

src/pages/ContributorProfile/ContributorProfile.tsx

@@ -8,9 +8,15 @@ type PR = {
   repository_url: string;
 };
 
+type Profile = {
+  avatar_url: string;
+  login: string;
+  bio: string;
+};
+
 export default function ContributorProfile() {
   const { username } = useParams();
-  const [profile, setProfile] = useState<any>(null);
+  const [profile, setProfile] = useState<Profile | null>(null);
   const [prs, setPRs] = useState<PR[]>([]);
   const [loading, setLoading] = useState(true);
 
@@ -28,7 +34,7 @@ export default function ContributorProfile() {
         );
         const prsData = await prsRes.json();
         setPRs(prsData.items);
-      } catch (error) {
+      } catch {
         toast.error("Failed to fetch user data.");
       } finally {
         setLoading(false);

src/pages/Contributors/Contributors.tsx

@@ -37,7 +37,7 @@ const ContributorsPage = () => {
           withCredentials: false,
         });
         setContributors(response.data);
-      } catch (err) {
+      } catch {
         setError("Failed to fetch contributors. Please try again later.");
       } finally {
         setLoading(false);

src/pages/Login/Login.tsx

@@ -36,8 +36,12 @@ const Login: React.FC = () => {
       if (response.data.message === 'Login successful') {
         navigate("/");
       }
-    } catch (error: any) {
-      setMessage(error.response?.data?.message || "Something went wrong");
+    } catch (error: unknown) {
+      if (axios.isAxiosError(error)) {
+        setMessage(error.response?.data?.message || "Something went wrong");
+      } else {
+        setMessage("Something went wrong");
+      }
     } finally {
       setIsLoading(false);
     }