From 96ad751e115fd8eaef4116fbd59871b9e7ac7299 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Thu, 16 Mar 2023 01:36:21 +0530
Subject: [PATCH] style: new workspace dashboard design (#454)

* style: workspace dashboard

* feat: activity graph
---
 apps/app/components/ui/custom-menu.tsx        |  18 +-
 .../components/workspace/activity-graph.tsx   | 156 +++++++++++
 .../workspace/completed-issues-graph.tsx      |  79 ++++++
 .../components/workspace/home-cards-list.tsx  |  37 ---
 .../components/workspace/home-greetings.tsx   |  31 ---
 apps/app/components/workspace/index.ts        |   9 +-
 apps/app/components/workspace/issues-list.tsx | 105 +++++++
 .../components/workspace/issues-pie-chart.tsx | 142 ++++++++++
 .../app/components/workspace/issues-stats.tsx |  54 ++++
 apps/app/constants/fetch-keys.ts              |   1 +
 apps/app/constants/project.ts                 |  17 ++
 apps/app/constants/state.ts                   |   9 +
 apps/app/contexts/user.context.tsx            |   3 +-
 apps/app/helpers/date-time.helper.ts          |   2 +-
 apps/app/hooks/use-issues.tsx                 |   2 +-
 apps/app/pages/[workspaceSlug]/index.tsx      | 258 ++++--------------
 apps/app/services/user.service.ts             |  10 +-
 apps/app/types/users.d.ts                     |   5 +
 18 files changed, 654 insertions(+), 284 deletions(-)
 create mode 100644 apps/app/components/workspace/activity-graph.tsx
 create mode 100644 apps/app/components/workspace/completed-issues-graph.tsx
 delete mode 100644 apps/app/components/workspace/home-cards-list.tsx
 delete mode 100644 apps/app/components/workspace/home-greetings.tsx
 create mode 100644 apps/app/components/workspace/issues-list.tsx
 create mode 100644 apps/app/components/workspace/issues-pie-chart.tsx
 create mode 100644 apps/app/components/workspace/issues-stats.tsx
 create mode 100644 apps/app/constants/state.ts

diff --git a/apps/app/components/ui/custom-menu.tsx b/apps/app/components/ui/custom-menu.tsx
index 1eacd5ba9..f37d2202f 100644
--- a/apps/app/components/ui/custom-menu.tsx
+++ b/apps/app/components/ui/custom-menu.tsx
@@ -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"
diff --git a/apps/app/components/workspace/activity-graph.tsx b/apps/app/components/workspace/activity-graph.tsx
new file mode 100644
index 000000000..0d8be2039
--- /dev/null
+++ b/apps/app/components/workspace/activity-graph.tsx
@@ -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>
+  );
+};
diff --git a/apps/app/components/workspace/completed-issues-graph.tsx b/apps/app/components/workspace/completed-issues-graph.tsx
new file mode 100644
index 000000000..2a2b132cc
--- /dev/null
+++ b/apps/app/components/workspace/completed-issues-graph.tsx
@@ -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>
+  );
+};
diff --git a/apps/app/components/workspace/home-cards-list.tsx b/apps/app/components/workspace/home-cards-list.tsx
deleted file mode 100644
index cca5989e7..000000000
--- a/apps/app/components/workspace/home-cards-list.tsx
+++ /dev/null
@@ -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>
-  );
-};
diff --git a/apps/app/components/workspace/home-greetings.tsx b/apps/app/components/workspace/home-greetings.tsx
deleted file mode 100644
index f4942eadb..000000000
--- a/apps/app/components/workspace/home-greetings.tsx
+++ /dev/null
@@ -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>
-      )}
-    </>
-  );
-};
diff --git a/apps/app/components/workspace/index.ts b/apps/app/components/workspace/index.ts
index 645aaed82..db509a70d 100644
--- a/apps/app/components/workspace/index.ts
+++ b/apps/app/components/workspace/index.ts
@@ -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";
diff --git a/apps/app/components/workspace/issues-list.tsx b/apps/app/components/workspace/issues-list.tsx
new file mode 100644
index 000000000..e8c7dd0f5
--- /dev/null
+++ b/apps/app/components/workspace/issues-list.tsx
@@ -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>
+  );
+};
diff --git a/apps/app/components/workspace/issues-pie-chart.tsx b/apps/app/components/workspace/issues-pie-chart.tsx
new file mode 100644
index 000000000..ef0eef461
--- /dev/null
+++ b/apps/app/components/workspace/issues-pie-chart.tsx
@@ -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>
+  );
+};
diff --git a/apps/app/components/workspace/issues-stats.tsx b/apps/app/components/workspace/issues-stats.tsx
new file mode 100644
index 000000000..773bc0b5c
--- /dev/null
+++ b/apps/app/components/workspace/issues-stats.tsx
@@ -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>
+  );
+};
diff --git a/apps/app/constants/fetch-keys.ts b/apps/app/constants/fetch-keys.ts
index 4f66ce10e..d7ce1a5be 100644
--- a/apps/app/constants/fetch-keys.ts
+++ b/apps/app/constants/fetch-keys.ts
@@ -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}`;
diff --git a/apps/app/constants/project.ts b/apps/app/constants/project.ts
index fee47e28d..9ddae96c8 100644
--- a/apps/app/constants/project.ts
+++ b/apps/app/constants/project.ts
@@ -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"];
diff --git a/apps/app/constants/state.ts b/apps/app/constants/state.ts
new file mode 100644
index 000000000..565a2c517
--- /dev/null
+++ b/apps/app/constants/state.ts
@@ -0,0 +1,9 @@
+export const STATE_GROUP_COLORS: {
+  [key: string]: string;
+} = {
+  backlog: "#ced4da",
+  unstarted: "#26b5ce",
+  started: "#f7ae59",
+  cancelled: "#d687ff",
+  completed: "#09a953",
+};
diff --git a/apps/app/contexts/user.context.tsx b/apps/app/contexts/user.context.tsx
index 5a5efe0e4..be606bf52 100644
--- a/apps/app/contexts/user.context.tsx
+++ b/apps/app/contexts/user.context.tsx
@@ -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 {
diff --git a/apps/app/helpers/date-time.helper.ts b/apps/app/helpers/date-time.helper.ts
index d0596727c..ccced81e3 100644
--- a/apps/app/helpers/date-time.helper.ts
+++ b/apps/app/helpers/date-time.helper.ts
@@ -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}`;
-};
\ No newline at end of file
+};
diff --git a/apps/app/hooks/use-issues.tsx b/apps/app/hooks/use-issues.tsx
index e30a3fea8..33e099676 100644
--- a/apps/app/hooks/use-issues.tsx
+++ b/apps/app/hooks/use-issues.tsx
@@ -14,7 +14,7 @@ const useIssues = (workspaceSlug: string | undefined) => {
   );
 
   return {
-    myIssues: myIssues || [],
+    myIssues: myIssues,
     mutateMyIssues,
   };
 };
diff --git a/apps/app/pages/[workspaceSlug]/index.tsx b/apps/app/pages/[workspaceSlug]/index.tsx
index 22b6d5596..5990e2292 100644
--- a/apps/app/pages/[workspaceSlug]/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/index.tsx
@@ -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>
diff --git a/apps/app/services/user.service.ts b/apps/app/services/user.service.ts
index 8e4a9f22c..0f0f85e9a 100644
--- a/apps/app/services/user.service.ts
+++ b/apps/app/services/user.service.ts
@@ -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();
diff --git a/apps/app/types/users.d.ts b/apps/app/types/users.d.ts
index 0d4a9ead4..19dac7ed6 100644
--- a/apps/app/types/users.d.ts
+++ b/apps/app/types/users.d.ts
@@ -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;