forked from github/plane
3c2f5d12ed
* chore: add next theme and initial setup * chore: add dark mode colors to layouts * chore: user general setting page theming * chore: dashboard theming * chore: project page theming * chore: workspace setting page theming * chore: my issue page theming * chore: cmdk theming * chore: change hardcode bg and text color to theme * chore: change color name according to the design * style: fix card in the dashboard * style: fix merge conflict design issues * style: add light high contrast and dark high contrast * style: fix cmd k menu color and selection * feat: change theme from cmdk menu * chore: add multiple theme field to custom theme * chore: removed custom theming * fix: build error --------- Co-authored-by: Saheb Giri <iamsahebgiri@gmail.com>
83 lines
2.8 KiB
TypeScript
83 lines
2.8 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
|
|
import { useRouter } from "next/router";
|
|
|
|
import useSWR, { mutate } from "swr";
|
|
|
|
// layouts
|
|
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
|
|
// services
|
|
import userService from "services/user.service";
|
|
// components
|
|
import {
|
|
CompletedIssuesGraph,
|
|
IssuesList,
|
|
IssuesPieChart,
|
|
IssuesStats,
|
|
} from "components/workspace";
|
|
// types
|
|
import type { NextPage } from "next";
|
|
// fetch-keys
|
|
import { USER_WORKSPACE_DASHBOARD } from "constants/fetch-keys";
|
|
|
|
const WorkspacePage: NextPage = () => {
|
|
const [month, setMonth] = useState(new Date().getMonth() + 1);
|
|
|
|
const router = useRouter();
|
|
const { workspaceSlug } = router.query;
|
|
|
|
const { data: workspaceDashboardData } = useSWR(
|
|
workspaceSlug ? USER_WORKSPACE_DASHBOARD(workspaceSlug as string) : null,
|
|
workspaceSlug ? () => userService.userWorkspaceDashboard(workspaceSlug as string, month) : null
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (!workspaceSlug) return;
|
|
|
|
mutate(USER_WORKSPACE_DASHBOARD(workspaceSlug as string));
|
|
}, [month, workspaceSlug]);
|
|
|
|
return (
|
|
<WorkspaceAuthorizationLayout noHeader>
|
|
<div className="h-full w-full">
|
|
<div className="flex flex-col gap-8">
|
|
<div
|
|
className="flex flex-col bg-brand-sidebar justify-between gap-x-2 gap-y-6 rounded-lg px-8 py-6 text-brand-muted-1 md:flex-row md:items-center md:py-3"
|
|
// style={{ background: "linear-gradient(90deg, #8e2de2 0%, #4a00e0 100%)" }}
|
|
>
|
|
<p className="font-semibold">
|
|
Plane is open source, support us by starring us on GitHub.
|
|
</p>
|
|
<div className="flex items-center gap-2">
|
|
{/* <a href="#" target="_blank" rel="noopener noreferrer">
|
|
View roadmap
|
|
</a> */}
|
|
<a
|
|
href="https://github.com/makeplane/plane"
|
|
target="_blank"
|
|
className="rounded-md border-2 border-brand-base font-medium px-3 py-1.5 text-sm duration-300"
|
|
rel="noopener noreferrer"
|
|
>
|
|
Star us on GitHub
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<IssuesStats data={workspaceDashboardData} />
|
|
<div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
|
|
<IssuesList issues={workspaceDashboardData?.overdue_issues} type="overdue" />
|
|
<IssuesList issues={workspaceDashboardData?.upcoming_issues} type="upcoming" />
|
|
<IssuesPieChart groupedIssues={workspaceDashboardData?.state_distribution} />
|
|
<CompletedIssuesGraph
|
|
issues={workspaceDashboardData?.completed_issues}
|
|
month={month}
|
|
setMonth={setMonth}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</WorkspaceAuthorizationLayout>
|
|
);
|
|
};
|
|
|
|
export default WorkspacePage;
|