plane/apps/app/components/profile/sidebar.tsx

import { useRouter } from "next/router";
import Link from "next/link";

import useSWR from "swr";

// next-themes
import { useTheme } from "next-themes";
// 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 { render12HourFormatTime, 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 { theme } = useTheme();

  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
  );

  const userDetails = [
    {
      label: "Joined on",
      value: renderLongDetailDateFormat(userProjectsData?.user_data.date_joined ?? ""),
    },
    {
      label: "Timezone",
      value: (
        <span>
          {render12HourFormatTime(new Date())}{" "}
          <span className="text-custom-text-200">{userProjectsData?.user_data.user_timezone}</span>
        </span>
      ),
    },
  ];

  return (
    <div
      className="flex-shrink-0 md:h-full w-full md:w-80 overflow-y-auto"
      style={{
        boxShadow:
          theme === "light"
            ? "0px 1px 4px 0px rgba(0, 0, 0, 0.01), 0px 4px 8px 0px rgba(0, 0, 0, 0.02), 0px 1px 12px 0px rgba(0, 0, 0, 0.12)"
            : "0px 0px 4px 0px rgba(0, 0, 0, 0.20), 0px 2px 6px 0px rgba(0, 0, 0, 0.50)",
      }}
    >
      {userProjectsData ? (
        <>
          <div className="relative h-32">
            {user?.id === userId && (
              <div className="absolute top-3.5 right-3.5 h-5 w-5 bg-white rounded grid place-items-center">
                <Link href={`/${workspaceSlug}/me/profile`}>
                  <a className="grid place-items-center text-black">
                    <EditOutlined
                      sx={{
                        fontSize: 12,
                      }}
                    />
                  </a>
                </Link>
              </div>
            )}
            <img
              src={
                userProjectsData.user_data.cover_image ??
                "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"
              }
              alt={userProjectsData.user_data.display_name}
              className="h-32 w-full object-cover"
            />
            <div className="absolute -bottom-[26px] left-5 h-[52px] w-[52px] rounded">
              {userProjectsData.user_data.avatar && userProjectsData.user_data.avatar !== "" ? (
                <img
                  src={userProjectsData.user_data.avatar}
                  alt={userProjectsData.user_data.display_name}
                  className="rounded"
                />
              ) : (
                <div className="bg-custom-background-90 flex justify-center items-center w-[52px] h-[52px] rounded text-custom-text-100">
                  {userProjectsData.user_data.display_name?.[0]}
                </div>
              )}
            </div>
          </div>
          <div className="px-5">
            <div className="mt-[38px]">
              <h4 className="text-lg font-semibold">
                {userProjectsData.user_data.first_name} {userProjectsData.user_data.last_name}
              </h4>
              <h6 className="text-custom-text-200 text-sm">
                ({userProjectsData.user_data.display_name})
              </h6>
            </div>
            <div className="mt-6 space-y-5">
              {userDetails.map((detail) => (
                <div key={detail.label} className="flex items-center gap-4 text-sm">
                  <div className="flex-shrink-0 text-custom-text-200 w-2/5">{detail.label}</div>
                  <div className="font-medium w-3/5 break-words">{detail.value}</div>
                </div>
              ))}
            </div>
            <div className="mt-9 divide-y divide-custom-border-100">
              {userProjectsData.project_data.map((project, index) => {
                const totalIssues =
                  project.created_issues +
                  project.assigned_issues +
                  project.pending_issues +
                  project.completed_issues;
                const totalAssignedIssues = totalIssues - project.created_issues;

                const completedIssuePercentage =
                  totalAssignedIssues === 0
                    ? 0
                    : Math.round((project.completed_issues / totalAssignedIssues) * 100);

                return (
                  <Disclosure
                    key={project.id}
                    as="div"
                    className={`${index === 0 ? "pb-3" : "py-3"}`}
                  >
                    {({ open }) => (
                      <div className="w-full">
                        <Disclosure.Button className="flex items-center justify-between gap-2 w-full">
                          <div className="flex items-center gap-2 w-3/4">
                            {project.emoji ? (
                              <div className="flex-shrink-0 grid h-7 w-7 place-items-center">
                                {renderEmoji(project.emoji)}
                              </div>
                            ) : project.icon_prop ? (
                              <div className="flex-shrink-0 h-7 w-7 grid place-items-center">
                                {renderEmoji(project.icon_prop)}
                              </div>
                            ) : (
                              <div className="flex-shrink-0 grid place-items-center h-7 w-7 rounded bg-custom-background-90 uppercase text-custom-text-100 text-xs">
                                {project?.name.charAt(0)}
                              </div>
                            )}
                            <div className="text-sm font-medium truncate break-words">
                              {project.name}
                            </div>
                          </div>
                          <div className="flex-shrink-0 flex items-center gap-2">
                            <Tooltip tooltipContent="Completion percentage" position="left">
                              <div
                                className={`px-1 py-0.5 text-xs font-medium rounded ${
                                  completedIssuePercentage <= 35
                                    ? "bg-red-500/10 text-red-500"
                                    : completedIssuePercentage <= 70
                                    ? "bg-yellow-500/10 text-yellow-500"
                                    : "bg-green-500/10 text-green-500"
                                }`}
                              >
                                {completedIssuePercentage}%
                              </div>
                            </Tooltip>
                            <Icon iconName="arrow_drop_down" className="!text-lg" />
                          </div>
                        </Disclosure.Button>
                        <Transition
                          show={open}
                          enter="transition duration-100 ease-out"
                          enterFrom="transform opacity-0"
                          enterTo="transform opacity-100"
                          leave="transition duration-75 ease-out"
                          leaveFrom="transform opacity-100"
                          leaveTo="transform opacity-0"
                        >
                          <Disclosure.Panel className="pl-9 mt-5">
                            {totalIssues > 0 && (
                              <div className="flex items-center gap-0.5">
                                <div
                                  className="h-1 rounded"
                                  style={{
                                    backgroundColor: "#203b80",
                                    width: `${(project.created_issues / totalIssues) * 100}%`,
                                  }}
                                />
                                <div
                                  className="h-1 rounded"
                                  style={{
                                    backgroundColor: "#3f76ff",
                                    width: `${(project.assigned_issues / totalIssues) * 100}%`,
                                  }}
                                />
                                <div
                                  className="h-1 rounded"
                                  style={{
                                    backgroundColor: "#f59e0b",
                                    width: `${(project.pending_issues / totalIssues) * 100}%`,
                                  }}
                                />
                                <div
                                  className="h-1 rounded"
                                  style={{
                                    backgroundColor: "#16a34a",
                                    width: `${(project.completed_issues / totalIssues) * 100}%`,
                                  }}
                                />
                              </div>
                            )}
                            <div className="mt-7 space-y-5 text-sm text-custom-text-200">
                              <div className="flex items-center justify-between gap-2">
                                <div className="flex items-center gap-2">
                                  <div className="h-2.5 w-2.5 bg-[#203b80] rounded-sm" />
                                  Created
                                </div>
                                <div className="font-medium">{project.created_issues} Issues</div>
                              </div>
                              <div className="flex items-center justify-between gap-2">
                                <div className="flex items-center gap-2">
                                  <div className="h-2.5 w-2.5 bg-[#3f76ff] rounded-sm" />
                                  Assigned
                                </div>
                                <div className="font-medium">{project.assigned_issues} Issues</div>
                              </div>
                              <div className="flex items-center justify-between gap-2">
                                <div className="flex items-center gap-2">
                                  <div className="h-2.5 w-2.5 bg-[#f59e0b] rounded-sm" />
                                  Due
                                </div>
                                <div className="font-medium">{project.pending_issues} Issues</div>
                              </div>
                              <div className="flex items-center justify-between gap-2">
                                <div className="flex items-center gap-2">
                                  <div className="h-2.5 w-2.5 bg-[#16a34a] rounded-sm" />
                                  Completed
                                </div>
                                <div className="font-medium">{project.completed_issues} Issues</div>
                              </div>
                            </div>
                          </Disclosure.Panel>
                        </Transition>
                      </div>
                    )}
                  </Disclosure>
                );
              })}
            </div>
          </div>
        </>
      ) : (
        <Loader className="px-5 space-y-7">
          <Loader.Item height="130px" />
          <div className="space-y-5">
            <Loader.Item height="20px" />
            <Loader.Item height="20px" />
            <Loader.Item height="20px" />
            <Loader.Item height="20px" />
            <Loader.Item height="20px" />
          </div>
        </Loader>
      )}
    </div>
  );
};