+
+ {
+ fgRef.current?.zoomToFit(400);
+ }}
+
+ d3VelocityDecay={0.9} // fast stop
+ d3AlphaDecay={0.1} // instant stable
+
+ nodeLabel={(node: any) =>
+ node.type === "repo"
+ ? `📦 ${node.id}`
+ : `👤 ${node.id}`
+ }
+
+ // NODE DRAW (DP + NAME)
+ nodeCanvasObject={(node: any, ctx, globalScale) => {
+ const size =
+ node.type === "repo"
+ ? 10
+ : 6;
+
+ const fontSize = 10 / globalScale;
+
+ if (node.type === "user" && node.img) {
+ const img = new Image();
+ img.src = node.img;
+
+ ctx.save();
+ ctx.beginPath();
+ ctx.arc(node.x, node.y, size, 0, 2 * Math.PI);
+ ctx.closePath();
+ ctx.clip();
+ ctx.drawImage(img, node.x - size, node.y - size, size * 2, size * 2);
+ ctx.restore();
+ } else {
+ ctx.beginPath();
+ ctx.arc(node.x, node.y, size, 0, 2 * Math.PI);
+ ctx.fillStyle = "#22c55e";
+ ctx.fill();
+ }
+
+ // 🏷 NAME
+ ctx.font = `${fontSize}px Inter`;
+ ctx.fillStyle = "#e2e8f0";
+ ctx.fillText(node.id, node.x + size + 2, node.y);
+ }}
+
+ // 🔗 LINKS
+ linkWidth={(link: any) => Math.log(link.weight + 1)}
+
+ linkColor={() => "#22c55e"}
+
+ linkDirectionalParticles={1}
+ linkDirectionalParticleSpeed={0.002}
+ linkDirectionalParticleWidth={1}
+ linkDirectionalParticleColor={() => "#22c55e"}
+ />
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/HealthScore.tsx b/src/components/HealthScore.tsx
new file mode 100644
index 0000000..dae57f4
--- /dev/null
+++ b/src/components/HealthScore.tsx
@@ -0,0 +1,28 @@
+export default function HealthScore({ score, label }: any) {
+ return (
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/Input/OrgInput.tsx b/src/components/Input/OrgInput.tsx
new file mode 100644
index 0000000..3418c63
--- /dev/null
+++ b/src/components/Input/OrgInput.tsx
@@ -0,0 +1,22 @@
+import { useState } from "react";
+
+export default function OrgInput({ onSubmit }: any) {
+ const [value , setValue] = useState("Aossie-Org")
+ return (
+ + Organization Health Score +
+ +
+
+ {score}/100
+
+
+ {label}
+
+
+
+ {/* Progress bar */}
+
+
+
+
+
+ setValue(e.target.value)}
+ />
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/Insights/Insightpanel.tsx b/src/components/Insights/Insightpanel.tsx
new file mode 100644
index 0000000..71043ff
--- /dev/null
+++ b/src/components/Insights/Insightpanel.tsx
@@ -0,0 +1,16 @@
+
+import StatCard from "../Cards/statCard";
+
+export default function InsightPanel({ data }: { data: any }) {
+ return (
+ <>
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/Tables/RepoTable.tsx b/src/components/Tables/RepoTable.tsx
new file mode 100644
index 0000000..3266137
--- /dev/null
+++ b/src/components/Tables/RepoTable.tsx
@@ -0,0 +1,80 @@
+import { useState } from "react";
+
+export default function RepoTable({ repos }: any) {
+ const [sortKey, setSortKey] = useState("stars");
+
+ const sorted = [...repos].sort((a, b) => {
+ if (sortKey === "stars") return b.stargazers_count - a.stargazers_count;
+ if (sortKey === "forks") return b.forks_count - a.forks_count;
+ return 0;
+ });
+
+ return (
+
+
+ {/* HEADER */}
+
+ );
+}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index e0dbee4..20f3253 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,13 @@
+@import "tailwindcss";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+ @apply bg-slate-900 text-white;
+}
+
:root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
diff --git a/src/layout/DashboardLayout.tsx b/src/layout/DashboardLayout.tsx
new file mode 100644
index 0000000..8353d79
--- /dev/null
+++ b/src/layout/DashboardLayout.tsx
@@ -0,0 +1,23 @@
+import Sidebar from "./Sidebar";
+import Topbar from "./Topbar";
+
+export default function DashboardLayout({ children, orgInput }: any) {
+ return (
+
+
+
+ {/* TABLE */}
+ + Repository List +
+ + {/* SORT BUTTONS */} +
+
+
+
+
+
+
+
+
+
+
+ | Repository | +Stars | +Forks | +
|---|---|---|
| {r.name} | ++ {r.stargazers_count} + | ++ {r.forks_count} + | +
+
+ {/* Sidebar */}
+
+ );
+}
\ No newline at end of file
diff --git a/src/layout/Sidebar.tsx b/src/layout/Sidebar.tsx
new file mode 100644
index 0000000..451c955
--- /dev/null
+++ b/src/layout/Sidebar.tsx
@@ -0,0 +1,58 @@
+
+import { Link, useLocation } from "react-router-dom";
+
+
+export default function Sidebar() {
+
+ const location = useLocation();
+
+ return (
+
+
+
+
+
+
+ {children}
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/layout/Topbar.tsx b/src/layout/Topbar.tsx
new file mode 100644
index 0000000..d8095f1
--- /dev/null
+++ b/src/layout/Topbar.tsx
@@ -0,0 +1,138 @@
+import { useEffect, useState } from "react";
+
+export default function Topbar({ orgInput }: any) {
+ const [orgName, setOrgName] = useState("");
+ const [logo, setLogo] = useState("");
+ const [debouncedInput, setDebouncedInput] = useState("");
+
+ // Debounce
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ setDebouncedInput(orgInput);
+ }, 500); // 500ms delay
+
+ return () => clearTimeout(timer);
+ }, [orgInput]);
+
+ // API call only after debounce
+ useEffect(() => {
+ if (!debouncedInput) return;
+
+ const orgs = debouncedInput.split(",").map((o: string) => o.trim());
+
+ // name update
+ setOrgName(orgs.join(" + "));
+
+ // fetch only first org logo
+ fetch(`https://api.github.com/orgs/${orgs[0]}`)
+ .then((res) => {
+ if (!res.ok) {
+ throw new Error("Org not found");
+ }
+ return res.json();
+ })
+ .then((data) => {
+ setLogo(data.avatar_url);
+ })
+ .catch((err) => {
+ console.error("Error fetching org:", err);
+ setLogo("");
+ });
+
+ }, [debouncedInput]);
+
+ return (
+
+
+
+
+ 
+
+
+
+
+
+ ⚙ Settings
+
+
+
+
+ {/* LEFT */}
+
+ );
+}
+
+// import { useEffect, useState } from "react";
+
+// export default function Topbar({ orgInput }: any) {
+// const [orgName, setOrgName] = useState("");
+// const [logo, setLogo] = useState("");
+// const [debouncedInput, setDebouncedInput] = useState("");
+
+// // ✅ STEP 1: Debounce (IMPORTANT)
+// useEffect(() => {
+// const timer = setTimeout(() => {
+// setDebouncedInput(orgInput);
+// }, 500); // 500ms delay
+
+// return () => clearTimeout(timer);
+// }, [orgInput]);
+
+// // ✅ STEP 2: API call only after debounce
+// useEffect(() => {
+// if (!debouncedInput) return;
+
+// const orgs = debouncedInput.split(",").map((o: string) => o.trim());
+
+// // 👉 name update
+// setOrgName(orgs.join(" + "));
+
+// // 👉 fetch only first org logo
+// fetch(`https://api.github.com/orgs/${orgs[0]}`)
+// .then((res) => {
+// if (!res.ok) {
+// throw new Error("Org not found");
+// }
+// return res.json();
+// })
+// .then((data) => {
+// setLogo(data.avatar_url);
+// })
+// .catch((err) => {
+// console.error("Error fetching org:", err);
+// setLogo(""); // reset if error
+// });
+
+// }, [debouncedInput]);
+
+// return (
+//
+ {logo ? (
+ 
+ ) : (
+
+ )}
+
+
+ + {orgName || "OrgExplorer"} +
+
+
+// {/* LEFT */}
+//
+// );
+// }
diff --git a/src/main.tsx b/src/main.tsx
index bef5202..735710d 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,25 @@
+// import { StrictMode } from 'react'
+// import { createRoot } from 'react-dom/client'
+// import './index.css'
+// import App from './App.tsx'
+
+// createRoot(document.getElementById('root')!).render(
+//
+// {logo ? (
+//
+// ) : (
+//
+// )}
+
+//
+
+// {/* RIGHT */}
+// +// {orgName || "OrgExplorer"} +//
+//
+// 🔔
+//
+//
+//
+// Tom Cook
+//
+//
+ No data found 🚫
+ Please analyze organizations first. +
+ );
+ }
+
+ return (
+ + Please analyze organizations first. +
+
+
+ );
+}
diff --git a/src/pages/Overview.tsx b/src/pages/Overview.tsx
new file mode 100644
index 0000000..fbcb747
--- /dev/null
+++ b/src/pages/Overview.tsx
@@ -0,0 +1,118 @@
+import { useState, useEffect } from "react";
+import OrgInput from "../components/Input/OrgInput";
+import InsightPanel from "../components/Insights/Insightpanel";
+import ActivityChart from "../components/Charts/ActivityChart";
+import { fetchOrgRepos } from "../services/githubService";
+import { mergeRepos } from "../utils/mergeOrgs";
+import { getInsights } from "../utils/insightEngine";
+import HealthScore from "../components/HealthScore";
+import { calculateOrgHealthScore } from "../utils/calculateScore";
+import type { Repo, Insight } from "../types/github";
+import { generateInsights } from "../utils/insights";
+
+
+// PROPS TYPE
+type Props = {
+ orgInput: string;
+ setOrgInput: React.Dispatch+ Contributor Collaboration Network 🌐 +
+ ++ Visualizes relationships between repositories and contributors across multiple organizations. +
+
+
+ {/* INPUT */}
+
+ );
+}
diff --git a/src/pages/Repositories.tsx b/src/pages/Repositories.tsx
new file mode 100644
index 0000000..7fa2352
--- /dev/null
+++ b/src/pages/Repositories.tsx
@@ -0,0 +1,32 @@
+import RepoTable from "../components/Tables/RepoTable";
+import { exportCSV } from "../utils/exportCSV";
+
+export default function Repositories() {
+ const repos = JSON.parse(localStorage.getItem("repos") || "[]");
+
+ return (
+ <>
+ Loading...
} + + {data &&
+
+
+ + Insights +
+ +-
+ {insights.map((insight, i) => (
+
- • {insight} + ))} +
+
+
+
+ {/* CHART + EXPORT */}
+ {repos.length > 0 && (
+
+
+ {/* CHART */}
+
+ )}
+
+
+
+ {/* EXPORT */}
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/services/githubService.ts b/src/services/githubService.ts
new file mode 100644
index 0000000..287508d
--- /dev/null
+++ b/src/services/githubService.ts
@@ -0,0 +1,25 @@
+const BASE = "https://api.github.com";
+
+const TOKEN = import.meta.env.VITE_GITHUB_TOKEN;
+
+export const fetchOrgRepos = async (org: string) => {
+ const res = await fetch(`${BASE}/orgs/${org}/repos?per_page=100`, {
+ headers: {
+ Authorization: `token ${TOKEN}`
+ }
+ });
+
+ if (!res.ok) throw new Error("API Error");
+ return res.json();
+};
+
+export const fetchRepoContributors = async (url: string) => {
+ const res = await fetch(url, {
+ headers: {
+ Authorization: `token ${TOKEN}`
+ }
+ });
+
+ if (!res.ok) throw new Error("Contributor API Error");
+ return res.json();
+};
\ No newline at end of file
diff --git a/src/types/github.ts b/src/types/github.ts
new file mode 100644
index 0000000..e4bac02
--- /dev/null
+++ b/src/types/github.ts
@@ -0,0 +1,16 @@
+export interface Repo {
+ id: number;
+ name: string;
+ stargazers_count: number;
+ forks_count: number;
+ updated_at: string;
+}
+
+export interface Insight {
+ totalRepos: number;
+ totalStars: number;
+ totalForks: number;
+ inactivePercent: string;
+ topRepos : Repo[];
+ insights: string[];
+}
\ No newline at end of file
diff --git a/src/utils/calculateScore.ts b/src/utils/calculateScore.ts
new file mode 100644
index 0000000..ccc87bb
--- /dev/null
+++ b/src/utils/calculateScore.ts
@@ -0,0 +1,48 @@
+export const calculateOrgHealthScore = (repos: any[]) => {
+ if (!repos || repos.length === 0) return { score: 0, label: "No Data" };
+
+ const totalRepos = repos.length;
+
+ const activeRepos = repos.filter(repo => {
+ const days =
+ (Date.now() - new Date(repo.pushed_at).getTime()) /
+ (1000 * 60 * 60 * 24);
+ return days < 30;
+ }).length;
+
+ const avgStars =
+ repos.reduce((sum, r) => sum + r.stargazers_count, 0) / totalRepos;
+
+ const avgForks =
+ repos.reduce((sum, r) => sum + r.forks_count, 0) / totalRepos;
+
+ const staleRepos = repos.filter(repo => {
+ const days =
+ (Date.now() - new Date(repo.pushed_at).getTime()) /
+ (1000 * 60 * 60 * 24);
+ return days > 180;
+ }).length;
+
+ let score = 0;
+
+ // Activity score (40)
+ score += (activeRepos / totalRepos) * 40;
+
+ // Popularity score (30)
+ score += Math.min(avgStars, 100) * 0.3;
+
+ // Engagement score (20)
+ score += Math.min(avgForks, 50) * 0.4;
+
+ // Penalty (10)
+ score -= (staleRepos / totalRepos) * 10;
+
+ score = Math.round(score);
+
+ let label = "Poor";
+ if (score > 75) label = "Excellent 🚀";
+ else if (score > 50) label = "Good 👍";
+ else if (score > 30) label = "Average ⚠️";
+
+ return { score, label };
+};
\ No newline at end of file
diff --git a/src/utils/exportCSV.ts b/src/utils/exportCSV.ts
new file mode 100644
index 0000000..573190b
--- /dev/null
+++ b/src/utils/exportCSV.ts
@@ -0,0 +1,15 @@
+export const exportCSV = (repos: any[]) => {
+ const rows = repos.map(r =>
+ `${r.name},${r.stargazers_count},${r.forks_count}`
+ );
+
+ const csv = "Name,Stars,Forks\n" + rows.join("\n");
+
+ const blob = new Blob([csv]);
+ const url = URL.createObjectURL(blob);
+
+ const a = document.createElement("a");
+ a.href = url;
+ a.download = "repos.csv";
+ a.click();
+};
\ No newline at end of file
diff --git a/src/utils/insightEngine.ts b/src/utils/insightEngine.ts
new file mode 100644
index 0000000..3848389
--- /dev/null
+++ b/src/utils/insightEngine.ts
@@ -0,0 +1,90 @@
+import type { Repo, Insight } from "../types/github";
+
+export interface InsightResult extends Insight {
+ insights: string[];
+}
+
+export const getInsights = (repos: Repo[]): InsightResult => {
+ const now = new Date();
+
+ const inactive = repos.filter(r =>
+ (now.getTime() - new Date(r.updated_at).getTime()) >
+ 90 * 24 * 60 * 60 * 1000
+ );
+
+ const totalStars = repos.reduce((sum, r) => sum + r.stargazers_count, 0);
+ const totalForks = repos.reduce((s, r) => s + r.forks_count, 0);
+
+ const topRepos = [...repos]
+ .sort((a, b) => b.stargazers_count - a.stargazers_count)
+ .slice(0, 5);
+
+ const inactivePercent = (inactive.length / repos.length) * 100;
+
+ // NEW: INSIGHT GENERATION
+ const insights: string[] = [];
+
+ // Inactive repos insight
+ if (inactivePercent > 50) {
+ insights.push("⚠ More than 50% repositories are inactive → maintenance risk");
+ } else if (inactivePercent > 30) {
+ insights.push("⚠ Significant number of repositories are inactive");
+ } else {
+ insights.push("✅ Most repositories are actively maintained");
+ }
+
+ // Star concentration insight
+ if (topRepos.length > 0) {
+ const topStar = topRepos[0].stargazers_count;
+
+ if (topStar > totalStars * 0.5) {
+ insights.push("⚡ One repository dominates more than 50% of total stars");
+ } else if (topStar > totalStars * 0.3) {
+ insights.push("⚡ A few repositories dominate the ecosystem");
+ }
+ }
+
+ // Fork vs Star ratio insight
+ if (totalStars > 0) {
+ const ratio = totalForks / totalStars;
+
+ if (ratio > 0.6) {
+ insights.push("🔁 High fork-to-star ratio → strong developer engagement");
+ } else if (ratio < 0.2) {
+ insights.push("📉 Low fork activity compared to stars");
+ }
+ }
+
+ // Recently active repos insight
+ const recent = repos.filter(r =>
+ (now.getTime() - new Date(r.updated_at).getTime()) <
+ 30 * 24 * 60 * 60 * 1000
+ );
+
+ if (recent.length > repos.length * 0.5) {
+ insights.push("🚀 High recent activity across repositories");
+ } else if (recent.length < repos.length * 0.2) {
+ insights.push("🐢 Low recent activity → possible slowdown");
+ }
+
+ // Repo size distribution insight
+ const lowStarRepos = repos.filter(r => r.stargazers_count < 10);
+
+ if (lowStarRepos.length > repos.length * 0.6) {
+ insights.push("📦 Majority of repositories have low visibility (<10 stars)");
+ }
+
+ // Growth potential insight
+ if (totalStars > 1000 && inactivePercent < 30) {
+ insights.push("📈 Organization shows strong growth potential");
+ }
+
+ return {
+ totalRepos: repos.length,
+ totalStars,
+ totalForks,
+ inactivePercent: inactivePercent.toFixed(1),
+ topRepos,
+ insights
+ };
+};
\ No newline at end of file
diff --git a/src/utils/insights.ts b/src/utils/insights.ts
new file mode 100644
index 0000000..2565c00
--- /dev/null
+++ b/src/utils/insights.ts
@@ -0,0 +1,63 @@
+export function generateInsights(repos: any[]) {
+ if (!repos || repos.length === 0) return [];
+
+ const insights: string[] = [];
+
+ // Most starred repo
+ const topRepo = [...repos].sort(
+ (a, b) => b.stargazers_count - a.stargazers_count
+ )[0];
+
+ insights.push(`⭐ Most popular repo: ${topRepo.name}`);
+
+ // Low activity repos
+ const lowActivity = repos.filter((r) => r.stargazers_count < 5);
+ if (lowActivity.length > 0) {
+ insights.push(`⚠️ ${lowActivity.length} repos have very low stars`);
+ }
+
+ // Fork heavy repos
+ const forkHeavy = repos.filter((r) => r.forks_count > r.stargazers_count);
+ if (forkHeavy.length > 0) {
+ insights.push(`🍴 Some repos are fork-heavy but not popular`);
+ }
+
+ // Recently updated
+ const recent = repos.filter((r) => {
+ const updated = new Date(r.updated_at);
+ const now = new Date();
+ return (now.getTime() - updated.getTime()) / (1000 * 60 * 60 * 24) < 30;
+ });
+
+ if (recent.length > repos.length / 2) {
+ insights.push(`🚀 Org is actively maintained (many recent updates)`);
+ }
+
+ // Stale repos
+ const stale = repos.filter((r) => {
+ const updated = new Date(r.updated_at);
+ const now = new Date();
+ return (now.getTime() - updated.getTime()) / (1000 * 60 * 60 * 24) > 180;
+ });
+
+ if (stale.length > 0) {
+ insights.push(`💀 ${stale.length} repos are stale (>6 months no updates)`);
+ }
+
+ // Language dominance
+ const langMap: any = {};
+ repos.forEach((r) => {
+ if (!r.language) return;
+ langMap[r.language] = (langMap[r.language] || 0) + 1;
+ });
+
+ const topLang = Object.keys(langMap).sort(
+ (a, b) => langMap[b] - langMap[a]
+ )[0];
+
+ if (topLang) {
+ insights.push(`💻 Most used language: ${topLang}`);
+ }
+
+ return insights;
+}
\ No newline at end of file
diff --git a/src/utils/mergeOrgs.ts b/src/utils/mergeOrgs.ts
new file mode 100644
index 0000000..cb1e0a7
--- /dev/null
+++ b/src/utils/mergeOrgs.ts
@@ -0,0 +1,13 @@
+import type { Repo } from "../types/github";
+
+export const mergeRepos = (allRepos: Repo[][]): Repo[] => {
+ const map = new Map+ Repositories +
+ + {!repos.length ? ( ++ No data found. Please go to Dashboard and analyze org. +
+ ) : ( +