diff --git a/apps/app/components/core/sidebar/progress-chart.tsx b/apps/app/components/core/sidebar/progress-chart.tsx index b0d5bb394..2f48c0f9f 100644 --- a/apps/app/components/core/sidebar/progress-chart.tsx +++ b/apps/app/components/core/sidebar/progress-chart.tsx @@ -1,17 +1,10 @@ import React from "react"; -import { - XAxis, - YAxis, - Tooltip, - ResponsiveContainer, - AreaChart, - Area, - ReferenceLine, -} from "recharts"; +import { XAxis, YAxis, Tooltip, AreaChart, Area, ReferenceLine, TooltipProps} from "recharts"; //types import { IIssue } from "types"; +import { NameType, ValueType } from "recharts/types/component/DefaultTooltipContent"; // helper import { getDatesInRange, renderShortNumericDateFormat } from "helpers/date-time.helper"; @@ -43,53 +36,69 @@ const ProgressChart: React.FC = ({ issues, start, end }) => { }); return dateWiseData; }; + + const CustomTooltip = ({ active, payload }: TooltipProps) => { + if (active && payload && payload.length) { + console.log(payload[0].payload.currentDate); + return ( +
+

{payload[0].payload.currentDate}

+
+ ); + } + return null; + }; const ChartData = getChartData(); return ( -
-
-
- - Ideal -
-
- - Current -
-
-
- - - - - - - - - -
+
+ + + + + + + + + + + } /> + + +
); }; diff --git a/apps/app/components/core/sidebar/sidebar-progress-stats.tsx b/apps/app/components/core/sidebar/sidebar-progress-stats.tsx index 01417b625..5cc2b2ed8 100644 --- a/apps/app/components/core/sidebar/sidebar-progress-stats.tsx +++ b/apps/app/components/core/sidebar/sidebar-progress-stats.tsx @@ -89,32 +89,44 @@ export const SidebarProgressStats: React.FC = ({ groupedIssues, issues }) > - `w-1/2 rounded py-1 ${selected ? "bg-gray-300" : "hover:bg-gray-200"}` - } + className={({ selected }) => + `rounded w-1/3 p-1 text-sm text-gray-900 ${ + selected + ? " bg-theme text-white" + : " hover:bg-hover-gray" + }` + } > Assignees - `w-1/2 rounded py-1 ${selected ? "bg-gray-300 font-semibold" : "hover:bg-gray-200 "}` - } + className={({ selected }) => + `rounded w-1/3 p-1 text-sm text-gray-900 ${ + selected + ? " bg-theme text-white" + : " hover:bg-hover-gray" + }` + } > Labels - `w-1/2 rounded py-1 ${selected ? "bg-gray-300 font-semibold" : "hover:bg-gray-200 "}` - } + `rounded w-1/3 p-1 text-sm text-gray-900 ${ + selected + ? " bg-theme text-white" + : " hover:bg-hover-gray" + }` + } > States - - + + {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"); @@ -170,15 +182,15 @@ export const SidebarProgressStats: React.FC = ({ groupedIssues, issues }) +
{issue.name} - +
} completed={completeArray.length} total={totalArray.length} @@ -192,15 +204,15 @@ export const SidebarProgressStats: React.FC = ({ groupedIssues, issues }) +
{group} - +
} completed={groupedIssues[group].length} total={issues.length} diff --git a/apps/app/components/core/sidebar/single-progress-stats.tsx b/apps/app/components/core/sidebar/single-progress-stats.tsx index d89d4a80c..58e684f61 100644 --- a/apps/app/components/core/sidebar/single-progress-stats.tsx +++ b/apps/app/components/core/sidebar/single-progress-stats.tsx @@ -13,7 +13,7 @@ export const SingleProgressStats: React.FC = ({ completed, total, }) => ( -
+
{title}
diff --git a/apps/app/components/cycles/sidebar.tsx b/apps/app/components/cycles/sidebar.tsx index ce61afea6..982b108fb 100644 --- a/apps/app/components/cycles/sidebar.tsx +++ b/apps/app/components/cycles/sidebar.tsx @@ -7,19 +7,21 @@ import { mutate } from "swr"; // react-hook-form import { useForm } from "react-hook-form"; -import { Popover, Transition } from "@headlessui/react"; +import { Disclosure, Popover, Transition } from "@headlessui/react"; import DatePicker from "react-datepicker"; // icons import { CalendarDaysIcon, ChartPieIcon, - LinkIcon, - Squares2X2Icon, + ArrowLongRightIcon, TrashIcon, - UserIcon, + DocumentDuplicateIcon, + UserCircleIcon, + ChevronDownIcon, + DocumentIcon, } from "@heroicons/react/24/outline"; // ui -import { Loader, ProgressBar } from "components/ui"; +import { CustomMenu, Loader, ProgressBar } from "components/ui"; // hooks import useToast from "hooks/use-toast"; // services @@ -29,7 +31,7 @@ import { SidebarProgressStats } from "components/core"; import ProgressChart from "components/core/sidebar/progress-chart"; import { DeleteCycleModal } from "components/cycles"; // helpers -import { copyTextToClipboard } from "helpers/string.helper"; +import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helper"; import { groupBy } from "helpers/array.helper"; import { renderDateFormat, renderShortNumericDateFormat } from "helpers/date-time.helper"; // types @@ -100,6 +102,25 @@ export const CycleDetailsSidebar: React.FC = ({ }); }; + const handleCopyText = () => { + const originURL = + typeof window !== "undefined" && window.location.origin ? window.location.origin : ""; + + copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycle?.id}`) + .then(() => { + setToastAlert({ + type: "success", + title: "Cycle link copied to clipboard", + }); + }) + .catch(() => { + setToastAlert({ + type: "error", + title: "Some error occurred", + }); + }); + }; + useEffect(() => { if (cycle) reset({ @@ -116,218 +137,293 @@ export const CycleDetailsSidebar: React.FC = ({
{cycle ? ( <> -
-
- - - {cycleStatus === "current" - ? "In Progress" - : cycleStatus === "completed" - ? "Completed" - : cycleStatus === "upcoming" - ? "Upcoming" - : "Draft"} - -
-
- - {({ open }) => ( - <> - - - - {renderShortNumericDateFormat(`${cycle.start_date}`) - ? renderShortNumericDateFormat(`${cycle.start_date}`) - : "N/A"} - - - - - - { - submitChanges({ - start_date: renderDateFormat(date), - }); - setStartDateRange(date); - }} - selectsStart - startDate={startDateRange} - endDate={endDateRange} - inline - /> - - - - )} - - - {({ open }) => ( - <> - - - -{" "} - {renderShortNumericDateFormat(`${cycle.end_date}`) - ? renderShortNumericDateFormat(`${cycle.end_date}`) - : "N/A"} - - - - - - { - submitChanges({ - end_date: renderDateFormat(date), - }); - setEndDateRange(date); - }} - selectsEnd - startDate={startDateRange} - endDate={endDateRange} - minDate={startDateRange} - inline - /> - - - - )} - -
-
-
-

{cycle.name}

-
- - -
-
-
-
-
-
- -

Owned by

-
-
- {cycle.owned_by && - (cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? ( -
- {cycle.owned_by?.first_name} -
- ) : ( -
- {cycle.owned_by && - cycle.owned_by?.first_name && - cycle.owned_by?.first_name !== "" - ? cycle.owned_by?.first_name.charAt(0) - : cycle.owned_by?.email.charAt(0)} -
- ))} - {cycle.owned_by?.first_name !== "" - ? cycle.owned_by?.first_name - : cycle.owned_by?.email} -
+
+
+
+ + {capitalizeFirstLetter(cycleStatus)} +
-
-
- -

Progress

+
+ + {({ open }) => ( + <> + + + + {renderShortNumericDateFormat(`${cycle.start_date}`) + ? renderShortNumericDateFormat(`${cycle.start_date}`) + : "N/A"} + + + + + + { + submitChanges({ + start_date: renderDateFormat(date), + }); + setStartDateRange(date); + }} + selectsStart + startDate={startDateRange} + endDate={endDateRange} + maxDate={endDateRange} + shouldCloseOnSelect + inline + /> + + + + )} + + + + + + {({ open }) => ( + <> + + + + + {renderShortNumericDateFormat(`${cycle.end_date}`) + ? renderShortNumericDateFormat(`${cycle.end_date}`) + : "N/A"} + + + + + + { + submitChanges({ + end_date: renderDateFormat(date), + }); + setEndDateRange(date); + }} + selectsEnd + startDate={startDateRange} + endDate={endDateRange} + // minDate={startDateRange} + + inline + /> + + + + )} + +
+
+ +
+
+
+

{cycle.name}

+ + + + + Copy Link + + + setCycleDeleteModal(true)}> + + + Delete + + +
-
-
+ + + {cycle.description} + +
+ +
+
+
+ + Lead +
+ +
+ {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? ( + {cycle.owned_by.first_name} + ) : ( + + {cycle.owned_by.first_name.charAt(0)} + + )} + {cycle.owned_by.first_name} +
+
+ +
+
+ + Progress +
+ +
+ {groupedIssues.completed.length}/{cycleIssues?.length}
- {groupedIssues.completed.length}/{cycleIssues?.length}
-
-
- {isStartValid && isEndValid ? ( -
- -
- ) : ( - "" - )} - {issues.length > 0 ? ( - - ) : ( - "" - )} + +
+ + {({ open }) => ( +
+
+
+ Progress + {!open ? ( + + {Math.round( + (groupedIssues.completed.length / cycleIssues?.length) * 100 + )} + % + + ) : ( + "" + )} +
+ + + +
+ + + {isStartValid && isEndValid ? ( +
+
+
+ + + + + Pending Issues -{" "} + {cycleIssues?.length - groupedIssues.completed.length}{" "} + +
+ +
+
+ + Ideal +
+
+ + Current +
+
+
+
+ +
+
+ ) : ( + "" + )} + + +
+ )} + +
+ +
+ + {({ open }) => ( +
+
+
+ Other Information +
+ + + +
+ + + {issues.length > 0 ? ( +
+ +
+ ) : ( + "" + )} + + +
+ )} +
) : ( diff --git a/apps/app/components/cycles/single-cycle-card.tsx b/apps/app/components/cycles/single-cycle-card.tsx index d6685ff1e..f5591a737 100644 --- a/apps/app/components/cycles/single-cycle-card.tsx +++ b/apps/app/components/cycles/single-cycle-card.tsx @@ -275,12 +275,10 @@ export const SingleCycleCard: React.FC = (props) => { alt={cycle.owned_by.first_name} /> ) : ( - + )} {cycle.owned_by.first_name}
diff --git a/apps/app/components/ui/progress-bar.tsx b/apps/app/components/ui/progress-bar.tsx index 4bdfe73f0..f013913b0 100644 --- a/apps/app/components/ui/progress-bar.tsx +++ b/apps/app/components/ui/progress-bar.tsx @@ -63,7 +63,7 @@ export const ProgressBar: React.FC = ({ return ( {renderOuterCircle()} - + ); };