fix: ui improvement (#395)

* fix: current cycle date updation

* fix: sidebar overflow fix , date helper fn added

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

@@ -50,7 +50,7 @@ const ProgressChart: React.FC<Props> = ({ issues, start, end }) => {
   };
   const ChartData = getChartData();
   return (
-    <div className="absolute -left-12  flex h-full w-full  items-center justify-center   text-xs">
+    <div className="absolute -left-4  flex h-full w-full  items-center justify-center text-xs">
       <AreaChart
         width={360}
         height={160}

apps/app/components/cycles/form.tsx

@@ -11,6 +11,8 @@ import { Button, CustomDatePicker, CustomSelect, Input, TextArea } from "compone
 import { ICycle } from "types";
 // services
 import cyclesService from "services/cycles.service";
+// helper
+import { getDateRangeStatus } from "helpers/date-time.helper";
 
 type Props = {
   handleFormSubmit: (values: Partial<ICycle>) => Promise<void>;
@@ -53,6 +55,10 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
     });
   };
 
+  const cycleStatus =
+    data?.start_date && data?.end_date
+      ? getDateRangeStatus(data?.start_date, data?.end_date) : "";
+
   const dateChecker = async (payload: any) => {
     await cyclesService
       .cycleDateCheck(workspaceSlug as string, projectId as string, payload)
@@ -135,7 +141,7 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
                       value={value}
                       onChange={(val) => {
                         onChange(val);
-                        watch("end_date")
+                        watch("end_date") && cycleStatus != "current"
                           ? dateChecker({
                               start_date: val,
                               end_date: watch("end_date"),
@@ -163,7 +169,7 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
                       value={value}
                       onChange={(val) => {
                         onChange(val);
-                        watch("start_date")
+                        watch("start_date") && cycleStatus != "current"
                           ? dateChecker({
                               start_date: watch("start_date"),
                               end_date: val,

apps/app/components/cycles/sidebar.tsx

@@ -33,7 +33,7 @@ import { DeleteCycleModal } from "components/cycles";
 // helpers
 import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helper";
 import { groupBy } from "helpers/array.helper";
-import { renderDateFormat, renderShortNumericDateFormat } from "helpers/date-time.helper";
+import { renderDateFormat, renderShortDate } from "helpers/date-time.helper";
 // types
 import { CycleIssueResponse, ICycle, IIssue } from "types";
 // fetch-keys
@@ -55,13 +55,12 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
   cycleStatus,
 }) => {
   const [cycleDeleteModal, setCycleDeleteModal] = useState(false);
+  const [startDateRange, setStartDateRange] = useState<Date | null>(new Date());
+  const [endDateRange, setEndDateRange] = useState<Date | null>(null);
 
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId } = router.query;
 
-  const [startDateRange, setStartDateRange] = useState<Date | null>(new Date());
-  const [endDateRange, setEndDateRange] = useState<Date | null>(null);
-
   const { setToastAlert } = useToast();
 
   const defaultValues: Partial<ICycle> = {
@@ -163,11 +162,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                           }`}
                         >
                           <CalendarDaysIcon className="h-3 w-3" />
-                          <span>
+                          <span>{renderShortDate(new Date(`${cycle?.start_date}`))}</span>
-                            {renderShortNumericDateFormat(`${cycle.start_date}`)
-                              ? renderShortNumericDateFormat(`${cycle.start_date}`)
-                              : "N/A"}
-                          </span>
                         </Popover.Button>
 
                         <Transition
@@ -213,11 +208,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                         >
                           <CalendarDaysIcon className="h-3 w-3 " />
 
-                          <span>
+                          <span>{renderShortDate(new Date(`${cycle?.end_date}`))}</span>
-                            {renderShortNumericDateFormat(`${cycle.end_date}`)
-                              ? renderShortNumericDateFormat(`${cycle.end_date}`)
-                              : "N/A"}
-                          </span>
                         </Popover.Button>
 
                         <Transition
@@ -374,7 +365,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                                 </div>
                               </div>
                             </div>
-                            <div className="relative h-40 w-96">
+                            <div className="relative h-40 w-80">
                               <ProgressChart
                                 issues={issues}
                                 start={cycle?.start_date ?? ""}

apps/app/components/modules/sidebar.tsx

@@ -14,11 +14,7 @@ import {
   ChevronDownIcon,
   DocumentDuplicateIcon,
   DocumentIcon,
-  LinkIcon,
-  PlusIcon,
-  Squares2X2Icon,
   TrashIcon,
-  UserCircleIcon,
 } from "@heroicons/react/24/outline";
 
 import { Disclosure, Popover, Transition } from "@headlessui/react";
@@ -28,7 +24,7 @@ import modulesService from "services/modules.service";
 // hooks
 import useToast from "hooks/use-toast";
 // components
-import { LinkModal, LinksList, SidebarProgressStats } from "components/core";
+import { LinkModal, SidebarProgressStats } from "components/core";
 import { DeleteModuleModal, SidebarLeadSelect, SidebarMembersSelect } from "components/modules";
 import ProgressChart from "components/core/sidebar/progress-chart";
 
@@ -36,7 +32,7 @@ import ProgressChart from "components/core/sidebar/progress-chart";
 // ui
 import { CustomMenu, CustomSelect, Loader, ProgressBar } from "components/ui";
 // helpers
-import { renderDateFormat, renderShortNumericDateFormat, timeAgo } from "helpers/date-time.helper";
+import { renderDateFormat, renderShortDate, timeAgo } from "helpers/date-time.helper";
 import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helper";
 import { groupBy } from "helpers/array.helper";
 // types
@@ -74,8 +70,6 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
   const [startDateRange, setStartDateRange] = useState<Date | null>(new Date());
   const [endDateRange, setEndDateRange] = useState<Date | null>(null);
 
-  console.log("module details: ", module);
-
   const router = useRouter();
   const { workspaceSlug, projectId, moduleId } = router.query;
 
@@ -249,11 +243,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
                           }`}
                         >
                           <CalendarDaysIcon className="h-3 w-3" />
-                          <span>
+                          <span>{renderShortDate(new Date(`${module.start_date}`))}</span>
-                            {renderShortNumericDateFormat(`${module.start_date}`)
-                              ? renderShortNumericDateFormat(`${module.start_date}`)
-                              : "N/A"}
-                          </span>
                         </Popover.Button>
 
                         <Transition
@@ -299,11 +289,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
                         >
                           <CalendarDaysIcon className="h-3 w-3 " />
 
-                          <span>
+                          <span>{renderShortDate(new Date(`${module?.target_date}`))}</span>
-                            {renderShortNumericDateFormat(`${module?.target_date}`)
-                              ? renderShortNumericDateFormat(`${module?.target_date}`)
-                              : "N/A"}
-                          </span>
                         </Popover.Button>
 
                         <Transition
@@ -461,7 +447,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
                                 </div>
                               </div>
                             </div>
-                            <div className="relative h-40 w-96">
+                            <div className="relative h-40 w-80">
                               <ProgressChart
                                 issues={issues}
                                 start={module?.start_date ?? ""}

apps/app/helpers/date-time.helper.ts

@@ -125,3 +125,23 @@ export const renderShortDateWithYearFormat = (date: Date) => {
   const year = date.getFullYear();
   return isNaN(date.getTime()) ? "N/A" : ` ${month} ${day}, ${year}`;
 };
+
+export const renderShortDate = (date: Date) => {
+  const months = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec",
+  ];
+  const day = date.getDate();
+  const month = months[date.getMonth()];
+  return isNaN(date.getTime()) ? "N/A" : `${day} ${month}`;
+};

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

@@ -81,8 +81,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
 
   const cycleStatus =
     cycleDetails?.start_date && cycleDetails?.end_date
-      ? getDateRangeStatus(cycleDetails?.start_date, cycleDetails?.end_date)
+      ? getDateRangeStatus(cycleDetails?.start_date, cycleDetails?.end_date) : "";
-      : "draft";
 
   const { data: cycleIssues } = useSWR<CycleIssueResponse[]>(
     workspaceSlug && projectId && cycleId ? CYCLE_ISSUES(cycleId as string) : null,