mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
style: new workspace dashboard design (#454)
* style: workspace dashboard * feat: activity graph
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
8370511a66
commit
96ad751e11
@ -12,9 +12,11 @@ type Props = {
|
||||
className?: string;
|
||||
ellipsis?: boolean;
|
||||
verticalEllipsis?: boolean;
|
||||
height?: "sm" | "md" | "rg" | "lg";
|
||||
width?: "sm" | "md" | "lg" | "xl" | "auto";
|
||||
textAlignment?: "left" | "center" | "right";
|
||||
noBorder?: boolean;
|
||||
noChevron?: boolean;
|
||||
optionsPosition?: "left" | "right";
|
||||
customButton?: JSX.Element;
|
||||
};
|
||||
@ -33,9 +35,11 @@ const CustomMenu = ({
|
||||
className = "",
|
||||
ellipsis = false,
|
||||
verticalEllipsis = false,
|
||||
height = "md",
|
||||
width = "auto",
|
||||
textAlignment,
|
||||
noBorder = false,
|
||||
noChevron = false,
|
||||
optionsPosition = "right",
|
||||
customButton,
|
||||
}: Props) => (
|
||||
@ -77,7 +81,7 @@ const CustomMenu = ({
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
{!noBorder && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
|
||||
{!noChevron && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
|
||||
</Menu.Button>
|
||||
)}
|
||||
</div>
|
||||
@ -93,8 +97,18 @@ const CustomMenu = ({
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items
|
||||
className={`absolute z-20 mt-1 whitespace-nowrap rounded-md bg-white p-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
|
||||
className={`absolute z-20 mt-1 overflow-y-scroll whitespace-nowrap rounded-md bg-white p-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
|
||||
optionsPosition === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"
|
||||
} ${
|
||||
height === "sm"
|
||||
? "max-h-28"
|
||||
: height === "md"
|
||||
? "max-h-44"
|
||||
: height === "rg"
|
||||
? "max-h-56"
|
||||
: height === "lg"
|
||||
? "max-h-80"
|
||||
: ""
|
||||
} ${
|
||||
width === "sm"
|
||||
? "w-10"
|
||||
|
||||
156
apps/app/components/workspace/activity-graph.tsx
Normal file
156
apps/app/components/workspace/activity-graph.tsx
Normal file
@ -0,0 +1,156 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import useSWR from "swr";
|
||||
|
||||
// services
|
||||
import userService from "services/user.service";
|
||||
// ui
|
||||
import { Tooltip } from "components/ui";
|
||||
// helpers
|
||||
import { renderDateFormat, renderShortNumericDateFormat } from "helpers/date-time.helper";
|
||||
// fetch-keys
|
||||
import { USER_ACTIVITY } from "constants/fetch-keys";
|
||||
// constants
|
||||
import { DAYS, MONTHS } from "constants/project";
|
||||
|
||||
export const ActivityGraph = () => {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [width, setWidth] = useState(0);
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
const { data: userActivity } = useSWR(
|
||||
workspaceSlug ? USER_ACTIVITY(workspaceSlug as string) : null,
|
||||
workspaceSlug ? () => userService.userActivity(workspaceSlug as string) : null
|
||||
);
|
||||
|
||||
const today = new Date();
|
||||
const lastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1);
|
||||
const twoMonthsAgo = new Date(today.getFullYear(), today.getMonth() - 2, 1);
|
||||
const threeMonthsAgo = new Date(today.getFullYear(), today.getMonth() - 3, 1);
|
||||
const fourMonthsAgo = new Date(today.getFullYear(), today.getMonth() - 4, 1);
|
||||
const fiveMonthsAgo = new Date(today.getFullYear(), today.getMonth() - 5, 1);
|
||||
|
||||
const recentMonths = [
|
||||
fiveMonthsAgo,
|
||||
fourMonthsAgo,
|
||||
threeMonthsAgo,
|
||||
twoMonthsAgo,
|
||||
lastMonth,
|
||||
today,
|
||||
];
|
||||
|
||||
const getDatesOfMonth = (dateOfMonth: Date) => {
|
||||
const month = dateOfMonth.getMonth();
|
||||
const year = dateOfMonth.getFullYear();
|
||||
|
||||
const dates = [];
|
||||
const date = new Date(year, month, 1);
|
||||
|
||||
while (date.getMonth() === month && date < new Date()) {
|
||||
dates.push(new Date(date));
|
||||
date.setDate(date.getDate() + 1);
|
||||
}
|
||||
|
||||
return dates;
|
||||
};
|
||||
|
||||
const recentDates = [
|
||||
...getDatesOfMonth(recentMonths[0]),
|
||||
...getDatesOfMonth(recentMonths[1]),
|
||||
...getDatesOfMonth(recentMonths[2]),
|
||||
...getDatesOfMonth(recentMonths[3]),
|
||||
...getDatesOfMonth(recentMonths[4]),
|
||||
...getDatesOfMonth(recentMonths[5]),
|
||||
];
|
||||
|
||||
const getDatesOnDay = (dates: Date[], day: number) => {
|
||||
const datesOnDay = [];
|
||||
|
||||
for (let i = 0; i < dates.length; i++)
|
||||
if (dates[i].getDay() === day) datesOnDay.push(renderDateFormat(new Date(dates[i])));
|
||||
|
||||
return datesOnDay;
|
||||
};
|
||||
|
||||
const activitiesIntensity = (activityCount: number) => {
|
||||
if (activityCount <= 3) return "opacity-50";
|
||||
else if (activityCount > 3 && activityCount <= 6) return "opacity-70";
|
||||
else if (activityCount > 6 && activityCount <= 9) return "opacity-90";
|
||||
else return "";
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!ref.current) return;
|
||||
|
||||
setWidth(ref.current.offsetWidth);
|
||||
}, [ref]);
|
||||
|
||||
return (
|
||||
<div className="grid place-items-center">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex flex-col gap-2 pt-6">
|
||||
{DAYS.map((day, index) => (
|
||||
<h6 key={day} className="h-4 text-xs">
|
||||
{index % 2 === 0 && day.substring(0, 3)}
|
||||
</h6>
|
||||
))}
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<div className="flex items-center justify-between" style={{ width: `${width}px` }}>
|
||||
{recentMonths.map((month) => (
|
||||
<h6 key={month.getMonth()} className="w-full text-xs">
|
||||
{MONTHS[month.getMonth()].substring(0, 3)}
|
||||
</h6>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-1.5 space-y-2" ref={ref}>
|
||||
{DAYS.map((day, index) => (
|
||||
<div key={day} className="flex items-start gap-2">
|
||||
{getDatesOnDay(recentDates, index).map((date) => {
|
||||
const isActive = userActivity?.find((a) => a.created_date === date);
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
key={date}
|
||||
tooltipContent={`${
|
||||
isActive ? isActive.activity_count : 0
|
||||
} activities on ${renderShortNumericDateFormat(date)}`}
|
||||
theme="dark"
|
||||
>
|
||||
<div
|
||||
className={`h-4 w-4 rounded ${
|
||||
isActive
|
||||
? `bg-green-500 ${activitiesIntensity(isActive.activity_count)}`
|
||||
: "bg-gray-100"
|
||||
}`}
|
||||
/>
|
||||
</Tooltip>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* <div className="mt-4 grid w-full grid-flow-row grid-rows-6 gap-2">
|
||||
{recentDates.map((date) => (
|
||||
<div className="h-4 w-4 rounded bg-gray-100" />
|
||||
))}
|
||||
</div> */}
|
||||
<div className="mt-8 flex items-center gap-2 text-xs">
|
||||
<span>Less</span>
|
||||
<span className="h-4 w-4 rounded bg-gray-100" />
|
||||
<span className="h-4 w-4 rounded bg-green-500 opacity-50" />
|
||||
<span className="h-4 w-4 rounded bg-green-500 opacity-70" />
|
||||
<span className="h-4 w-4 rounded bg-green-500 opacity-90" />
|
||||
<span className="h-4 w-4 rounded bg-green-500" />
|
||||
<span>More</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
79
apps/app/components/workspace/completed-issues-graph.tsx
Normal file
79
apps/app/components/workspace/completed-issues-graph.tsx
Normal file
@ -0,0 +1,79 @@
|
||||
import { useState } from "react";
|
||||
|
||||
// recharts
|
||||
import {
|
||||
CartesianGrid,
|
||||
Legend,
|
||||
Line,
|
||||
LineChart,
|
||||
ResponsiveContainer,
|
||||
Tooltip,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts";
|
||||
// ui
|
||||
import { CustomMenu } from "components/ui";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
// constants
|
||||
import { MONTHS } from "constants/project";
|
||||
|
||||
type Props = {
|
||||
issues: IIssue[] | undefined;
|
||||
};
|
||||
|
||||
export const CompletedIssuesGraph: React.FC<Props> = ({ issues }) => {
|
||||
const [month, setMonth] = useState(new Date().getMonth());
|
||||
|
||||
const weeks = month === 1 ? 4 : 5;
|
||||
|
||||
const monthIssues =
|
||||
issues?.filter(
|
||||
(i) =>
|
||||
new Date(i.created_at).getMonth() === month &&
|
||||
new Date(i.created_at).getFullYear() === new Date().getFullYear()
|
||||
) ?? [];
|
||||
|
||||
const data: any[] = [];
|
||||
|
||||
for (let j = 1; j <= weeks; j++) {
|
||||
const weekIssues = monthIssues.filter(
|
||||
(i) => i.completed_at && Math.ceil(new Date(i.completed_at).getDate() / 7) === j
|
||||
);
|
||||
|
||||
data.push({ name: `Week ${j}`, completedIssues: weekIssues.length });
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-0.5 flex justify-between">
|
||||
<h3 className="font-semibold">Issues closed by you</h3>
|
||||
<CustomMenu label={<span className="text-sm">{MONTHS[month]}</span>} noBorder>
|
||||
{MONTHS.map((month, index) => (
|
||||
<CustomMenu.MenuItem key={month} onClick={() => setMonth(index)}>
|
||||
{month}
|
||||
</CustomMenu.MenuItem>
|
||||
))}
|
||||
</CustomMenu>
|
||||
</div>
|
||||
<div className="rounded-[10px] border bg-white p-8 pl-4">
|
||||
<ResponsiveContainer width="100%" height={250}>
|
||||
<LineChart data={data}>
|
||||
<CartesianGrid stroke="#e2e2e2" />
|
||||
<XAxis dataKey="name" />
|
||||
<YAxis dataKey="completedIssues" />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="completedIssues"
|
||||
stroke="#d687ff"
|
||||
strokeWidth={3}
|
||||
fill="#8e2de2"
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,37 +0,0 @@
|
||||
import { FC } from "react";
|
||||
import { IIssue, IProject } from "types";
|
||||
|
||||
export interface WorkspaceHomeCardsListProps {
|
||||
groupedIssues: any;
|
||||
myIssues: IIssue[];
|
||||
projects: IProject[];
|
||||
}
|
||||
|
||||
export const WorkspaceHomeCardsList: FC<WorkspaceHomeCardsListProps> = (props) => {
|
||||
const { groupedIssues, myIssues, projects } = props;
|
||||
const cards = [
|
||||
{
|
||||
title: "Issues completed",
|
||||
number: groupedIssues.completed.length,
|
||||
},
|
||||
{
|
||||
title: "Issues pending",
|
||||
number: myIssues.length - groupedIssues.completed.length,
|
||||
},
|
||||
{
|
||||
title: "Projects",
|
||||
number: projects?.length ?? 0,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-3 gap-5">
|
||||
{cards.map((card, index) => (
|
||||
<div key={index} className="rounded-lg border bg-white p-4 text-center">
|
||||
<p className="text-gray-500">{card.title}</p>
|
||||
<h2 className="mt-2 text-3xl font-semibold">{card.number}</h2>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,31 +0,0 @@
|
||||
// hooks
|
||||
import useUser from "hooks/use-user";
|
||||
// ui
|
||||
import { Loader } from "components/ui";
|
||||
|
||||
export const WorkspaceHomeGreetings = () => {
|
||||
// user information
|
||||
const { user } = useUser();
|
||||
|
||||
const hours = new Date().getHours();
|
||||
|
||||
return (
|
||||
<>
|
||||
{user ? (
|
||||
<div className="text-2xl font-medium">
|
||||
Good{" "}
|
||||
{hours >= 4 && hours < 12
|
||||
? "Morning"
|
||||
: hours >= 12 && hours < 17
|
||||
? "Afternoon"
|
||||
: "Evening"}
|
||||
, {user.first_name}!
|
||||
</div>
|
||||
) : (
|
||||
<Loader>
|
||||
<Loader.Item height="2rem" width="20rem" />
|
||||
</Loader>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -1,7 +1,10 @@
|
||||
export * from "./activity-graph";
|
||||
export * from "./completed-issues-graph";
|
||||
export * from "./create-workspace-form";
|
||||
export * from "./delete-workspace-modal";
|
||||
export * from "./help-section";
|
||||
export * from "./issues-list";
|
||||
export * from "./issues-pie-chart";
|
||||
export * from "./issues-stats";
|
||||
export * from "./sidebar-dropdown";
|
||||
export * from "./sidebar-menu";
|
||||
export * from "./help-section";
|
||||
export * from "./home-greetings";
|
||||
export * from "./home-cards-list";
|
||||
|
||||
105
apps/app/components/workspace/issues-list.tsx
Normal file
105
apps/app/components/workspace/issues-list.tsx
Normal file
@ -0,0 +1,105 @@
|
||||
import { useRouter } from "next/router";
|
||||
import Link from "next/link";
|
||||
|
||||
// icons
|
||||
import { ExclamationTriangleIcon } from "@heroicons/react/20/solid";
|
||||
// helpers
|
||||
import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
import { Loader } from "components/ui";
|
||||
import { LayerDiagonalIcon } from "components/icons";
|
||||
|
||||
type Props = {
|
||||
issues: IIssue[] | undefined;
|
||||
type: "overdue" | "upcoming";
|
||||
};
|
||||
|
||||
export const IssuesList: React.FC<Props> = ({ issues, type }) => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
const getDateDifference = (date: Date) => {
|
||||
const today = new Date();
|
||||
|
||||
let diffDays = 0;
|
||||
if (type === "overdue") {
|
||||
const diffTime = Math.abs(today.valueOf() - date.valueOf());
|
||||
diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
||||
} else return date.getDate() - today.getDate();
|
||||
|
||||
return diffDays;
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h3 className="mb-2 font-semibold capitalize">{type} Issues</h3>
|
||||
{issues ? (
|
||||
<div className="rounded-[10px] border bg-white p-4 text-sm">
|
||||
<div
|
||||
className={`mb-2 grid grid-cols-4 gap-2 rounded-lg px-3 py-2 font-medium ${
|
||||
type === "overdue" ? "bg-red-100" : "bg-gray-100"
|
||||
}`}
|
||||
>
|
||||
<h4 className="capitalize">{type}</h4>
|
||||
<h4 className="col-span-2">Issue</h4>
|
||||
<h4>Due Date</h4>
|
||||
</div>
|
||||
<div className="max-h-72 overflow-y-scroll">
|
||||
{issues.length > 0 ? (
|
||||
issues.map((issue) => {
|
||||
const dateDifference = getDateDifference(new Date(issue.target_date as string));
|
||||
|
||||
return (
|
||||
<Link
|
||||
href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}
|
||||
key={issue.id}
|
||||
>
|
||||
<a>
|
||||
<div className="grid grid-cols-4 gap-2 px-3 py-2">
|
||||
<h5
|
||||
className={`flex cursor-default items-center gap-2 ${
|
||||
type === "overdue"
|
||||
? dateDifference > 6
|
||||
? "text-red-500"
|
||||
: "text-yellow-400"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
{type === "overdue" && (
|
||||
<ExclamationTriangleIcon className="h-3.5 w-3.5" />
|
||||
)}
|
||||
{dateDifference} {dateDifference > 1 ? "days" : "day"}
|
||||
</h5>
|
||||
<h5 className="col-span-2">{truncateText(issue.name, 30)}</h5>
|
||||
<h5 className="cursor-default">
|
||||
{renderShortDateWithYearFormat(new Date(issue.target_date as string))}
|
||||
</h5>
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<div className="grid h-full place-items-center">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<LayerDiagonalIcon height={60} width={60} />
|
||||
<span>
|
||||
No issues found. Use{" "}
|
||||
<pre className="inline rounded bg-gray-200 px-2 py-1">C</pre> shortcut to create
|
||||
a new issue
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<Loader>
|
||||
<Loader.Item height="200" />
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
142
apps/app/components/workspace/issues-pie-chart.tsx
Normal file
142
apps/app/components/workspace/issues-pie-chart.tsx
Normal file
@ -0,0 +1,142 @@
|
||||
import { useCallback, useState } from "react";
|
||||
|
||||
// recharts
|
||||
import { Cell, Legend, Pie, PieChart, ResponsiveContainer, Sector } from "recharts";
|
||||
// helpers
|
||||
import { groupBy } from "helpers/array.helper";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
// constants
|
||||
import { STATE_GROUP_COLORS } from "constants/state";
|
||||
|
||||
type Props = {
|
||||
issues: IIssue[] | undefined;
|
||||
};
|
||||
|
||||
export const IssuesPieChart: React.FC<Props> = ({ issues }) => {
|
||||
const [activeIndex, setActiveIndex] = useState(0);
|
||||
|
||||
const groupedIssues = {
|
||||
backlog: [],
|
||||
unstarted: [],
|
||||
started: [],
|
||||
cancelled: [],
|
||||
completed: [],
|
||||
...groupBy(issues ?? [], "state_detail.group"),
|
||||
};
|
||||
|
||||
const data = [
|
||||
{
|
||||
name: "Backlog",
|
||||
value: groupedIssues.backlog.length,
|
||||
},
|
||||
{
|
||||
name: "Unstarted",
|
||||
value: groupedIssues.unstarted.length,
|
||||
},
|
||||
{
|
||||
name: "Started",
|
||||
value: groupedIssues.started.length,
|
||||
},
|
||||
{
|
||||
name: "Cancelled",
|
||||
value: groupedIssues.cancelled.length,
|
||||
},
|
||||
{
|
||||
name: "Completed",
|
||||
value: groupedIssues.completed.length,
|
||||
},
|
||||
];
|
||||
|
||||
const onPieEnter = useCallback(
|
||||
(_: any, index: number) => {
|
||||
setActiveIndex(index);
|
||||
},
|
||||
[setActiveIndex]
|
||||
);
|
||||
|
||||
const renderActiveShape = ({
|
||||
cx,
|
||||
cy,
|
||||
midAngle,
|
||||
innerRadius,
|
||||
outerRadius,
|
||||
startAngle,
|
||||
endAngle,
|
||||
fill,
|
||||
payload,
|
||||
value,
|
||||
}: any) => {
|
||||
const RADIAN = Math.PI / 180;
|
||||
const sin = Math.sin(-RADIAN * midAngle);
|
||||
const cos = Math.cos(-RADIAN * midAngle);
|
||||
const sx = cx + (outerRadius + 10) * cos;
|
||||
const sy = cy + (outerRadius + 10) * sin;
|
||||
const mx = cx + (outerRadius + 30) * cos;
|
||||
const my = cy + (outerRadius + 30) * sin;
|
||||
const ex = mx + (cos >= 0 ? 1 : -1) * 22;
|
||||
const ey = my;
|
||||
const textAnchor = cos >= 0 ? "start" : "end";
|
||||
|
||||
return (
|
||||
<g>
|
||||
<text x={cx} y={cy} dy={8} textAnchor="middle" fill={fill}>
|
||||
{payload.name}
|
||||
</text>
|
||||
<Sector
|
||||
cx={cx}
|
||||
cy={cy}
|
||||
innerRadius={innerRadius}
|
||||
outerRadius={outerRadius}
|
||||
startAngle={startAngle}
|
||||
endAngle={endAngle}
|
||||
fill={fill}
|
||||
/>
|
||||
<Sector
|
||||
cx={cx}
|
||||
cy={cy}
|
||||
startAngle={startAngle}
|
||||
endAngle={endAngle}
|
||||
innerRadius={outerRadius + 6}
|
||||
outerRadius={outerRadius + 10}
|
||||
fill={fill}
|
||||
/>
|
||||
<path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill="none" />
|
||||
<circle cx={ex} cy={ey} r={2} fill={fill} stroke="none" />
|
||||
<text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} textAnchor={textAnchor} fill="#333">
|
||||
{value} issues
|
||||
</text>
|
||||
</g>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h3 className="mb-2 font-semibold">Issues by States</h3>
|
||||
<div className="rounded-[10px] border bg-white p-4">
|
||||
<ResponsiveContainer width="100%" height={250}>
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={data}
|
||||
dataKey="value"
|
||||
nameKey="name"
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
fill="#8884d8"
|
||||
innerRadius={70}
|
||||
outerRadius={90}
|
||||
activeIndex={activeIndex}
|
||||
activeShape={renderActiveShape}
|
||||
onMouseEnter={onPieEnter}
|
||||
>
|
||||
{data.map((cell: any) => (
|
||||
<Cell key={cell.name} fill={STATE_GROUP_COLORS[cell.name.toLowerCase()]} />
|
||||
))}
|
||||
</Pie>
|
||||
<Legend layout="vertical" verticalAlign="middle" align="right" height={36} />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
54
apps/app/components/workspace/issues-stats.tsx
Normal file
54
apps/app/components/workspace/issues-stats.tsx
Normal file
@ -0,0 +1,54 @@
|
||||
// components
|
||||
import { ActivityGraph } from "components/workspace";
|
||||
// helpers
|
||||
import { groupBy } from "helpers/array.helper";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
|
||||
type Props = {
|
||||
issues: IIssue[] | undefined;
|
||||
};
|
||||
|
||||
export const IssuesStats: React.FC<Props> = ({ issues }) => {
|
||||
const groupedIssues = {
|
||||
backlog: [],
|
||||
unstarted: [],
|
||||
started: [],
|
||||
cancelled: [],
|
||||
completed: [],
|
||||
...groupBy(issues ?? [], "state_detail.group"),
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 rounded-[10px] border bg-white lg:grid-cols-3">
|
||||
{issues ? (
|
||||
<>
|
||||
<div className="grid grid-cols-2 gap-4 border-b p-4 lg:border-r lg:border-b-0">
|
||||
<div className="pb-4">
|
||||
<h4>Issues assigned to you</h4>
|
||||
<h5 className="mt-2 text-2xl font-semibold">{issues.length}</h5>
|
||||
</div>
|
||||
<div className="pb-4">
|
||||
<h4>Pending issues</h4>
|
||||
<h5 className="mt-2 text-2xl font-semibold">
|
||||
{issues.length - groupedIssues.completed.length}
|
||||
</h5>
|
||||
</div>
|
||||
<div className="pb-4">
|
||||
<h4>Completed issues</h4>
|
||||
<h5 className="mt-2 text-2xl font-semibold">{groupedIssues.completed.length}</h5>
|
||||
</div>
|
||||
<div className="pb-4">
|
||||
<h4>Issues due by this week</h4>
|
||||
<h5 className="mt-2 text-2xl font-semibold">24</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 lg:col-span-2">
|
||||
<h3 className="mb-2 font-semibold capitalize">Activity Graph</h3>
|
||||
<ActivityGraph />
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -51,6 +51,7 @@ export const STATE_LIST = (projectId: string) => `STATE_LIST_${projectId}`;
|
||||
export const STATE_DETAIL = "STATE_DETAILS";
|
||||
|
||||
export const USER_ISSUE = (workspaceSlug: string) => `USER_ISSUE_${workspaceSlug}`;
|
||||
export const USER_ACTIVITY = (workspaceSlug: string) => `USER_ACTIVITY_${workspaceSlug}`;
|
||||
export const USER_PROJECT_VIEW = (projectId: string) => `USER_PROJECT_VIEW_${projectId}`;
|
||||
|
||||
export const MODULE_LIST = (projectId: string) => `MODULE_LIST_${projectId}`;
|
||||
|
||||
@ -9,3 +9,20 @@ export const GROUP_CHOICES = {
|
||||
};
|
||||
|
||||
export const PRIORITIES = ["urgent", "high", "medium", "low", null];
|
||||
|
||||
export const MONTHS = [
|
||||
"January",
|
||||
"February",
|
||||
"March",
|
||||
"April",
|
||||
"May",
|
||||
"June",
|
||||
"July",
|
||||
"August",
|
||||
"September",
|
||||
"October",
|
||||
"November",
|
||||
"December",
|
||||
];
|
||||
|
||||
export const DAYS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
|
||||
|
||||
9
apps/app/constants/state.ts
Normal file
9
apps/app/constants/state.ts
Normal file
@ -0,0 +1,9 @@
|
||||
export const STATE_GROUP_COLORS: {
|
||||
[key: string]: string;
|
||||
} = {
|
||||
backlog: "#ced4da",
|
||||
unstarted: "#26b5ce",
|
||||
started: "#f7ae59",
|
||||
cancelled: "#d687ff",
|
||||
completed: "#09a953",
|
||||
};
|
||||
@ -1,13 +1,12 @@
|
||||
import React, { createContext, ReactElement } from "react";
|
||||
// swr
|
||||
import useSWR from "swr";
|
||||
import useSWR, { KeyedMutator } from "swr";
|
||||
// services
|
||||
import userService from "services/user.service";
|
||||
// constants
|
||||
import { CURRENT_USER } from "constants/fetch-keys";
|
||||
|
||||
// types
|
||||
import type { KeyedMutator } from "swr";
|
||||
import type { IUser } from "types";
|
||||
|
||||
interface IUserContextProps {
|
||||
|
||||
@ -144,4 +144,4 @@ export const renderShortDate = (date: Date) => {
|
||||
const day = date.getDate();
|
||||
const month = months[date.getMonth()];
|
||||
return isNaN(date.getTime()) ? "N/A" : `${day} ${month}`;
|
||||
};
|
||||
};
|
||||
|
||||
@ -14,7 +14,7 @@ const useIssues = (workspaceSlug: string | undefined) => {
|
||||
);
|
||||
|
||||
return {
|
||||
myIssues: myIssues || [],
|
||||
myIssues: myIssues,
|
||||
mutateMyIssues,
|
||||
};
|
||||
};
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import React from "react";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
// lib
|
||||
@ -8,227 +7,74 @@ import { requiredAuth } from "lib/auth";
|
||||
// layouts
|
||||
import AppLayout from "layouts/app-layout";
|
||||
// hooks
|
||||
import useProjects from "hooks/use-projects";
|
||||
import useWorkspaceDetails from "hooks/use-workspace-details";
|
||||
import useIssues from "hooks/use-issues";
|
||||
// components
|
||||
import { WorkspaceHomeCardsList, WorkspaceHomeGreetings } from "components/workspace";
|
||||
// ui
|
||||
import { Spinner, Tooltip } from "components/ui";
|
||||
// icons
|
||||
import {
|
||||
ArrowRightIcon,
|
||||
CalendarDaysIcon,
|
||||
ClipboardDocumentListIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
import { LayerDiagonalIcon } from "components/icons";
|
||||
import { getPriorityIcon } from "components/icons/priority-icon";
|
||||
CompletedIssuesGraph,
|
||||
IssuesList,
|
||||
IssuesPieChart,
|
||||
IssuesStats,
|
||||
} from "components/workspace";
|
||||
// helpers
|
||||
import { renderShortNumericDateFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
|
||||
import { addSpaceIfCamelCase } from "helpers/string.helper";
|
||||
import { groupBy } from "helpers/array.helper";
|
||||
import { orderArrayBy } from "helpers/array.helper";
|
||||
// types
|
||||
import type { NextPage, GetServerSidePropsContext } from "next";
|
||||
|
||||
const WorkspacePage: NextPage = () => {
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
// API Fetching
|
||||
const { myIssues } = useIssues(workspaceSlug?.toString());
|
||||
const { projects, recentProjects } = useProjects();
|
||||
const {} = useWorkspaceDetails();
|
||||
|
||||
const groupedIssues = {
|
||||
backlog: [],
|
||||
unstarted: [],
|
||||
started: [],
|
||||
cancelled: [],
|
||||
completed: [],
|
||||
...groupBy(myIssues ?? [], "state_detail.group"),
|
||||
};
|
||||
const { myIssues } = useIssues(workspaceSlug as string);
|
||||
|
||||
const overdueIssues = orderArrayBy(
|
||||
myIssues?.filter(
|
||||
(i) =>
|
||||
i.target_date &&
|
||||
i.target_date !== "" &&
|
||||
!i.completed_at &&
|
||||
new Date(i.target_date) < new Date()
|
||||
) ?? [],
|
||||
"target_date",
|
||||
"descending"
|
||||
);
|
||||
|
||||
const incomingIssues = orderArrayBy(
|
||||
myIssues?.filter(
|
||||
(i) => i.target_date && i.target_date !== "" && new Date(i.target_date) > new Date()
|
||||
) ?? [],
|
||||
"target_date"
|
||||
);
|
||||
|
||||
return (
|
||||
<AppLayout noHeader={true}>
|
||||
<div className="h-full w-full space-y-5">
|
||||
<div className="flex flex-col gap-5">
|
||||
<WorkspaceHomeGreetings />
|
||||
<WorkspaceHomeCardsList
|
||||
groupedIssues={groupedIssues}
|
||||
myIssues={myIssues}
|
||||
projects={projects}
|
||||
/>
|
||||
{/** TODO: Convert the below mentioned HTML Content to separate component */}
|
||||
<div className="grid grid-cols-3 gap-5">
|
||||
<div className="col-span-2 rounded-lg border bg-white">
|
||||
<div className="max-h-[30rem] w-full overflow-y-auto shadow-sm">
|
||||
{myIssues ? (
|
||||
myIssues.length > 0 ? (
|
||||
<div className="flex flex-col space-y-5">
|
||||
<div className="rounded-lg bg-white">
|
||||
<div className="rounded-t-lg bg-gray-100 px-4 py-3">
|
||||
<div className="flex items-center gap-x-2">
|
||||
<LayerDiagonalIcon className="h-5 w-5" color="gray" />
|
||||
<h2 className="font-medium leading-5">My Issues</h2>
|
||||
<p className="text-sm text-gray-500">{myIssues.length}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="divide-y-2">
|
||||
{myIssues.map((issue) => (
|
||||
<div
|
||||
key={issue.id}
|
||||
className="flex items-center justify-between gap-2 rounded px-4 py-3 text-sm"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className={`block h-1.5 w-1.5 flex-shrink-0 rounded-full`}
|
||||
style={{
|
||||
backgroundColor: issue.state_detail.color,
|
||||
}}
|
||||
/>
|
||||
<Link
|
||||
href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}
|
||||
>
|
||||
<a className="group relative flex items-center gap-2">
|
||||
<Tooltip
|
||||
position="top-left"
|
||||
tooltipHeading="Title"
|
||||
tooltipContent={issue.name}
|
||||
>
|
||||
<span className="w-auto max-w-[225px] md:max-w-[175px] lg:max-w-xs xl:max-w-sm text-ellipsis overflow-hidden whitespace-nowrap">
|
||||
{issue.name}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex flex-shrink-0 flex-wrap items-center gap-x-1 gap-y-2 text-xs">
|
||||
<Tooltip
|
||||
tooltipHeading="Priority"
|
||||
tooltipContent={issue.priority ?? "None"}
|
||||
>
|
||||
<div
|
||||
className={`cursor-pointer rounded px-2 py-1 capitalize shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
|
||||
issue.priority === "urgent"
|
||||
? "bg-red-100 text-red-600"
|
||||
: issue.priority === "high"
|
||||
? "bg-orange-100 text-orange-500"
|
||||
: issue.priority === "medium"
|
||||
? "bg-yellow-100 text-yellow-500"
|
||||
: issue.priority === "low"
|
||||
? "bg-green-100 text-green-500"
|
||||
: "bg-gray-100"
|
||||
}`}
|
||||
>
|
||||
{getPriorityIcon(issue.priority)}
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
tooltipHeading="State"
|
||||
tooltipContent={addSpaceIfCamelCase(issue.state_detail.name)}
|
||||
>
|
||||
<div className="flex cursor-pointer items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
||||
<span
|
||||
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: issue.state_detail.color,
|
||||
}}
|
||||
/>
|
||||
|
||||
<span>{addSpaceIfCamelCase(issue.state_detail.name)}</span>
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
tooltipHeading="Due Date"
|
||||
tooltipContent={
|
||||
issue.target_date
|
||||
? renderShortNumericDateFormat(issue.target_date)
|
||||
: "N/A"
|
||||
}
|
||||
>
|
||||
<div
|
||||
className={`flex flex-shrink-0 cursor-pointer items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
|
||||
issue.target_date === null
|
||||
? ""
|
||||
: issue.target_date < new Date().toISOString()
|
||||
? "text-red-600"
|
||||
: findHowManyDaysLeft(issue.target_date) <= 3 &&
|
||||
"text-orange-400"
|
||||
}`}
|
||||
>
|
||||
<CalendarDaysIcon className="h-4 w-4" />
|
||||
{issue.target_date
|
||||
? renderShortNumericDateFormat(issue.target_date)
|
||||
: "N/A"}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
|
||||
<LayerDiagonalIcon height="56" width="56" />
|
||||
<h3 className="text-gray-500">
|
||||
No issues found. Create a new issue with{" "}
|
||||
<pre className="inline rounded bg-gray-200 px-2 py-1">C</pre>.
|
||||
</h3>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className="flex items-center justify-center p-10">
|
||||
<Spinner />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-lg border bg-white">
|
||||
<div className="flex items-center gap-2 rounded-t-lg bg-gray-100 px-4 py-3">
|
||||
<ClipboardDocumentListIcon className="h-4 w-4 text-gray-500" />
|
||||
<h2 className="font-medium leading-5">Recent Projects</h2>
|
||||
</div>
|
||||
<div className="space-y-5 p-4">
|
||||
{recentProjects && workspaceSlug ? (
|
||||
recentProjects.length > 0 ? (
|
||||
recentProjects.map((project) => (
|
||||
<Link
|
||||
href={`/${workspaceSlug}/projects/${project.id}/issues`}
|
||||
key={project.id}
|
||||
>
|
||||
<a className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
{project.icon ? (
|
||||
<span className="grid flex-shrink-0 place-items-center rounded uppercase">
|
||||
{String.fromCodePoint(parseInt(project.icon))}
|
||||
</span>
|
||||
) : (
|
||||
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
|
||||
{project?.name.charAt(0)}
|
||||
</span>
|
||||
)}
|
||||
<h3 className="w-[150px] lg:w-[225px] text-ellipsis overflow-hidden">
|
||||
{project.name}
|
||||
</h3>
|
||||
</div>
|
||||
<div className="text-gray-400">
|
||||
<ArrowRightIcon className="h-4 w-4" />
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
))
|
||||
) : (
|
||||
<p className="text-gray-500">No projects has been create for this workspace.</p>
|
||||
)
|
||||
) : (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="h-full w-full">
|
||||
<div className="flex flex-col gap-8">
|
||||
<div
|
||||
className="flex flex-col justify-between gap-x-2 gap-y-6 rounded-lg px-8 py-6 text-white md:flex-row md:items-center md:py-3"
|
||||
style={{ background: "linear-gradient(90deg, #8e2de2 0%, #4a00e0 100%)" }}
|
||||
>
|
||||
<p>Plane is a open source application, to support us you can star 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-white px-3 py-1.5 text-sm duration-300 hover:bg-white hover:text-[#4a00e0]"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Star us on GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<IssuesStats issues={myIssues} />
|
||||
<div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
|
||||
<IssuesList issues={overdueIssues} type="overdue" />
|
||||
<IssuesList issues={incomingIssues} type="upcoming" />
|
||||
<IssuesPieChart issues={myIssues} />
|
||||
<CompletedIssuesGraph issues={myIssues} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// services
|
||||
import APIService from "services/api.service";
|
||||
import type { IUser } from "types";
|
||||
import type { IUser, IUserActivity } from "types";
|
||||
|
||||
const { NEXT_PUBLIC_API_BASE_URL } = process.env;
|
||||
|
||||
@ -49,6 +49,14 @@ class UserService extends APIService {
|
||||
throw error?.response?.data;
|
||||
});
|
||||
}
|
||||
|
||||
async userActivity(workspaceSlug: string): Promise<IUserActivity[]> {
|
||||
return this.get(`/api/users/me/workspaces/${workspaceSlug}/activity-graph/`)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response?.data;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default new UserService();
|
||||
|
||||
5
apps/app/types/users.d.ts
vendored
5
apps/app/types/users.d.ts
vendored
@ -35,6 +35,11 @@ export interface IUserLite {
|
||||
created_at: Date;
|
||||
}
|
||||
|
||||
export interface IUserActivity {
|
||||
created_date: string;
|
||||
activity_count: number;
|
||||
}
|
||||
|
||||
export type UserAuth = {
|
||||
isMember: boolean;
|
||||
isOwner: boolean;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user