style: new cycles list page design with empty states (#1633)

apps/app/components/cycles/active-cycle-details.tsx

@@ -110,8 +110,43 @@ export const ActiveCycleDetails: React.FC = () => {
 
   if (!cycle)
     return (
-      <div className="flex w-full items-center justify-start rounded-[10px] bg-custom-background-80 px-6 py-4">
-        <h3 className="text-base font-medium text-custom-text-100 ">No active cycle is present.</h3>
+      <div className="h-full grid place-items-center text-center">
+        <div className="space-y-2">
+          <div className="mx-auto flex justify-center">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="66"
+              height="66"
+              viewBox="0 0 66 66"
+              fill="none"
+            >
+              <circle
+                cx="34.375"
+                cy="34.375"
+                r="22"
+                stroke="rgb(var(--color-text-400))"
+                stroke-linecap="round"
+              />
+              <path
+                d="M36.4375 20.9919C36.4375 19.2528 37.6796 17.8127 39.1709 18.1419C40.125 18.3526 41.0604 18.6735 41.9625 19.1014C43.7141 19.9322 45.3057 21.1499 46.6464 22.685C47.987 24.2202 49.0505 26.0426 49.776 28.0484C50.5016 30.0541 50.875 32.2038 50.875 34.3748C50.875 36.5458 50.5016 38.6956 49.776 40.7013C49.0505 42.7071 47.987 44.5295 46.6464 46.0647C45.3057 47.5998 43.7141 48.8175 41.9625 49.6483C41.0604 50.0762 40.125 50.3971 39.1709 50.6077C37.6796 50.937 36.4375 49.4969 36.4375 47.7578L36.4375 20.9919Z"
+                fill="rgb(var(--color-text-400))"
+              />
+            </svg>
+          </div>
+          <h4 className="text-sm text-custom-text-200">No active cycle</h4>
+          <button
+            type="button"
+            className="text-custom-primary-100 text-sm outline-none"
+            onClick={() => {
+              const e = new KeyboardEvent("keydown", {
+                key: "q",
+              });
+              document.dispatchEvent(e);
+            }}
+          >
+            Create a new cycle
+          </button>
+        </div>
       </div>
     );
 

apps/app/components/cycles/cycles-view.tsx

@@ -9,6 +9,7 @@ import cyclesService from "services/cycles.service";
 // hooks
 import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
+import useLocalStorage from "hooks/use-local-storage";
 // components
 import {
   CreateUpdateCycleModal,
@@ -18,11 +19,7 @@ import {
   SingleCycleList,
 } from "components/cycles";
 // ui
-import { EmptyState, Loader } from "components/ui";
-// icons
-import { PlusIcon } from "@heroicons/react/24/outline";
-// images
-import emptyCycle from "public/empty-state/cycle.svg";
+import { Loader } from "components/ui";
 // helpers
 import { getDateRangeStatus } from "helpers/date-time.helper";
 // types
@@ -48,6 +45,8 @@ export const CyclesView: React.FC<Props> = ({ cycles, viewType }) => {
   const [deleteCycleModal, setDeleteCycleModal] = useState(false);
   const [selectedCycleToDelete, setSelectedCycleToDelete] = useState<ICycle | null>(null);
 
+  const { storedValue: cycleTab } = useLocalStorage("cycleTab", "All");
+
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -206,19 +205,48 @@ export const CyclesView: React.FC<Props> = ({ cycles, viewType }) => {
             <CyclesListGanttChartView cycles={cycles ?? []} />
           )
         ) : (
-          <EmptyState
-            title="Plan your project with cycles"
-            description="Cycle is a custom time period in which a team works to complete items on their backlog."
-            image={emptyCycle}
-            buttonText="New Cycle"
-            buttonIcon={<PlusIcon className="h-4 w-4" />}
-            onClick={() => {
-              const e = new KeyboardEvent("keydown", {
-                key: "q",
-              });
-              document.dispatchEvent(e);
-            }}
-          />
+          <div className="h-full grid place-items-center text-center">
+            <div className="space-y-2">
+              <div className="mx-auto flex justify-center">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="66"
+                  height="66"
+                  viewBox="0 0 66 66"
+                  fill="none"
+                >
+                  <circle
+                    cx="34.375"
+                    cy="34.375"
+                    r="22"
+                    stroke="rgb(var(--color-text-400))"
+                    stroke-linecap="round"
+                  />
+                  <path
+                    d="M36.4375 20.9919C36.4375 19.2528 37.6796 17.8127 39.1709 18.1419C40.125 18.3526 41.0604 18.6735 41.9625 19.1014C43.7141 19.9322 45.3057 21.1499 46.6464 22.685C47.987 24.2202 49.0505 26.0426 49.776 28.0484C50.5016 30.0541 50.875 32.2038 50.875 34.3748C50.875 36.5458 50.5016 38.6956 49.776 40.7013C49.0505 42.7071 47.987 44.5295 46.6464 46.0647C45.3057 47.5998 43.7141 48.8175 41.9625 49.6483C41.0604 50.0762 40.125 50.3971 39.1709 50.6077C37.6796 50.937 36.4375 49.4969 36.4375 47.7578L36.4375 20.9919Z"
+                    fill="rgb(var(--color-text-400))"
+                  />
+                </svg>
+              </div>
+              <h4 className="text-sm text-custom-text-200">
+                {cycleTab === "All"
+                  ? "No cycles"
+                  : `No ${cycleTab === "Drafts" ? "draft" : cycleTab?.toLowerCase()} cycles`}
+              </h4>
+              <button
+                type="button"
+                className="text-custom-primary-100 text-sm outline-none"
+                onClick={() => {
+                  const e = new KeyboardEvent("keydown", {
+                    key: "q",
+                  });
+                  document.dispatchEvent(e);
+                }}
+              >
+                Create a new cycle
+              </button>
+            </div>
+          </div>
         )
       ) : viewType === "list" ? (
         <Loader className="space-y-4">

apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx

@@ -2,15 +2,12 @@ import React, { useEffect, useState } from "react";
 
 import { useRouter } from "next/router";
 
-import useSWR from "swr";
-
 // headless ui
 import { Tab } from "@headlessui/react";
 // hooks
 import useLocalStorage from "hooks/use-local-storage";
 import useUserAuth from "hooks/use-user-auth";
-// services
-import projectService from "services/project.service";
+import useProjectDetails from "hooks/use-project-details";
 // layouts
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
 // components
@@ -23,18 +20,33 @@ import {
   UpcomingCyclesList,
 } from "components/cycles";
 // ui
-import { PrimaryButton } from "components/ui";
+import { EmptyState, Icon, PrimaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
-import { ListBulletIcon, PlusIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
+import { PlusIcon } from "@heroicons/react/24/outline";
+// images
+import emptyCycle from "public/empty-state/cycle.svg";
 // types
 import { SelectCycleType } from "types";
 import type { NextPage } from "next";
-// fetch-keys
-import { PROJECT_DETAILS } from "constants/fetch-keys";
 
 const tabsList = ["All", "Active", "Upcoming", "Completed", "Drafts"];
 
+const cycleViews = [
+  {
+    key: "list",
+    icon: "list",
+  },
+  {
+    key: "board",
+    icon: "dataset",
+  },
+  {
+    key: "gantt",
+    icon: "view_timeline",
+  },
+];
+
 const ProjectCycles: NextPage = () => {
   const [selectedCycle, setSelectedCycle] = useState<SelectCycleType>();
   const [createUpdateCycleModal, setCreateUpdateCycleModal] = useState(false);
@@ -60,19 +72,14 @@ const ProjectCycles: NextPage = () => {
   };
 
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { workspaceSlug } = router.query;
 
   const { user } = useUserAuth();
-
-  const { data: activeProject } = useSWR(
-    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
-      : null
-  );
+  const { projectDetails } = useProjectDetails();
 
   useEffect(() => {
     if (createUpdateCycleModal) return;
+
     const timer = setTimeout(() => {
       setSelectedCycle(undefined);
       clearTimeout(timer);
@@ -84,7 +91,7 @@ const ProjectCycles: NextPage = () => {
       breadcrumbs={
         <Breadcrumbs>
           <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
-          <BreadcrumbItem title={`${activeProject?.name ?? "Project"} Cycles`} />
+          <BreadcrumbItem title={`${projectDetails?.name ?? "Project"} Cycles`} />
         </Breadcrumbs>
       }
       right={
@@ -106,46 +113,26 @@ const ProjectCycles: NextPage = () => {
         data={selectedCycle}
         user={user}
       />
-      <div className="space-y-5 p-8 h-full flex flex-col overflow-hidden">
-        <div className="flex gap-4 justify-between">
-          <h3 className="text-2xl font-semibold text-custom-text-100">Cycles</h3>
-          <div className="flex items-center gap-x-1">
-            <button
-              type="button"
-              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-80 ${
-                cyclesView === "list" ? "bg-custom-background-80" : ""
-              }`}
-              onClick={() => setCyclesView("list")}
-            >
-              <ListBulletIcon className="h-4 w-4 text-custom-text-200" />
-            </button>
-            <button
-              type="button"
-              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-80 ${
-                cyclesView === "board" ? "bg-custom-background-80" : ""
-              }`}
-              onClick={() => setCyclesView("board")}
-            >
-              <Squares2X2Icon className="h-4 w-4 text-custom-text-200" />
-            </button>
-            <button
-              type="button"
-              className={`grid h-7 w-7 place-items-center rounded outline-none duration-300 hover:bg-custom-background-80 ${
-                cyclesView === "gantt_chart" ? "bg-custom-background-80" : ""
-              }`}
-              onClick={() => {
-                setCyclesView("gantt_chart");
-                setCycleTab("All");
-              }}
-            >
-              <span className="material-symbols-rounded text-custom-text-200 text-[18px] rotate-90">
-                waterfall_chart
-              </span>
-            </button>
-          </div>
+      {projectDetails?.total_cycles === 0 ? (
+        <div className="h-full grid place-items-center">
+          <EmptyState
+            title="Plan your project with cycles"
+            description="Cycle is a custom time period in which a team works to complete items on their backlog."
+            image={emptyCycle}
+            buttonText="New Cycle"
+            buttonIcon={<PlusIcon className="h-4 w-4" />}
+            onClick={() => {
+              const e = new KeyboardEvent("keydown", {
+                key: "q",
+              });
+              document.dispatchEvent(e);
+            }}
+          />
         </div>
+      ) : (
         <Tab.Group
-          as={React.Fragment}
+          as="div"
+          className="h-full flex flex-col overflow-hidden"
           defaultIndex={currentTabValue(cycleTab)}
           selectedIndex={currentTabValue(cycleTab)}
           onChange={(i) => {
@@ -165,50 +152,73 @@ const ProjectCycles: NextPage = () => {
             }
           }}
         >
-          <Tab.List as="div" className="flex flex-wrap items-center justify-start gap-4 text-base">
-            {tabsList.map((tab, index) => {
-              if (cyclesView === "gantt_chart" && (tab === "Active" || tab === "Drafts"))
-                return null;
+          <div className="flex flex-col sm:flex-row gap-4 justify-between border-b border-custom-border-300 px-4 sm:px-5 pb-4 sm:pb-0">
+            <Tab.List as="div" className="flex items-center overflow-x-scroll">
+              {tabsList.map((tab, index) => {
+                if (cyclesView === "gantt_chart" && (tab === "Active" || tab === "Drafts"))
+                  return null;
 
-              return (
-                <Tab
-                  key={index}
-                  className={({ selected }) =>
-                    `rounded-3xl border px-6 py-1 outline-none ${
-                      selected
-                        ? "border-custom-primary bg-custom-primary text-white font-medium"
-                        : "border-custom-border-200 bg-custom-background-100 hover:bg-custom-background-80"
-                    }`
-                  }
-                >
-                  {tab}
-                </Tab>
-              );
-            })}
-          </Tab.List>
+                return (
+                  <Tab
+                    key={index}
+                    className={({ selected }) =>
+                      `border-b-2 p-4 text-sm font-medium outline-none ${
+                        selected
+                          ? "border-custom-primary-100 text-custom-primary-100"
+                          : "border-transparent"
+                      }`
+                    }
+                  >
+                    {tab}
+                  </Tab>
+                );
+              })}
+            </Tab.List>
+            <div className="justify-end sm:justify-start flex items-center gap-x-1">
+              {cycleViews.map((view) => {
+                if (view.key === "gantt" && (cycleTab === "Active" || cycleTab === "Drafts"))
+                  return null;
+
+                return (
+                  <button
+                    key={view.key}
+                    type="button"
+                    className={`grid h-8 w-8 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-80 ${
+                      cyclesView === view.key
+                        ? "bg-custom-background-80 text-custom-text-100"
+                        : "text-custom-text-200"
+                    }`}
+                    onClick={() => setCyclesView(view.key)}
+                  >
+                    <Icon iconName={view.icon} className="!text-base" />
+                  </button>
+                );
+              })}
+            </div>
+          </div>
           <Tab.Panels as={React.Fragment}>
-            <Tab.Panel as="div" className="h-full overflow-y-auto">
+            <Tab.Panel as="div" className="p-4 sm:p-5 h-full overflow-y-auto">
               <AllCyclesList viewType={cyclesView} />
             </Tab.Panel>
             {cyclesView !== "gantt_chart" && (
-              <Tab.Panel as="div" className="mt-7 space-y-5 h-full overflow-y-auto">
+              <Tab.Panel as="div" className="p-4 sm:p-5 space-y-5 h-full overflow-y-auto">
                 <ActiveCycleDetails />
               </Tab.Panel>
             )}
-            <Tab.Panel as="div" className="h-full overflow-y-auto">
+            <Tab.Panel as="div" className="p-4 sm:p-5 h-full overflow-y-auto">
               <UpcomingCyclesList viewType={cyclesView} />
             </Tab.Panel>
-            <Tab.Panel as="div" className="h-full overflow-y-auto">
+            <Tab.Panel as="div" className="p-4 sm:p-5 h-full overflow-y-auto">
               <CompletedCyclesList viewType={cyclesView} />
             </Tab.Panel>
             {cyclesView !== "gantt_chart" && (
-              <Tab.Panel as="div" className="h-full overflow-y-auto">
+              <Tab.Panel as="div" className="p-4 sm:p-5 h-full overflow-y-auto">
                 <DraftCyclesList viewType={cyclesView} />
               </Tab.Panel>
             )}
           </Tab.Panels>
         </Tab.Group>
-      </div>
+      )}
     </ProjectAuthorizationWrapper>
   );
 };