metis-desk/modules/companies/src/web/dashboard/detail/ui/dashboard-details-dialog.tsx

import { EntityTable } from "@repo/rdx-ui/components/entity-list";
import { EntityListStatus } from "@repo/rdx-ui/components/entity-list-status";
import { FormDialog } from "@repo/rdx-ui/components/form-dialog";
import { entityListLabels } from "@repo/rdx-ui/lib/entity-list";
import { Button } from "@repo/shadcn-ui/components/button";
import { useRef } from "react";
import { useTranslation } from "react-i18next";

import { CompanyIdentity } from "../../../companies/shared/ui/company-identity";
import { DashboardNavigationButton } from "../../shared";
import { useDashboardDetailsDialogController } from "../controllers";
import { detailsTitle } from "../helpers";
import type { DashboardDetailsDialogProps } from "../types";

import { DashboardRecordsTable } from "./dashboard-records-table";

export function DashboardDetailsDialog(props: DashboardDetailsDialogProps) {
  const { details, onClose, onNavigate } = props;
  const {
    page,
    setPage,
    total,
    state,
    available,
    onRetry,
    companyItems,
    entries,
    paginationDisabled,
  } = useDashboardDetailsDialogController(props);
  const { t, i18n } = useTranslation("companies");
  const title = t(detailsTitle(details));
  const labels = entityListLabels(i18n.language);
  const rootRef = useRef<HTMLDivElement>(null);
  const range = labels.range(
    total ? (page - 1) * 10 + 1 : 0,
    Math.min(page * 10, total),
    total,
    t("dashboard.records")
  );

  return (
    <FormDialog
      cancelLabel={t("cancel")}
      layout="stable"
      onOpenChange={(open) => {
        if (!open) {
          onClose();
        }
      }}
      open
      title={title}
      wide
    >
      <div className="flex min-w-0 flex-col gap-3" ref={rootRef} tabIndex={-1}>
        {details.companies ? (
          <EntityTable
            columns={[
              {
                id: "name",
                hideable: false,
                label: t("name"),
                value: (item) => item.name,
                render: (item) => (
                  <DashboardNavigationButton
                    onClick={() =>
                      onNavigate({ area: "company", id: item.id, section: "inventory" })
                    }
                  >
                    <CompanyIdentity companyId={item.id} name={item.name} />
                  </DashboardNavigationButton>
                ),
              },
              {
                id: "assets",
                label: t("dashboard.registeredAssets"),
                value: (item) => item.assets,
                render: (item) => item.assets,
              },
              {
                id: "people",
                label: t("people"),
                value: (item) => item.people,
                render: (item) => item.people,
              },
            ]}
            emptyMessage={t("noCompanies")}
            entityLabel={t("title")}
            items={companyItems}
            locale={i18n.language}
            onRetry={onRetry}
            state={state}
            title={title}
          />
        ) : (
          <>
            <EntityListStatus
              onRetry={onRetry}
              retryFocus={() => rootRef.current}
              retryLabel={t("retry")}
              state={state}
            >
              {available ? range : null}
            </EntityListStatus>
            <DashboardRecordsTable
              activity={Boolean(details.activity)}
              items={entries}
              onNavigate={onNavigate}
              state={state}
              title={title}
            />
            {!details.activity && (
              <footer className="flex flex-wrap items-center justify-between gap-3 border-t pt-4 text-sm">
                <span>{available ? range : "—"}</span>
                <div className="flex items-center gap-2">
                  <Button
                    aria-label={labels.previous}
                    disabled={page === 1 || paginationDisabled}
                    onClick={() => setPage(page - 1)}
                    size="sm"
                    variant="outline"
                  >
                    ‹
                  </Button>
                  <span>
                    {labels.page} {page}
                  </span>
                  <Button
                    aria-label={labels.next}
                    disabled={page * 10 >= total || paginationDisabled}
                    onClick={() => setPage(page + 1)}
                    size="sm"
                    variant="outline"
                  >
                    ›
                  </Button>
                </div>
              </footer>
            )}
          </>
        )}
      </div>
    </FormDialog>
  );
}