plane/apps/app/components/core/sidebar/sidebar-progress-stats.tsx

import React from "react";

import Image from "next/image";
import { useRouter } from "next/router";

import useSWR from "swr";

// headless ui
import { Tab } from "@headlessui/react";
// services
import issuesServices from "services/issues.service";
import projectService from "services/project.service";
// hooks
import useLocalStorage from "hooks/use-local-storage";
import useIssuesView from "hooks/use-issues-view";
// components
import { SingleProgressStats } from "components/core";
// ui
import { Avatar } from "components/ui";
// icons
import User from "public/user.png";
// types
import { IIssue, IIssueLabels, IModule, UserAuth } from "types";
// fetch-keys
import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys";
// types
type Props = {
  groupedIssues: any;
  issues: IIssue[];
  module?: IModule;
  userAuth?: UserAuth;
  roundedTab?: boolean;
  noBackground?: boolean;
};

const stateGroupColours: {
  [key: string]: string;
} = {
  backlog: "#3f76ff",
  unstarted: "#ff9e9e",
  started: "#d687ff",
  cancelled: "#ff5353",
  completed: "#096e8d",
};

export const SidebarProgressStats: React.FC<Props> = ({
  groupedIssues,
  issues,
  module,
  userAuth,
  roundedTab,
  noBackground,
}) => {
  const router = useRouter();
  const { workspaceSlug, projectId } = router.query;

  const { filters, setFilters } = useIssuesView();

  const { storedValue: tab, setValue: setTab } = useLocalStorage("tab", "Assignees");

  const { data: issueLabels } = useSWR<IIssueLabels[]>(
    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
    workspaceSlug && projectId
      ? () => issuesServices.getIssueLabels(workspaceSlug as string, projectId as string)
      : null
  );

  const { data: members } = useSWR(
    workspaceSlug && projectId ? PROJECT_MEMBERS(workspaceSlug as string) : null,
    workspaceSlug && projectId
      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
      : null
  );

  const currentValue = (tab: string | null) => {
    switch (tab) {
      case "Assignees":
        return 0;
      case "Labels":
        return 1;
      case "States":
        return 2;

      default:
        return 0;
    }
  };
  return (
    <Tab.Group
      defaultIndex={currentValue(tab)}
      onChange={(i) => {
        switch (i) {
          case 0:
            return setTab("Assignees");
          case 1:
            return setTab("Labels");
          case 2:
            return setTab("States");

          default:
            return setTab("Assignees");
        }
      }}
    >
      <Tab.List
        as="div"
        className={`flex w-full items-center gap-2 justify-between rounded-md ${
          noBackground ? "" : "bg-brand-surface-1"
        } px-1 py-1.5 
        ${module ? "text-xs" : "text-sm"} `}
      >
        <Tab
          className={({ selected }) =>
            `w-full  ${
              roundedTab ? "rounded-3xl border border-brand-base" : "rounded"
            } px-3 py-1 text-brand-base ${
              selected ? " bg-brand-accent text-white" : "  hover:bg-brand-surface-2"
            }`
          }
        >
          Assignees
        </Tab>
        <Tab
          className={({ selected }) =>
            `w-full ${
              roundedTab ? "rounded-3xl border border-brand-base" : "rounded"
            } px-3 py-1 text-brand-base ${
              selected ? " bg-brand-accent text-white" : " hover:bg-brand-surface-2"
            }`
          }
        >
          Labels
        </Tab>
        <Tab
          className={({ selected }) =>
            `w-full ${
              roundedTab ? "rounded-3xl border border-brand-base" : "rounded"
            } px-3 py-1  text-brand-base ${
              selected ? " bg-brand-accent text-white" : " hover:bg-brand-surface-2"
            }`
          }
        >
          States
        </Tab>
      </Tab.List>
      <Tab.Panels className="flex w-full items-center justify-between pt-1 text-brand-secondary">
        <Tab.Panel as="div" className="flex w-full flex-col text-xs">
          {members?.map((member, index) => {
            const totalArray = issues?.filter((i) => i?.assignees?.includes(member.member.id));
            const completeArray = totalArray?.filter((i) => i.state_detail.group === "completed");

            if (totalArray.length > 0) {
              return (
                <SingleProgressStats
                  key={index}
                  title={
                    <>
                      <Avatar user={member.member} />
                      <span>{member.member.first_name}</span>
                    </>
                  }
                  completed={completeArray.length}
                  total={totalArray.length}
                  onClick={() => {
                    if (filters?.assignees?.includes(member.member.id))
                      setFilters({
                        assignees: filters?.assignees?.filter((a) => a !== member.member.id),
                      });
                    else
                      setFilters({ assignees: [...(filters?.assignees ?? []), member.member.id] });
                  }}
                  selected={filters?.assignees?.includes(member.member.id)}
                />
              );
            }
          })}
          {issues?.filter((i) => i?.assignees?.length === 0).length > 0 ? (
            <SingleProgressStats
              title={
                <>
                  <div className="h-5 w-5 rounded-full border-2 border-white bg-brand-surface-2">
                    <Image
                      src={User}
                      height="100%"
                      width="100%"
                      className="rounded-full"
                      alt="User"
                    />
                  </div>
                  <span>No assignee</span>
                </>
              }
              completed={
                issues?.filter(
                  (i) => i?.state_detail.group === "completed" && i.assignees?.length === 0
                ).length
              }
              total={issues?.filter((i) => i?.assignees?.length === 0).length}
            />
          ) : (
            ""
          )}
        </Tab.Panel>
        <Tab.Panel as="div" className="w-full space-y-1">
          {issueLabels?.map((label, index) => {
            const totalArray = issues?.filter((i) => i?.labels?.includes(label.id));
            const completeArray = totalArray?.filter((i) => i?.state_detail.group === "completed");

            if (totalArray.length > 0) {
              return (
                <SingleProgressStats
                  key={index}
                  title={
                    <div className="flex items-center gap-2">
                      <span
                        className="block h-3 w-3 rounded-full"
                        style={{
                          backgroundColor:
                            label.color && label.color !== "" ? label.color : "#000000",
                        }}
                      />
                      <span className="text-xs capitalize">{label?.name}</span>
                    </div>
                  }
                  completed={completeArray.length}
                  total={totalArray.length}
                  onClick={() => {
                    if (filters.labels?.includes(label.id))
                      setFilters({
                        labels: filters?.labels?.filter((l) => l !== label.id),
                      });
                    else setFilters({ labels: [...(filters?.labels ?? []), label.id] });
                  }}
                  selected={filters?.labels?.includes(label.id)}
                />
              );
            }
          })}
        </Tab.Panel>
        <Tab.Panel as="div" className="flex w-full flex-col ">
          {Object.keys(groupedIssues).map((group, index) => (
            <SingleProgressStats
              key={index}
              title={
                <div className="flex items-center gap-2">
                  <span
                    className="block h-3 w-3 rounded-full "
                    style={{
                      backgroundColor: stateGroupColours[group],
                    }}
                  />
                  <span className="text-xs capitalize">{group}</span>
                </div>
              }
              completed={groupedIssues[group]}
              total={issues.length}
            />
          ))}
        </Tab.Panel>
      </Tab.Panels>
    </Tab.Group>
  );
};