import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // helpers import { renderEmoji } from "helpers/emoji.helper"; import { renderShortDate } from "helpers/date-time.helper"; // constants import { NETWORK_CHOICES } from "constants/project"; export const CustomAnalyticsSidebarHeader = observer(() => { const router = useRouter(); const { workspaceSlug, projectId, cycleId, moduleId } = router.query; const { cycle: cycleStore, module: moduleStore, project: projectStore } = useMobxStore(); const cycleDetails = cycleId ? cycleStore.getCycleById(cycleId.toString()) : undefined; const moduleDetails = moduleId ? moduleStore.getModuleById(moduleId.toString()) : undefined; const projectDetails = workspaceSlug && projectId ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString()) : undefined; return ( <> {projectId ? ( cycleDetails ? ( <div className="hidden md:block h-full overflow-y-auto"> <h4 className="font-medium break-words">Analytics for {cycleDetails.name}</h4> <div className="space-y-4 mt-4"> <div className="flex items-center gap-2 text-xs"> <h6 className="text-custom-text-200">Lead</h6> <span>{cycleDetails.owned_by?.display_name}</span> </div> <div className="flex items-center gap-2 text-xs"> <h6 className="text-custom-text-200">Start Date</h6> <span> {cycleDetails.start_date && cycleDetails.start_date !== "" ? renderShortDate(cycleDetails.start_date) : "No start date"} </span> </div> <div className="flex items-center gap-2 text-xs"> <h6 className="text-custom-text-200">Target Date</h6> <span> {cycleDetails.end_date && cycleDetails.end_date !== "" ? renderShortDate(cycleDetails.end_date) : "No end date"} </span> </div> </div> </div> ) : moduleDetails ? ( <div className="hidden md:block h-full overflow-y-auto"> <h4 className="font-medium break-words">Analytics for {moduleDetails.name}</h4> <div className="space-y-4 mt-4"> <div className="flex items-center gap-2 text-xs"> <h6 className="text-custom-text-200">Lead</h6> <span>{moduleDetails.lead_detail?.display_name}</span> </div> <div className="flex items-center gap-2 text-xs"> <h6 className="text-custom-text-200">Start Date</h6> <span> {moduleDetails.start_date && moduleDetails.start_date !== "" ? renderShortDate(moduleDetails.start_date) : "No start date"} </span> </div> <div className="flex items-center gap-2 text-xs"> <h6 className="text-custom-text-200">Target Date</h6> <span> {moduleDetails.target_date && moduleDetails.target_date !== "" ? renderShortDate(moduleDetails.target_date) : "No end date"} </span> </div> </div> </div> ) : ( <div className="hidden md:flex md:flex-col h-full overflow-y-auto"> <div className="flex items-center gap-1"> {projectDetails?.emoji ? ( <div className="grid h-6 w-6 flex-shrink-0 place-items-center">{renderEmoji(projectDetails.emoji)}</div> ) : projectDetails?.icon_prop ? ( <div className="h-6 w-6 grid place-items-center flex-shrink-0"> {renderEmoji(projectDetails.icon_prop)} </div> ) : ( <span className="grid h-6 w-6 mr-1 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white"> {projectDetails?.name.charAt(0)} </span> )} <h4 className="font-medium break-words">{projectDetails?.name}</h4> </div> <div className="space-y-4 mt-4"> <div className="flex items-center gap-2 text-xs"> <h6 className="text-custom-text-200">Network</h6> <span>{NETWORK_CHOICES.find((n) => n.key === projectDetails?.network)?.label ?? ""}</span> </div> </div> </div> ) ) : null} </> ); });