Add project dashboard

Author: joeldevelops

package-lock.json

@@ -19,8 +19,11 @@
     "@dagrejs/dagre": "^1.1.4",
     "@radix-ui/themes": "^3.1.6",
     "@xyflow/react": "^12.3.6",
+    "chart.js": "^4.4.7",
     "react": "^19.0.0",
+    "react-chartjs-2": "^5.3.0",
     "react-dom": "^19.0.0",
+    "react-icons": "^5.4.0",
     "react-router": "^7.1.1",
     "react-toastify": "^11.0.0"
   }

packages/app/package.json

@@ -17,10 +17,16 @@ import Audit from "./pages/audit/index";
 import AuditFile from "./pages/audit/file";
 import DashboardPage from "./pages/dashboard";
 import ProjectsPage from "./pages/projects";
+import Project from "./pages/project";
 import WorkspacesPage from "./pages/workspaces";
 import Auth from "./pages/auth";
 import Index from "./pages";
 
+const reactFlowPaths = [
+  "/splitConfigure",
+  "/audit",
+];
+
 const router = createBrowserRouter([
   {
     path: "/",
@@ -38,6 +44,18 @@ const router = createBrowserRouter([
     path: "/projects",
     element: <ProjectsPage />,
   },
+  {
+    path: "/project/:id/overview",
+    element: <Project />,
+  },
+  {
+    path: "/project/:id/splitConfigure", // Shows react flow
+    element: <Project />,
+  },
+  {
+    path: "/project/:id/audit", // Shows react flow
+    element: <Project />,
+  },
   {
     path: "/workspaces",
     element: <WorkspacesPage />,
@@ -79,7 +97,12 @@ if (!rootElement) {
 function Main() {
   const themeContext = useContext(ThemeContext);
 
-  const shouldRenderReactFlow = !window.location.pathname.startsWith("/projects");
+  let shouldRenderReactFlow = false;
+  reactFlowPaths.forEach((path) => {
+    if (window.location.pathname.includes(path)) {
+      shouldRenderReactFlow = true;
+    }
+  });
 
   return (
     <Theme appearance={themeContext.theme}>

packages/app/src/main.tsx

@@ -0,0 +1,8 @@
+
+
+export default function ProjectAudit() {
+  return (
+    <div className="flex gap-x-2 min-h-screen text-white bg-background-light dark:bg-background-dark p-2">
+    </div>
+  );
+}

packages/app/src/pages/dashboard/Dashboard.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useState } from "react";
+import { useLocation, useParams } from "react-router";
+import { SegmentedControl } from "@radix-ui/themes";
+
+import ChangeThemeButton from "../../components/ChangeThemeButton"
+import AccountMenu from "../../components/AccountMenu"
+
+import ProjectOverview from "./ProjectOverview";
+import ProjectSplitConfigure from "./ProjectSplitConfigure";
+import ProjectAudit from "./ProjectAudit";
+import { Project } from "../../types";
+
+export default function ProjectPage(props: {
+  project: Project;
+}) {
+  const location = useLocation();
+  const { id } = useParams();
+  
+  const getActiveDefaultValue = () => {
+    if (location.pathname.includes("splitConfigure")) {
+      return "api";
+    } else if (location.pathname.includes("audit")) {
+      return "audit";
+    }
+    return "overview";
+  }
+  
+  const [activePage, setActivePage] = useState(getActiveDefaultValue());
+
+  const handleSegmentedControlChange = (e: any, route: string) => {
+    e.preventDefault();
+    window.location.pathname = route;
+  }
+
+  useEffect(() => {
+    // Force reload on route change
+    setActivePage(getActiveDefaultValue());
+  }, []);
+
+
+  return (
+    <div className="w-full text-text-light dark:text-white bg-secondaryBackground-light dark:bg-secondaryBackground-dark rounded-xl flex flex-col">
+      {/* Top bar with project search on the left and the account icon on the right */}
+      <div className="flex justify-between p-2 border-b-[1px] border-foreground-light dark:border-foreground-dark">
+        <div>
+          <SegmentedControl.Root defaultValue={activePage} size="3" variant="classic" onValueChange={(e) => setActivePage(e)}>
+            <SegmentedControl.Item 
+              value="overview"
+              onClick={(e) => handleSegmentedControlChange(e, `/project/${id}/overview`)}
+              >Overview</SegmentedControl.Item>
+            <SegmentedControl.Item 
+              value="api"
+              onClick={(e) => handleSegmentedControlChange(e, `/project/${id}/splitConfigure`)}
+              >API</SegmentedControl.Item>
+            <SegmentedControl.Item 
+              value="audit"
+              onClick={(e) => handleSegmentedControlChange(e, `/project/${id}/audit`)}
+              >Audit</SegmentedControl.Item>
+          </SegmentedControl.Root>
+        </div>
+        <div className="flex gap-x-2">
+          <ChangeThemeButton />
+          <AccountMenu />
+        </div>
+      </div>
+      <div className="flex flex-col p-4">
+        <div className="flex flex-col gap-y-2">
+          <h1 className="text-2xl font-bold">{props.project.name}</h1>
+        </div>
+      </div>
+      {/* Overview */}
+      {getActiveDefaultValue() === "overview" && <ProjectOverview project={props.project} />}
+      {/* Split Configure */}
+      {getActiveDefaultValue() === "api" && <ProjectSplitConfigure />}
+      {/* Audit */}
+      {getActiveDefaultValue() === "audit" && <ProjectAudit />}
+    </div>
+  );
+}

packages/app/src/pages/project/ProjectAudit.tsx

@@ -0,0 +1,8 @@
+
+
+export default function ProjectSplitConfigure() {
+  return (
+    <div className="flex gap-x-2 min-h-screen text-white bg-background-light dark:bg-background-dark p-2">
+    </div>
+  );
+}

packages/app/src/pages/project/ProjectOverview.tsx

@@ -0,0 +1,54 @@
+import { useParams } from "react-router";
+import AppSidebar from "../../components/Sidebar/AppSidebar";
+import ProjectPage from "./ProjectPage";
+import { type Project } from "../../types";
+
+  const projectsList: Project[] = [{
+    id: 1,
+    name: "Frontend",
+    updatedAt: new Date().toISOString(),
+    createdAt: new Date().toISOString(),
+    language: "TypeScript",
+  },{
+    id: 2,
+    name: "Listener",
+    updatedAt: new Date().toISOString(),
+    createdAt: new Date().toISOString(),
+    language: "javascript",
+  },{
+    id: 3,
+    name: "AI Model",
+    updatedAt: new Date().toISOString(),
+    createdAt: new Date().toISOString(),
+    language: "python",
+  },{
+    id: 4,
+    name: "Backend",
+    updatedAt: new Date().toISOString(),
+    createdAt: new Date().toISOString(),
+    language: "nodejs",
+  },{
+    id: 5,
+    name: "Engine",
+    updatedAt: new Date().toISOString(),
+    createdAt: new Date().toISOString(),
+    language: "csharp",
+  },{
+    id: 6,
+    name: "Optimus",
+    updatedAt: new Date().toISOString(),
+    createdAt: new Date().toISOString(),
+    language: "TypeScript",
+  }, ]
+
+export default function Project() {
+  const { id } = useParams();
+  const project = projectsList.find((project) => project.id === Number(id));
+
+  return (
+    <div className="flex gap-x-2 min-h-screen text-white bg-background-light dark:bg-background-dark p-2">
+      <AppSidebar />
+      <ProjectPage project={project as Project} />
+    </div>
+  );
+}

packages/app/src/pages/project/ProjectPage.tsx

@@ -1,8 +1,18 @@
+import { useNavigate } from 'react-router'
 import { Project } from '../../types'
 
 export default function ProjectCard(project: Project) {
+  const navigate = useNavigate()
+
+  const handleNavigate = (e: any) => {
+    e.preventDefault()
+    navigate(`/project/${project.id}/overview`)
+  }
+
   return (
-    <div className="relative flex flex-col bg-foreground-light dark:bg-foreground-dark rounded-lg border-[1px] border-borderLight dark:border-border-darkPurple cursor-pointer hover:shadow-lg hover:mt-[-2px] hover:mb-[2px] transition-all">
+    <div 
+      onClick={(e) => handleNavigate(e)}
+      className="relative flex flex-col bg-foreground-light dark:bg-foreground-dark rounded-lg border-[1px] border-borderLight dark:border-border-darkPurple cursor-pointer hover:shadow-lg hover:mt-[-2px] hover:mb-[2px] transition-all">
       <div className="absolute top-4 right-4 border-[1px] bg-foreground-light dark:bg-foreground-dark border-border-light dark:border-border-darkGray rounded-xl hover:bg-hover-light dark:hover:bg-hover-mid">
         <button className="px-2 py-1.5 align-middle">
           <svg