forked from github/plane
104 lines
4.4 KiB
TypeScript
104 lines
4.4 KiB
TypeScript
import { observer } from "mobx-react-lite";
|
|
import { useRouter } from "next/router";
|
|
// hooks
|
|
import { ProjectLogo } from "@/components/project";
|
|
import { NETWORK_CHOICES } from "@/constants/project";
|
|
import { renderFormattedDate } from "@/helpers/date-time.helper";
|
|
import { useCycle, useMember, useModule, useProject } from "@/hooks/store";
|
|
// components
|
|
// helpers
|
|
// constants
|
|
|
|
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_id) : undefined;
|
|
const moduleLeadDetails = moduleDetails && moduleDetails.lead_id ? getUserDetails(moduleDetails.lead_id) : undefined;
|
|
|
|
return (
|
|
<>
|
|
{projectId ? (
|
|
cycleDetails ? (
|
|
<div className="h-full overflow-y-auto">
|
|
<h4 className="break-words font-medium">Analytics for {cycleDetails.name}</h4>
|
|
<div className="mt-4 space-y-4">
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<h6 className="text-custom-text-200">Lead</h6>
|
|
<span>{cycleOwnerDetails?.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 !== ""
|
|
? renderFormattedDate(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 !== ""
|
|
? renderFormattedDate(cycleDetails.end_date)
|
|
: "No end date"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : moduleDetails ? (
|
|
<div className="h-full overflow-y-auto">
|
|
<h4 className="break-words font-medium">Analytics for {moduleDetails.name}</h4>
|
|
<div className="mt-4 space-y-4">
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<h6 className="text-custom-text-200">Lead</h6>
|
|
{moduleLeadDetails && <span>{moduleLeadDetails?.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 !== ""
|
|
? renderFormattedDate(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 !== ""
|
|
? renderFormattedDate(moduleDetails.target_date)
|
|
: "No end date"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="h-full overflow-y-auto">
|
|
<div className="flex items-center gap-1">
|
|
{projectDetails && (
|
|
<span className="h-6 w-6 grid place-items-center flex-shrink-0">
|
|
<ProjectLogo logo={projectDetails.logo_props} />
|
|
</span>
|
|
)}
|
|
<h4 className="break-words font-medium">{projectDetails?.name}</h4>
|
|
</div>
|
|
<div className="mt-4 space-y-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}
|
|
</>
|
|
);
|
|
});
|