[WEB-3681]feat: added user timezone dates for cycle (#2807)

* feat: added user timezone dates for cycle

* *chore: added translations
*chore: refactored user timezone functions

---------

Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com>
This commit is contained in:
Vamsi Krishna
2025-03-26 21:07:33 +05:30
committed by GitHub
parent 100dde5688
commit 790a703e30
2 changed files with 3 additions and 19 deletions

View File

@@ -18,7 +18,7 @@ const ProgressDonut = (props: Props) => {
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
>
<CircularProgressIndicator size={82} percentage={percentage} strokeWidth={3}>
<CircularProgressIndicator size={65} percentage={percentage} strokeWidth={3}>
<span className="text-[20px] text-custom-primary-200 font-bold block text-center">
{progress ? (isHovering ? days_left : `${percentage ? percentage.toFixed(0) : 0}%`) : "0%"}
</span>

View File

@@ -1,17 +1,14 @@
"use client";
import React, { FC, useRef } from "react";
import { format, parseISO, startOfToday } from "date-fns";
import { format, startOfToday } from "date-fns";
// types
import { ArrowRight, CalendarDays } from "lucide-react";
// icons
import { ICycle, TCycleProgress } from "@plane/types";
import { ControlLink, Loader, Tooltip } from "@plane/ui";
import { CycleListItemAction } from "@/components/cycles";
// helpers
import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
import { findHowManyDaysLeft } from "@/helpers/date-time.helper";
import { useMember } from "@/hooks/store";
import { useAppRouter } from "@/hooks/use-app-router";
import ProgressDonut from "./progress-donut";
@@ -26,12 +23,10 @@ type Props = {
export const CycleProgressHeader: FC<Props> = (props: Props) => {
const { workspaceSlug, projectId, cycleId, progress, cycleDetails } = props;
const { getUserDetails } = useMember();
// router
const router = useAppRouter();
const parentRef = useRef(null);
const createdByDetails = cycleDetails.created_by ? getUserDetails(cycleDetails.created_by) : undefined;
const progressToday = progress && progress.find((d) => d.date === format(startOfToday(), "yyyy-MM-dd"));
// handlers
const handleControlLinkClick = () => {
@@ -50,7 +45,7 @@ export const CycleProgressHeader: FC<Props> = (props: Props) => {
>
<div className="px-page-x flex items-center justify-between py-4 bg-custom-sidebar-background-100 w-full">
<div className="flex gap-6 h-full truncate">
{progress === null && <Loader.Item width="82px" height="82px" className="flex-shrink-0 rounded-full" />}
{progress === null && <Loader.Item width="65px" height="65px" className="flex-shrink-0 rounded-full" />}
{progress && (
<ProgressDonut progress={progressToday} days_left={findHowManyDaysLeft(cycleDetails.end_date) ?? 0} />
)}
@@ -61,17 +56,6 @@ export const CycleProgressHeader: FC<Props> = (props: Props) => {
{cycleDetails.name}
</div>
</Tooltip>
<div className="flex gap-2">
{/* Duration */}
<div className="flex gap-1 text-xs text-custom-text-300 font-medium items-center">
<CalendarDays className="h-3 w-3 flex-shrink-0 my-auto" />
{cycleDetails.start_date && <span>{format(parseISO(cycleDetails.start_date), "MMM dd, yyyy")}</span>}
<ArrowRight className="h-3 w-3 flex-shrink-0 my-auto" />
{cycleDetails.end_date && <span>{format(parseISO(cycleDetails.end_date), "MMM dd, yyyy")}</span>}
</div>
{/* created by */}
{createdByDetails && <ButtonAvatars showTooltip={false} userIds={createdByDetails?.id} />}
</div>
</div>
</div>
<div className="flex shrink-0 gap-4 items-center" onClick={handleEventPropagation}>