import { useRouter } from "next/router"; import Link from "next/link"; import useSWR from "swr"; // headless ui import { Disclosure, Transition } from "@headlessui/react"; // services import userService from "services/user.service"; // hooks import useUser from "hooks/use-user"; // ui import { Icon, Loader, Tooltip } from "components/ui"; // icons import { EditOutlined } from "@mui/icons-material"; // helpers import { renderLongDetailDateFormat } from "helpers/date-time.helper"; import { renderEmoji } from "helpers/emoji.helper"; // fetch-keys import { USER_PROFILE_PROJECT_SEGREGATION } from "constants/fetch-keys"; export const ProfileSidebar = () => { const router = useRouter(); const { workspaceSlug, userId } = router.query; const { user } = useUser(); const { data: userProjectsData } = useSWR( workspaceSlug && userId ? USER_PROFILE_PROJECT_SEGREGATION(workspaceSlug.toString(), userId.toString()) : null, workspaceSlug && userId ? () => userService.getUserProfileProjectsSegregation(workspaceSlug.toString(), userId.toString()) : null ); // Create a date object for the current time in the specified timezone const currentTime = new Date(); const formatter = new Intl.DateTimeFormat("en-US", { timeZone: userProjectsData?.user_data.user_timezone, hour12: false, // Use 24-hour format hour: "2-digit", minute: "2-digit", }); const timeString = formatter.format(currentTime); const userDetails = [ { label: "Joined on", value: renderLongDetailDateFormat(userProjectsData?.user_data.date_joined ?? ""), }, { label: "Timezone", value: ( {timeString}{" "} {userProjectsData?.user_data.user_timezone} ), }, ]; return (
{userProjectsData ? ( <>
{user?.id === userId && (
)} {userProjectsData.user_data.display_name}
{userProjectsData.user_data.avatar && userProjectsData.user_data.avatar !== "" ? ( {userProjectsData.user_data.display_name} ) : (
{userProjectsData.user_data.display_name?.[0]}
)}

{userProjectsData.user_data.first_name} {userProjectsData.user_data.last_name}

({userProjectsData.user_data.display_name})
{userDetails.map((detail) => (
{detail.label}
{detail.value}
))}
{userProjectsData.project_data.map((project, index) => { const totalIssues = project.created_issues + project.assigned_issues + project.pending_issues + project.completed_issues; const completedIssuePercentage = project.assigned_issues === 0 ? 0 : Math.round((project.completed_issues / project.assigned_issues) * 100); return ( {({ open }) => (
{project.emoji ? (
{renderEmoji(project.emoji)}
) : project.icon_prop ? (
{renderEmoji(project.icon_prop)}
) : (
{project?.name.charAt(0)}
)}
{project.name}
{project.assigned_issues > 0 && (
{completedIssuePercentage}%
)}
{totalIssues > 0 && (
)}
Created
{project.created_issues} Issues
Assigned
{project.assigned_issues} Issues
Due
{project.pending_issues} Issues
Completed
{project.completed_issues} Issues
)} ); })}
) : (
)}
); };