metis-desk/modules/companies/src/web/components/dashboard-attention-panel.tsx

import {
  BoxIcon,
  ChevronRightIcon,
  FileKeyIcon,
  TriangleAlertIcon,
  UserRoundXIcon,
  UsersIcon,
} from "@repo/shadcn-ui/lib/icons";
import { useQuery } from "@tanstack/react-query";
import { useTranslation } from "react-i18next";

import type { DashboardIssue } from "../../common/dashboard";

import { dashboardApi, dashboardKeys } from "./dashboard-api";
import { BlockState } from "./dashboard-block";
import { DashboardPanel } from "./dashboard-panel";

const ISSUE_ICONS = {
  certificate: FileKeyIcon,
  license: FileKeyIcon,
  profile: UsersIcon,
  missing_site: BoxIcon,
  inactive_person: UserRoundXIcon,
};

export function DashboardAttentionPanel({
  companyId,
  onDetails,
}: {
  companyId: string | undefined;
  onDetails: (issue: DashboardIssue) => void;
}) {
  const { t } = useTranslation("companies");
  const attention = useQuery({
    queryKey: dashboardKeys.block("attention", companyId),
    queryFn: ({ signal }) => dashboardApi.attention(signal, companyId),
    staleTime: 0,
  });

  return (
    <DashboardPanel
      icon={<TriangleAlertIcon className="text-destructive" />}
      title={t("dashboard.attention")}
    >
      <BlockState
        empty={!attention.data?.items.length}
        emptyText={t("dashboard.noAttention")}
        query={attention}
      >
        <ul className="divide-y">
          {attention.data?.items.map((item) => {
            const Icon = ISSUE_ICONS[item.kind];
            return (
              <li key={item.kind}>
                <button
                  className="flex w-full items-center gap-4 py-4 text-left text-sm leading-[1.5] focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-3 focus-visible:outline-ring"
                  onClick={() => onDetails(item.kind)}
                  type="button"
                >
                  <Icon aria-hidden="true" className="size-5" />
                  <strong
                    className={
                      item.count
                        ? "text-xl leading-[1.5] text-amber-600 dark:text-amber-400"
                        : "text-xl leading-[1.5] text-muted-foreground"
                    }
                  >
                    {item.count}
                  </strong>
                  <span className="flex-1">{t(`dashboard.issues.${item.kind}`)}</span>
                  <ChevronRightIcon aria-hidden="true" className="size-4 shrink-0" />
                </button>
              </li>
            );
          })}
        </ul>
      </BlockState>
    </DashboardPanel>
  );
}