style : module sidebar (#385)

* style: new cycle sidebar

* style: other information section

* style: progress bar bg fix

* fix: cycle card bug fix

* style: progress chart

* style: chart tooltip

* style: module link tab added in sidebar stats

* style: lead and member select

apps/app/components/core/sidebar/sidebar-progress-stats.tsx

@@ -13,19 +13,24 @@ import projectService from "services/project.service";
 // hooks
 import useLocalStorage from "hooks/use-local-storage";
 // components
-import { SingleProgressStats } from "components/core";
+import { LinksList, SingleProgressStats } from "components/core";
 // ui
 import { Avatar } from "components/ui";
 // icons
 import User from "public/user.png";
+import { PlusIcon } from "@heroicons/react/24/outline";
 // types
-import { IIssue, IIssueLabels } from "types";
+import { IIssue, IIssueLabels, IModule, UserAuth } from "types";
 // fetch-keys
 import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys";
 // types
 type Props = {
   groupedIssues: any;
   issues: IIssue[];
+  module?: IModule;
+  setModuleLinkModal?: any;
+  handleDeleteLink?: any;
+  userAuth?: UserAuth;
 };
 
 const stateGroupColours: {
@@ -38,7 +43,14 @@ const stateGroupColours: {
   completed: "#096e8d",
 };
 
-export const SidebarProgressStats: React.FC<Props> = ({ groupedIssues, issues }) => {
+export const SidebarProgressStats: React.FC<Props> = ({
+  groupedIssues,
+  issues,
+  module,
+  setModuleLinkModal,
+  handleDeleteLink,
+  userAuth,
+}) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -60,14 +72,17 @@ export const SidebarProgressStats: React.FC<Props> = ({ groupedIssues, issues })
 
   const currentValue = (tab: string | null) => {
     switch (tab) {
+      case "Links":
+        return 0;
       case "Assignees":
-        return 0;
-      case "Labels":
         return 1;
-      case "States":
+      case "Labels":
         return 2;
+      case "States":
+        return 3;
+
       default:
-        return 0;
+        return 3;
     }
   };
   return (
@@ -76,27 +91,42 @@ export const SidebarProgressStats: React.FC<Props> = ({ groupedIssues, issues })
       onChange={(i) => {
         switch (i) {
           case 0:
-            return setTab("Assignees");
+            return setTab("Links");
           case 1:
-            return setTab("Labels");
+            return setTab("Assignees");
           case 2:
+            return setTab("Labels");
+          case 3:
             return setTab("States");
 
           default:
-            return setTab("Assignees");
+            return setTab("States");
         }
       }}
     >
       <Tab.List
         as="div"
-        className="flex items-center justify-between px-1 py-1.5 w-full rounded-md bg-gray-100 text-xs"
+        className={`flex w-full items-center justify-between rounded-md bg-gray-100 px-1 py-1.5 
+        ${module ? "text-xs" : "text-sm"} `}
       >
+        {module ? (
           <Tab
             className={({ selected }) =>
-         `rounded w-1/3 p-1 text-sm text-gray-900  ${
+              `w-full rounded px-3 py-1 text-gray-900  ${
-           selected
+                selected ? " bg-theme text-white" : "  hover:bg-hover-gray"
-             ? " bg-theme text-white"
+              }`
-             : "  hover:bg-hover-gray"
+            }
+          >
+            Links
+          </Tab>
+        ) : (
+          ""
+        )}
+
+        <Tab
+          className={({ selected }) =>
+            `w-full rounded px-3 py-1 text-gray-900  ${
+              selected ? " bg-theme text-white" : "  hover:bg-hover-gray"
             }`
           }
         >
@@ -104,10 +134,8 @@ export const SidebarProgressStats: React.FC<Props> = ({ groupedIssues, issues })
         </Tab>
         <Tab
           className={({ selected }) =>
-         `rounded w-1/3 p-1 text-sm  text-gray-900 ${
+            `w-full rounded px-3 py-1  text-gray-900 ${
-           selected
+              selected ? " bg-theme text-white" : " hover:bg-hover-gray"
-             ? " bg-theme text-white"
-             : " hover:bg-hover-gray"
             }`
           }
         >
@@ -115,18 +143,39 @@ export const SidebarProgressStats: React.FC<Props> = ({ groupedIssues, issues })
         </Tab>
         <Tab
           className={({ selected }) =>
-          `rounded w-1/3 p-1 text-sm  text-gray-900 ${
+            `w-full rounded px-3 py-1  text-gray-900 ${
-            selected
+              selected ? " bg-theme text-white" : " hover:bg-hover-gray"
-              ? " bg-theme text-white"
-              : " hover:bg-hover-gray"
             }`
           }
         >
           States
         </Tab>
       </Tab.List>
-      <Tab.Panels className="flex items-center justify-between p-1 w-full">
+      <Tab.Panels className="flex w-full items-center justify-between p-1">
-        <Tab.Panel as="div" className="w-full flex flex-col text-xs ">
+        {module ? (
+          <Tab.Panel as="div" className="flex w-full flex-col text-xs ">
+            <button
+              type="button"
+              className="flex w-full items-center justify-start gap-2 rounded px-4 py-2  hover:bg-theme/5"
+              onClick={() => setModuleLinkModal(true)}
+            >
+              <PlusIcon className="h-4 w-4" /> <span>Add Link</span>
+            </button>
+            <div className="mt-2 space-y-2 hover:bg-theme/5">
+              {userAuth && module.link_module && module.link_module.length > 0 ? (
+                <LinksList
+                  links={module.link_module}
+                  handleDeleteLink={handleDeleteLink}
+                  userAuth={userAuth}
+                />
+              ) : null}
+            </div>
+          </Tab.Panel>
+        ) : (
+          ""
+        )}
+
+        <Tab.Panel as="div" className="flex w-full flex-col text-xs ">
           {members?.map((member, index) => {
             const totalArray = issues?.filter((i) => i.assignees?.includes(member.member.id));
             const completeArray = totalArray?.filter((i) => i.state_detail.group === "completed");
@@ -173,7 +222,7 @@ export const SidebarProgressStats: React.FC<Props> = ({ groupedIssues, issues })
             ""
           )}
         </Tab.Panel>
-        <Tab.Panel as="div" className="w-full flex flex-col ">
+        <Tab.Panel as="div" className="flex w-full flex-col ">
           {issueLabels?.map((issue, index) => {
             const totalArray = issues?.filter((i) => i.labels?.includes(issue.id));
             const completeArray = totalArray?.filter((i) => i.state_detail.group === "completed");
@@ -199,7 +248,7 @@ export const SidebarProgressStats: React.FC<Props> = ({ groupedIssues, issues })
             }
           })}
         </Tab.Panel>
-        <Tab.Panel as="div" className="w-full flex flex-col ">
+        <Tab.Panel as="div" className="flex w-full flex-col ">
           {Object.keys(groupedIssues).map((group, index) => (
             <SingleProgressStats
               key={index}

apps/app/components/modules/sidebar-select/select-lead.tsx

@@ -10,7 +10,7 @@ import projectService from "services/project.service";
 // ui
 import { Avatar, CustomSearchSelect } from "components/ui";
 // icons
-import { UserIcon } from "@heroicons/react/24/outline";
+import { UserCircleIcon, UserIcon } from "@heroicons/react/24/outline";
 import User from "public/user.png";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
@@ -53,10 +53,11 @@ export const SidebarLeadSelect: React.FC<Props> = ({ value, onChange }) => {
   const selectedOption = members?.find((m) => m.member.id === value)?.member;
 
   return (
-    <div className="flex flex-wrap items-center py-2">
+    <div className="flex items-center justify-start gap-1">
-      <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
+
-        <UserIcon className="h-4 w-4 flex-shrink-0" />
+      <div className="flex w-40 items-center justify-start gap-2">
-        <p>Lead</p>
+        <UserCircleIcon className="h-5 w-5 text-gray-400" />
+        <span>Lead</span>
       </div>
       <div className="sm:basis-1/2">
         <CustomSearchSelect

apps/app/components/modules/sidebar-select/select-members.tsx

@@ -49,10 +49,10 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
     })) ?? [];
 
   return (
-    <div className="flex flex-wrap items-center py-2">
+    <div className="flex items-center justify-start gap-1">
-      <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
+      <div className="flex w-40 items-center justify-start gap-2">
-        <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
+        <UserGroupIcon className="h-5 w-5 text-gray-400" />
-        <p>Members</p>
+        <span>Members</span>
       </div>
       <div className="sm:basis-1/2">
         <CustomSearchSelect

apps/app/components/modules/sidebar.tsx

@@ -8,15 +8,20 @@ import { mutate } from "swr";
 import { Controller, useForm } from "react-hook-form";
 // icons
 import {
+  ArrowLongRightIcon,
   CalendarDaysIcon,
   ChartPieIcon,
+  ChevronDownIcon,
+  DocumentDuplicateIcon,
+  DocumentIcon,
   LinkIcon,
   PlusIcon,
   Squares2X2Icon,
   TrashIcon,
+  UserCircleIcon,
 } from "@heroicons/react/24/outline";
 
-import { Popover, Transition } from "@headlessui/react";
+import { Disclosure, Popover, Transition } from "@headlessui/react";
 import DatePicker from "react-datepicker";
 // services
 import modulesService from "services/modules.service";
@@ -29,10 +34,10 @@ import ProgressChart from "components/core/sidebar/progress-chart";
 
 // components
 // ui
-import { CustomSelect, Loader, ProgressBar } from "components/ui";
+import { CustomMenu, CustomSelect, Loader, ProgressBar } from "components/ui";
 // helpers
 import { renderDateFormat, renderShortNumericDateFormat, timeAgo } from "helpers/date-time.helper";
-import { copyTextToClipboard } from "helpers/string.helper";
+import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helper";
 import { groupBy } from "helpers/array.helper";
 // types
 import { IIssue, IModule, ModuleIssueResponse, ModuleLink, UserAuth } from "types";
@@ -152,6 +157,25 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
       });
   };
 
+  const handleCopyText = () => {
+    const originURL =
+      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+
+    copyTextToClipboard(`${workspaceSlug}/projects/${projectId}/modules/${module?.id}`)
+      .then(() => {
+        setToastAlert({
+          type: "success",
+          title: "Module link copied to clipboard",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Some error occurred",
+        });
+      });
+  };
+
   useEffect(() => {
     if (module)
       reset({
@@ -178,23 +202,23 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
       <div
         className={`fixed top-0 ${
           isOpen ? "right-0" : "-right-[24rem]"
-        } z-20 h-full w-[24rem] overflow-y-auto border-l bg-gray-50 p-5 duration-300`}
+        } z-20 h-full w-[24rem] overflow-y-auto border-l bg-gray-50 py-5 duration-300`}
       >
         {module ? (
           <>
-            <div className="my-2 flex gap-1 text-sm">
+            <div className="flex flex-col items-start justify-center">
+              <div className="flex gap-2.5 px-7 text-sm">
                 <div className="flex items-center ">
                   <Controller
                     control={control}
                     name="status"
                     render={({ field: { value } }) => (
                       <CustomSelect
-                      label={
+                        customButton={
                           <span
-                          className={`flex h-full w-full items-center gap-1 p-1 text-left text-xs capitalize  text-gray-900`}
+                            className={`flex cursor-pointer items-center rounded border-[0.5px] border-gray-200 bg-gray-100 px-2.5 py-1.5 text-center text-sm capitalize text-gray-800 `}
                           >
-                          <Squares2X2Icon className="h-4 w-4 flex-shrink-0" />
+                            {capitalizeFirstLetter(`${watch("status")}`)}
-                          {watch("status")}
                           </span>
                         }
                         value={value}
@@ -211,17 +235,19 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
                     )}
                   />
                 </div>
-              <div className="flex h-full items-center justify-center gap-2 rounded-md border bg-transparent  p-2 px-4  text-xs font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-900 focus:outline-none">
+                <div className="relative flex h-full w-52 items-center justify-center gap-2 text-sm text-gray-800">
-                <Popover className="relative flex items-center justify-center rounded-lg">
+                  <Popover className="flex h-full items-center  justify-center rounded-lg">
                     {({ open }) => (
                       <>
                         <Popover.Button
-                        className={`group flex items-center  ${open ? "bg-gray-100" : ""}`}
+                          className={`group flex h-full items-center gap-1 rounded border-[0.5px]  border-gray-200 bg-gray-100 px-2.5 py-1.5 text-gray-800   ${
+                            open ? "bg-gray-100" : ""
+                          }`}
                         >
-                        <CalendarDaysIcon className="mr-2 h-4 w-4 flex-shrink-0" />
+                          <CalendarDaysIcon className="h-3 w-3" />
                           <span>
-                          {renderShortNumericDateFormat(`${module?.start_date}`)
+                            {renderShortNumericDateFormat(`${module.start_date}`)
-                            ? renderShortNumericDateFormat(`${module?.start_date}`)
+                              ? renderShortNumericDateFormat(`${module.start_date}`)
                               : "N/A"}
                           </span>
                         </Popover.Button>
@@ -235,7 +261,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
                           leaveFrom="opacity-100 translate-y-0"
                           leaveTo="opacity-0 translate-y-1"
                         >
-                        <Popover.Panel className="absolute top-10 -left-10 z-20  transform overflow-hidden">
+                          <Popover.Panel className="absolute top-10 -right-5 z-20  transform overflow-hidden">
                             <DatePicker
                               selected={startDateRange}
                               onChange={(date) => {
@@ -247,6 +273,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
                               selectsStart
                               startDate={startDateRange}
                               endDate={endDateRange}
+                              maxDate={endDateRange}
+                              shouldCloseOnSelect
                               inline
                             />
                           </Popover.Panel>
@@ -254,14 +282,20 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
                       </>
                     )}
                   </Popover>
-                <Popover className="relative flex items-center justify-center  rounded-lg">
+                  <span>
+                    <ArrowLongRightIcon className="h-3 w-3" />
+                  </span>
+                  <Popover className="flex h-full items-center  justify-center rounded-lg">
                     {({ open }) => (
                       <>
                         <Popover.Button
-                        className={`group flex items-center ${open ? "bg-gray-100" : ""}`}
+                          className={`group flex items-center gap-1 rounded border-[0.5px] border-gray-200 bg-gray-100 px-2.5 py-1.5 text-gray-800  ${
+                            open ? "bg-gray-100" : ""
+                          }`}
                         >
+                          <CalendarDaysIcon className="h-3 w-3 " />
+
                           <span>
-                          -{" "}
                             {renderShortNumericDateFormat(`${module?.target_date}`)
                               ? renderShortNumericDateFormat(`${module?.target_date}`)
                               : "N/A"}
@@ -277,7 +311,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
                           leaveFrom="opacity-100 translate-y-0"
                           leaveTo="opacity-0 translate-y-1"
                         >
-                        <Popover.Panel className="absolute top-10 -right-20 z-20  transform overflow-hidden">
+                          <Popover.Panel className="absolute top-10 -right-5 z-20  transform overflow-hidden">
                             <DatePicker
                               selected={endDateRange}
                               onChange={(date) => {
@@ -289,7 +323,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
                               selectsEnd
                               startDate={startDateRange}
                               endDate={endDateRange}
-                            minDate={startDateRange}
+                              // minDate={startDateRange}
+
                               inline
                             />
                           </Popover.Panel>
@@ -299,43 +334,33 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
                   </Popover>
                 </div>
               </div>
-            <div className="flex items-center justify-between pb-3">
+
-              <h4 className="text-sm font-medium">{module.name}</h4>
+              <div className="flex flex-col gap-6 px-7 py-6">
-              <div className="flex flex-wrap items-center gap-2">
+                <div className="flex flex-col items-start justify-start gap-2 ">
-                <button
+                  <div className="flex items-center justify-start gap-2  ">
-                  type="button"
+                    <h4 className="text-xl font-semibold text-gray-900">{module.name}</h4>
-                  className="rounded-md border p-2 shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+                    <CustomMenu width="lg" ellipsis>
-                  onClick={() =>
+                      <CustomMenu.MenuItem onClick={handleCopyText}>
-                    copyTextToClipboard(
+                        <span className="flex items-center justify-start gap-2 text-gray-800">
-                      `https://app.plane.so/${workspaceSlug}/projects/${projectId}/modules/${module.id}`
+                          <DocumentDuplicateIcon className="h-4 w-4" />
-                    )
+                          <span>Copy Link</span>
-                      .then(() => {
+                        </span>
-                        setToastAlert({
+                      </CustomMenu.MenuItem>
-                          type: "success",
+                      <CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
-                          title: "Module link copied to clipboard",
+                        <span className="flex items-center justify-start gap-2 text-gray-800">
-                        });
+                          <TrashIcon className="h-4 w-4" />
-                      })
+                          <span>Delete</span>
-                      .catch(() => {
+                        </span>
-                        setToastAlert({
+                      </CustomMenu.MenuItem>
-                          type: "error",
+                    </CustomMenu>
-                          title: "Some error occurred",
-                        });
-                      })
-                  }
-                >
-                  <LinkIcon className="h-3.5 w-3.5" />
-                </button>
-                <button
-                  type="button"
-                  className="rounded-md border border-red-500 p-2 text-red-500 shadow-sm duration-300 hover:bg-red-50 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
-                  onClick={() => setModuleDeleteModal(true)}
-                >
-                  <TrashIcon className="h-3.5 w-3.5" />
-                </button>
                   </div>
+
+                  <span className="whitespace-normal text-sm leading-5 text-black">
+                    {module.description}
+                  </span>
                 </div>
-            <div className="divide-y-2 divide-gray-100 text-xs">
+
-              <div className="py-1">
+                <div className="flex flex-col  gap-4  text-sm">
                   <Controller
                     control={control}
                     name="lead"
@@ -343,7 +368,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
                       <SidebarLeadSelect
                         value={value}
                         onChange={(val: string) => {
-                        submitChanges({ lead: val });
+                          submitChanges({ lead: value });
                         }}
                       />
                     )}
@@ -360,61 +385,140 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
                       />
                     )}
                   />
-                <div className="flex flex-wrap items-center py-2">
+
-                  <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
+                  <div className="flex items-center justify-start gap-1">
-                    <ChartPieIcon className="h-4 w-4 flex-shrink-0" />
+                    <div className="flex w-40 items-center justify-start gap-2">
-                    <p>Progress</p>
+                      <ChartPieIcon className="h-5 w-5 text-gray-400" />
+                      <span>Progress</span>
                     </div>
-                  <div className="flex items-center gap-2 sm:basis-1/2">
+
-                    <div className="grid flex-shrink-0 place-items-center">
+                    <div className="flex items-center gap-2.5 text-gray-800">
                       <span className="h-4 w-4">
                         <ProgressBar
                           value={groupedIssues.completed.length}
                           maxValue={moduleIssues?.length}
                         />
                       </span>
-                    </div>
                       {groupedIssues.completed.length}/{moduleIssues?.length}
                     </div>
                   </div>
                 </div>
               </div>
-            <div className="flex w-full flex-col items-center justify-center gap-2">
+            </div>
-              {isStartValid && isEndValid ? (
+
+            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-gray-300 px-7 py-6 ">
+              <Disclosure>
+                {({ open }) => (
+                  <div
+                    className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}
+                  >
+                    <div className="flex w-full items-center justify-between gap-2    ">
+                      <div className="flex items-center justify-start gap-2 text-sm">
+                        <span className="font-medium text-gray-500">Progress</span>
+                        {!open && moduleIssues ? (
+                          <span className="rounded bg-[#09A953]/10 px-1.5 py-0.5 text-xs text-[#09A953]">
+                            {Math.round(
+                              (groupedIssues.completed.length / moduleIssues?.length) * 100
+                            )}
+                            %
+                          </span>
+                        ) : (
+                          ""
+                        )}
+                      </div>
+
+                      <Disclosure.Button>
+                        <ChevronDownIcon
+                          className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
+                          aria-hidden="true"
+                        />
+                      </Disclosure.Button>
+                    </div>
+                    <Transition show={open}>
+                      <Disclosure.Panel>
+                        {isStartValid && isEndValid && moduleIssues ? (
+                          <div className=" h-full w-full py-4">
+                            <div className="flex  items-start justify-between gap-4 py-2 text-xs">
+                              <div className="flex items-center gap-1">
+                                <span>
+                                  <DocumentIcon className="h-3 w-3 text-gray-500" />
+                                </span>
+                                <span>
+                                  Pending Issues -{" "}
+                                  {moduleIssues?.length - groupedIssues.completed.length}{" "}
+                                </span>
+                              </div>
+
+                              <div className="flex items-center gap-3 text-gray-900">
+                                <div className="flex items-center justify-center gap-1">
+                                  <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
+                                  <span>Ideal</span>
+                                </div>
+                                <div className="flex items-center justify-center gap-1">
+                                  <span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
+                                  <span>Current</span>
+                                </div>
+                              </div>
+                            </div>
+                            <div className="relative h-40 w-96">
                               <ProgressChart
                                 issues={issues}
                                 start={module?.start_date ?? ""}
                                 end={module?.target_date ?? ""}
                               />
-              ) : (
-                ""
-              )}
-              {issues.length > 0 ? (
-                <SidebarProgressStats issues={issues} groupedIssues={groupedIssues} />
-              ) : (
-                ""
-              )}
                             </div>
-            <div className="py-1 text-xs">
+                          </div>
-              <div className="flex items-center justify-between gap-2">
+                        ) : (
-                <h4>Links</h4>
+                          ""
-                <button
+                        )}
-                  type="button"
+                      </Disclosure.Panel>
-                  className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-100"
+                    </Transition>
-                  onClick={() => setModuleLinkModal(true)}
+                  </div>
+                )}
+              </Disclosure>
+            </div>
+
+            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-gray-300 px-7 py-6 ">
+              <Disclosure>
+                {({ open }) => (
+                  <div
+                    className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}
                   >
-                  <PlusIcon className="h-4 w-4" />
+                    <div className="flex w-full items-center justify-between gap-2    ">
-                </button>
+                      <div className="flex items-center justify-start gap-2 text-sm">
+                        <span className="font-medium text-gray-500">Other Information</span>
                       </div>
-              <div className="mt-2 space-y-2">
+
-                {module.link_module && module.link_module.length > 0 ? (
+                      <Disclosure.Button>
-                  <LinksList
+                        <ChevronDownIcon
-                    links={module.link_module}
+                          className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
+                          aria-hidden="true"
+                        />
+                      </Disclosure.Button>
+                    </div>
+                    <Transition show={open}>
+                      <Disclosure.Panel>
+                        {issues.length > 0 ? (
+                          <>
+                            <div className=" h-full w-full py-4">
+                              <SidebarProgressStats
+                                issues={issues}
+                                groupedIssues={groupedIssues}
+                                setModuleLinkModal={setModuleLinkModal}
                                 handleDeleteLink={handleDeleteLink}
                                 userAuth={userAuth}
+                                module={module}
                               />
-                ) : null}
                             </div>
+                          </>
+                        ) : (
+                          ""
+                        )}
+                      </Disclosure.Panel>
+                    </Transition>
+                  </div>
+                )}
+              </Disclosure>
             </div>
           </>
         ) : (