feat: add github user comparison interface

src/components/Dashboard.tsx

@@ -11,8 +11,16 @@ import {
   Tooltip,
   Legend,
   ResponsiveContainer
-} from 'recharts';
-import { Paper, Typography, Box, Grid, Theme } from '@mui/material';
+}from 'recharts';
+
+import {
+  Paper,
+  Typography,
+  Box,
+  Grid,
+  Theme,
+  LinearProgress
+} from '@mui/material';
 
 interface GitHubItem {
   id: number;
@@ -63,6 +71,27 @@ const Dashboard: React.FC<DashboardProps> = ({ totalIssues, totalPrs, data, them
     .slice(0, 5);
 
   const hasData = totalIssues > 0 || totalPrs > 0;
+  const totalContributions = totalIssues + totalPrs;
+
+const healthScore = Math.min(
+  100,
+  Math.round((totalContributions / 50) * 100)
+);
+
+const healthStatus =
+  healthScore >= 80
+    ? "Excellent"
+    : healthScore >= 60
+    ? "Good"
+    : healthScore >= 40
+    ? "Moderate"
+    : "Poor";
+
+    const contributorGrowthData = [
+  { month: "Issues", contributions: totalIssues },
+  { month: "PRs", contributions: totalPrs },
+  { month: "Total", contributions: totalContributions },
+];
 
   if (!hasData) {
     return (
@@ -76,6 +105,52 @@ const Dashboard: React.FC<DashboardProps> = ({ totalIssues, totalPrs, data, them
 
   return (
     <Box sx={{ mb: 4 }}>
+    <Paper
+  elevation={2}
+  sx={{
+    p: 3,
+    mb: 3,
+    textAlign: "center",
+    backgroundColor: theme.palette.background.paper,
+  }}
+>
+  <Typography variant="h5" gutterBottom>
+    Repository Health Score
+  </Typography>
+
+  <Typography
+    variant="h2"
+    color="primary"
+    fontWeight="bold"
+  >
+    {healthScore}/100
+  </Typography>
+
+  <Typography
+  variant="h6"
+  color={
+    healthScore >= 80
+      ? "success.main"
+      : healthScore >= 60
+      ? "info.main"
+      : healthScore >= 40
+      ? "warning.main"
+      : "error.main"
+  }
+>
+  Status: {healthStatus}
+</Typography>
+<Box sx={{ mt: 2 }}>
+  <LinearProgress
+    variant="determinate"
+    value={healthScore}
+    sx={{
+      height: 12,
+      borderRadius: 5,
+    }}
+  />
+</Box>
+</Paper>
       <Grid container spacing={3}>
         {/* Pie Chart: Issues vs PRs */}
         <Grid item xs={12} md={6}>
@@ -111,6 +186,39 @@ const Dashboard: React.FC<DashboardProps> = ({ totalIssues, totalPrs, data, them
 
         {/* Bar Chart: Activity by Repository */}
         <Grid item xs={12} md={6}>
+        <Grid item xs={12}>
+          <Paper
+          levation={2}
+          sx={{
+            p: 2,
+            height: 350,
+            backgroundColor: theme.palette.background.paper,
+          }}
+  >
+    <Typography
+      variant="h6"
+      gutterBottom
+      align="center"
+    >
+      Contributor Growth Analytics
+    </Typography>
+
+    <ResponsiveContainer width="100%" height="90%">
+      <BarChart data={contributorGrowthData}>
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis dataKey="month" />
+        <YAxis />
+        <Tooltip />
+        <Legend />
+        <Bar
+          dataKey="contributions"
+          fill={theme.palette.primary.main}
+        />
+      </BarChart>
+    </ResponsiveContainer>
+  </Paper>
+</Grid>
+
           <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)

src/pages/Tracker/Tracker.tsx

@@ -17,6 +17,7 @@ import {
   TableCell,
   TableContainer,
   TableHead,
+  Typography,
   TableRow,
   TablePagination,
   Link,
@@ -78,6 +79,7 @@ const Home: React.FC = () => {
   const [selectedRepo, setSelectedRepo] = useState("");
   const [startDate, setStartDate] = useState("");
   const [endDate, setEndDate] = useState("");
+  const [compareUsername, setCompareUsername] = useState("");
 
   // Fetch data when username, tab, or page changes
   useEffect(() => {
@@ -176,6 +178,15 @@ const Home: React.FC = () => {
               required
               sx={{ flex: 1, minWidth: 150 }}
             />
+
+
+      <TextField
+  label="Compare Username"
+  value={compareUsername}
+  onChange={(e) => setCompareUsername(e.target.value)}
+  sx={{ flex: 1, minWidth: 150 }}
+/>
+
             <TextField
               label="Personal Access Token"
               value={token}
@@ -239,10 +250,32 @@ const Home: React.FC = () => {
                 Fetch Data
             </Button>
           </Box>
-        </form>
-      </Paper>
+          </form>
+          </Paper>
 
       {/* Filters */}
+
+      <Paper elevation={1} sx={{ p: 2, mb: 3 }}>
+  <Typography variant="h6" gutterBottom>
+    Activity Comparison
+  </Typography>
+
+  <Typography>
+    Primary User: {username || "N/A"}
+  </Typography>
+
+  <Typography>
+    Compare User: {compareUsername || "N/A"}
+  </Typography>
+
+  <Typography>
+    Issues: {totalIssues}
+  </Typography>
+
+  <Typography>
+    Pull Requests: {totalPrs}
+  </Typography>
+</Paper>
       <Box sx={{ mb: 2, display: "flex", flexWrap: "wrap", gap: 2 }}>
         <TextField
           label="Search Title"