feat: cycle list page (#577)

* style: cycle list page

* fix:typo fix

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

@@ -1,11 +1,12 @@
 import { useState } from "react";
 
 // components
-import { DeleteCycleModal,  SingleCycleCard } from "components/cycles";
+import { DeleteCycleModal, SingleCycleCard } from "components/cycles";
 import { EmptyState, Loader } from "components/ui";
 // image
 import emptyCycle from "public/empty-state/empty-cycle.svg";
-
+// icon
+import { XMarkIcon } from "@heroicons/react/24/outline";
 // types
 import { ICycle, SelectCycleType } from "types";
 
@@ -24,6 +25,7 @@ export const CyclesList: React.FC<TCycleStatsViewProps> = ({
 }) => {
   const [cycleDeleteModal, setCycleDeleteModal] = useState(false);
   const [selectedCycleForDelete, setSelectedCycleForDelete] = useState<SelectCycleType>();
+  const [showNoCurrentCycleMessage, setShowNoCurrentCycleMessage] = useState(true);
 
   const handleDeleteCycle = (cycle: ICycle) => {
     setSelectedCycleForDelete({ ...cycle, actionType: "delete" });
@@ -58,6 +60,15 @@ export const CyclesList: React.FC<TCycleStatsViewProps> = ({
               />
             ))}
           </div>
+        ) : type === "current" ? (
+          showNoCurrentCycleMessage && (
+            <div className="flex items-center justify-between bg-white w-full px-6 py-4 rounded-[10px]">
+              <h3 className="text-base font-medium text-black "> No current cycle is present.</h3>
+              <button onClick={() => setShowNoCurrentCycleMessage(false)}>
+                <XMarkIcon className="h-4 w-4" />
+              </button>
+            </div>
+          )
         ) : (
           <EmptyState
             type="cycle"

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

@@ -113,7 +113,9 @@ const ProjectCycles: NextPage<UserAuth> = (props) => {
       />
       <div className="space-y-8">
         <div className="flex flex-col gap-5">
-          <h3 className="text-3xl font-semibold text-black">Current Cycle</h3>
+          {currentAndUpcomingCycles && currentAndUpcomingCycles.current_cycle.length > 0 && (
+            <h3 className="text-3xl font-semibold text-black">Current Cycle</h3>
+          )}
           <div className="space-y-5">
             <CyclesList
               cycles={currentAndUpcomingCycles?.current_cycle}
@@ -124,7 +126,7 @@ const ProjectCycles: NextPage<UserAuth> = (props) => {
           </div>
         </div>
         <div className="flex flex-col gap-5">
-          <h3 className="text-3xl font-semibold text-black">Others</h3>
+          <h3 className="text-3xl font-semibold text-black">Other Cycles</h3>
           <div>
             <Tab.Group>
               <Tab.List