Skip to content

Commit f362e65

Browse files
joeldevelopsjoeldevelops
committed
Begin work on Dashboard
1 parent 26a8d4e commit f362e65

File tree

7 files changed

+106
-6
lines changed

7 files changed

+106
-6
lines changed

‎packages/app/src/components/Sidebar/AppSidebar.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,20 @@ export default function AppSidebar() {
3838

3939
{/* Navigation */}
4040
<div className="grow flex flex-col mt-8 gap-y-2">
41+
<button
42+
onClick={() => navigate("/dashboard")}
43+
className={`flex gap-x-2 p-2 rounded-lg hover:bg-hover-light dark:hover:bg-hover-dark transition-all ${
44+
location.pathname.includes("/dashboard") ? "bg-foreground-light dark:bg-foreground-dark text-text-lightHighlight dark:text-text-darkHighlight" : "text-text-gray"
45+
}`}>
46+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
47+
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 4V11H9V4H4ZM9.00125 11C9.00128 10.9999 9.00127 10.9999 9.00121 11L9.00125 11ZM2 4C2 2.89543 2.89543 2 4 2H9C10.1046 2 11 2.89543 11 4V11C11 12.1046 10.1046 13 9 13H4C2.89543 13 2 12.1046 2 11V4Z" fill="currentColor"/>
48+
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 4V7H20V4H15ZM14.9988 6.99995C14.9987 6.99995 14.9987 6.99995 14.9988 6.99995L14.9988 6.99995ZM13 4C13 2.89543 13.8954 2 15 2H20C21.1046 2 22 2.89543 22 4V7C22 8.10457 21.1046 9 20 9H15C13.8954 9 13 8.10457 13 7V4Z" fill="currentColor"/>
49+
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 13V20H20V13H15ZM20.0012 20C20.0013 19.9999 20.0013 19.9999 20.0012 20L20.0012 20ZM13 13C13 11.8954 13.8954 11 15 11H20C21.1046 11 22 11.8954 22 13V20C22 21.1046 21.1046 22 20 22H15C13.8954 22 13 21.1046 13 20V13Z" fill="currentColor"/>
50+
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 17V20H9V17H4ZM3.99879 20C3.99873 19.9999 3.99872 19.9999 3.99875 20L3.99879 20ZM2 17C2 15.8954 2.89543 15 4 15H9C10.1046 15 11 15.8954 11 17V20C11 21.1046 10.1046 22 9 22H4C2.89543 22 2 21.1046 2 20V17Z" fill="currentColor"/>
51+
</svg>
52+
<p className="text-md">Dashboard</p>
53+
</button>
54+
4155
<button
4256
onClick={() => navigate("/projects")}
4357
className={`flex gap-x-2 p-2 rounded-lg hover:bg-hover-light dark:hover:bg-hover-dark transition-all ${

‎packages/app/src/main.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { StoreProvider } from "./contexts/StoreContext";
1515
import BaseAudit from "./pages/audit";
1616
import Audit from "./pages/audit/index";
1717
import AuditFile from "./pages/audit/file";
18+
import DashboardPage from "./pages/dashboard";
1819
import ProjectsPage from "./pages/projects";
1920
import WorkspacesPage from "./pages/workspaces";
2021
import Auth from "./pages/auth";
@@ -29,6 +30,10 @@ const router = createBrowserRouter([
2930
path: "/splitConfigure",
3031
element: <SplitConfigure />,
3132
},
33+
{
34+
path: "/dashboard",
35+
element: <DashboardPage />,
36+
},
3237
{
3338
path: "/projects",
3439
element: <ProjectsPage />,

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import ChangeThemeButton from "../../components/ChangeThemeButton"
2+
import DownloadReportDialog from "./DownloadReportDialog"
3+
import AccountMenu from "../../components/AccountMenu"
4+
5+
export default function Dashboard() {
6+
7+
8+
return (
9+
<div className="w-full text-text-light dark:text-white bg-secondaryBackground-light dark:bg-secondaryBackground-dark rounded-xl flex flex-col">
10+
{/* Top bar with project search on the left and the account icon on the right */}
11+
<div className="flex justify-between p-2 border-b-[1px] border-foreground-light dark:border-foreground-dark">
12+
<div></div>
13+
<div className="flex gap-x-2">
14+
<ChangeThemeButton />
15+
<DownloadReportDialog />
16+
<AccountMenu />
17+
</div>
18+
</div>
19+
</div>
20+
)
21+
}

‎packages/app/src/pages/dashboard/DownloadReportDialog.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import {
2+
Button,
3+
Dialog,
4+
TextField
5+
} from "@radix-ui/themes";
6+
import { useState } from "react";
7+
8+
export default function DownloadReportDialog() {
9+
const [open, setOpen] = useState(false);
10+
11+
return (
12+
<Dialog.Root open={open} onOpenChange={setOpen}>
13+
<Dialog.Trigger>
14+
<button className="text-md font-bold flex gap-x-2 bg-primary-light dark:bg-primary-dark hover:bg-primary-hoverLight dark:hover:bg-primary-hoverDark rounded-lg px-3 py-2.5 transition-all">
15+
<svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="my-auto">
16+
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 14C3.55228 14 4 14.4477 4 15V19C4 19.2652 4.10536 19.5196 4.29289 19.7071C4.48043 19.8946 4.73478 20 5 20H19C19.2652 20 19.5196 19.8946 19.7071 19.7071C19.8946 19.5196 20 19.2652 20 19V15C20 14.4477 20.4477 14 21 14C21.5523 14 22 14.4477 22 15V19C22 19.7957 21.6839 20.5587 21.1213 21.1213C20.5587 21.6839 19.7957 22 19 22H5C4.20435 22 3.44129 21.6839 2.87868 21.1213C2.31607 20.5587 2 19.7956 2 19V15C2 14.4477 2.44772 14 3 14Z" fill="currentColor"/>
17+
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289L12 13.5858L16.2929 9.29289C16.6834 8.90237 17.3166 8.90237 17.7071 9.29289C18.0976 9.68342 18.0976 10.3166 17.7071 10.7071L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L6.29289 10.7071C5.90237 10.3166 5.90237 9.68342 6.29289 9.29289Z" fill="currentColor"/>
18+
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C12.5523 2 13 2.44772 13 3V15C13 15.5523 12.5523 16 12 16C11.4477 16 11 15.5523 11 15V3C11 2.44772 11.4477 2 12 2Z" fill="currentColor"/>
19+
</svg>
20+
Download Report
21+
</button>
22+
</Dialog.Trigger>
23+
<Dialog.Content className="bg-secondarySurface-light text-text-light dark:bg-secondarySurface-dark dark:text-text-dark border-0">
24+
<Dialog.Title>
25+
<div className="flex justify-end">
26+
<Dialog.Close>
27+
<Button variant="ghost" className="hover:bg-transparent cursor-pointer">
28+
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
29+
<path d="M18.7071 7.20711C19.0976 6.81658 19.0976 6.18342 18.7071 5.79289C18.3166 5.40237 17.6834 5.40237 17.2929 5.79289L12 11.0858L6.70711 5.79289C6.31658 5.40237 5.68342 5.40237 5.29289 5.79289C4.90237 6.18342 4.90237 6.81658 5.29289 7.20711L10.5858 12.5L5.29289 17.7929C4.90237 18.1834 4.90237 18.8166 5.29289 19.2071C5.68342 19.5976 6.31658 19.5976 6.70711 19.2071L12 13.9142L17.2929 19.2071C17.6834 19.5976 18.3166 19.5976 18.7071 19.2071C19.0976 18.8166 19.0976 18.1834 18.7071 17.7929L13.4142 12.5L18.7071 7.20711Z" fill="currentColor"/>
30+
</svg>
31+
</Button>
32+
</Dialog.Close>
33+
</div>
34+
</Dialog.Title>
35+
<h1 className="text-3xl font-bold text-center p-4">Download Benchmark Report</h1>
36+
<p className="text-lg text-text-gray text-center pb-3">Create a new report</p>
37+
38+
</Dialog.Content>
39+
</Dialog.Root>
40+
);
41+
}

‎packages/app/src/pages/dashboard/index.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import AppSidebar from "../../components/Sidebar/AppSidebar";
2+
import Dashboard from "./Dashboard";
3+
4+
export default function DashboardPage() {
5+
return (
6+
<div className="flex gap-x-2 min-h-screen text-white bg-background-light dark:bg-background-dark p-2">
7+
<AppSidebar />
8+
<Dashboard />
9+
</div>
10+
);
11+
}

‎packages/app/src/pages/projects/ProjectsList.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useEffect, useState } from "react";
2-
2+
import { SegmentedControl } from "@radix-ui/themes";
33
import AccountMenu from "../../components/AccountMenu";
44
import NewProjectDialog from "./NewProjectDialog";
55
import ProjectCard from "./ProjectCard";
@@ -45,7 +45,7 @@ export default function ProjectsList() {
4545
createdAt: new Date().toISOString(),
4646
language: "TypeScript",
4747
}, ]
48-
const [projects, setProjects] = useState<Project[]>([]);
48+
const [projects, setProjects] = useState<Project[]>(projectsList);
4949
const [loading] = useState(false);
5050
const [searchText, setSearchText] = useState("");
5151

@@ -62,7 +62,7 @@ export default function ProjectsList() {
6262
// Filter the projects based on the search text
6363
useEffect(() => {
6464
if (!searchText) {
65-
setProjects([]);
65+
setProjects(projectsList);
6666
return;
6767
}
6868
const filteredProjects = projectsList.filter((project) => {
@@ -98,7 +98,11 @@ export default function ProjectsList() {
9898
<p className="text-text-gray">Here is something cool about my cool project</p>
9999
</div>
100100
<div className="pt-4 pb-3">
101-
<div><p>All | Oldest | Latest</p></div>
101+
<SegmentedControl.Root defaultValue="all">
102+
<SegmentedControl.Item value="all">All</SegmentedControl.Item>
103+
<SegmentedControl.Item value="oldest">Oldest</SegmentedControl.Item>
104+
<SegmentedControl.Item value="latest">Latest</SegmentedControl.Item>
105+
</SegmentedControl.Root>
102106
</div>
103107
{loading ? (
104108
<p>Loading...</p>

‎packages/app/src/pages/workspaces/WorkspacesList.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useEffect, useState } from "react";
2-
import { Table } from "@radix-ui/themes";
2+
import { SegmentedControl, Table } from "@radix-ui/themes";
33

44
import AccountMenu from "../../components/AccountMenu";
55
import NewWorkspaceDialog from "./NewWorkspaceDialog";
@@ -63,7 +63,11 @@ export default function WorkspacesList() {
6363
<p className="text-text-gray">View and manage workspaces you have access to</p>
6464
</div>
6565
<div className="pt-4 pb-3">
66-
<div><p>All | Oldest | Latest</p></div>
66+
<SegmentedControl.Root defaultValue="all">
67+
<SegmentedControl.Item value="all">All</SegmentedControl.Item>
68+
<SegmentedControl.Item value="oldest">Oldest</SegmentedControl.Item>
69+
<SegmentedControl.Item value="latest">Latest</SegmentedControl.Item>
70+
</SegmentedControl.Root>
6771
</div>
6872
{loading ? (
6973
<p>Loading...</p>

0 commit comments

Comments
 (0)