import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; // hooks import { useCycle, useMember, useModule, useProject } from "hooks/store"; // helpers import { renderEmoji } from "helpers/emoji.helper"; import { renderFormattedDate } from "helpers/date-time.helper"; // constants import { NETWORK_CHOICES } from "constants/project"; export const CustomAnalyticsSidebarHeader = observer(() => { const router = useRouter(); const { projectId, cycleId, moduleId } = router.query; const { getProjectById } = useProject(); const { getCycleById } = useCycle(); const { getModuleById } = useModule(); const { getUserDetails } = useMember(); const cycleDetails = cycleId ? getCycleById(cycleId.toString()) : undefined; const moduleDetails = moduleId ? getModuleById(moduleId.toString()) : undefined; const projectDetails = projectId ? getProjectById(projectId.toString()) : undefined; const cycleOwnerDetails = cycleDetails ? getUserDetails(cycleDetails.owned_by) : undefined; return ( <> {projectId ? ( cycleDetails ? (

Analytics for {cycleDetails.name}

Lead
{cycleOwnerDetails?.display_name}
Start Date
{cycleDetails.start_date && cycleDetails.start_date !== "" ? renderFormattedDate(cycleDetails.start_date) : "No start date"}
Target Date
{cycleDetails.end_date && cycleDetails.end_date !== "" ? renderFormattedDate(cycleDetails.end_date) : "No end date"}
) : moduleDetails ? (

Analytics for {moduleDetails.name}

Lead
{moduleDetails.lead_detail?.display_name}
Start Date
{moduleDetails.start_date && moduleDetails.start_date !== "" ? renderFormattedDate(moduleDetails.start_date) : "No start date"}
Target Date
{moduleDetails.target_date && moduleDetails.target_date !== "" ? renderFormattedDate(moduleDetails.target_date) : "No end date"}
) : (
{projectDetails?.emoji ? (
{renderEmoji(projectDetails.emoji)}
) : projectDetails?.icon_prop ? (
{renderEmoji(projectDetails.icon_prop)}
) : ( {projectDetails?.name.charAt(0)} )}

{projectDetails?.name}

Network
{NETWORK_CHOICES.find((n) => n.key === projectDetails?.network)?.label ?? ""}
) ) : null} ); });