90 lines
3.0 KiB
TypeScript
90 lines
3.0 KiB
TypeScript
import { Building2Icon } from "@repo/rdx-ui/lib/icons";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import { CompanyIdentity } from "../../../companies/shared/ui/company-identity";
|
|
import {
|
|
BlockState,
|
|
DashboardNavigationButton,
|
|
DashboardPanel,
|
|
DashboardTable,
|
|
} from "../../shared";
|
|
import { dashboardApi, dashboardKeys } from "../../shared/api";
|
|
import type { DashboardNavigation } from "../../shared/helpers";
|
|
|
|
export function DashboardCompaniesPanel({
|
|
companyId,
|
|
onDetails,
|
|
onNavigate,
|
|
}: {
|
|
companyId: string | undefined;
|
|
onDetails: () => void;
|
|
onNavigate: (destination: DashboardNavigation) => void;
|
|
}) {
|
|
const { t } = useTranslation("companies");
|
|
const totals = useQuery({
|
|
queryKey: dashboardKeys.block("companies", companyId),
|
|
queryFn: ({ signal }) => dashboardApi.companies(signal, companyId),
|
|
staleTime: 0,
|
|
});
|
|
|
|
return (
|
|
<DashboardPanel
|
|
action={onDetails}
|
|
icon={<Building2Icon />}
|
|
title={t("dashboard.companySummary")}
|
|
>
|
|
<BlockState empty={!totals.data?.items.length} emptyText={t("noCompanies")} query={totals}>
|
|
<DashboardTable caption={t("dashboard.companySummary")}>
|
|
<thead>
|
|
<tr>
|
|
{[t("companyLabel"), t("dashboard.registeredAssets"), t("people")].map((label) => (
|
|
<th key={label} scope="col">
|
|
{label}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{totals.data?.items.slice(0, 5).map((item) => (
|
|
<tr key={item.id}>
|
|
<td>
|
|
<DashboardNavigationButton
|
|
onClick={() =>
|
|
onNavigate({ area: "company", id: item.id, section: "inventory" })
|
|
}
|
|
>
|
|
<CompanyIdentity companyId={item.id} name={item.name} />
|
|
</DashboardNavigationButton>
|
|
</td>
|
|
<td>
|
|
<DashboardNavigationButton
|
|
onClick={() =>
|
|
onNavigate({ area: "company", id: item.id, section: "inventory" })
|
|
}
|
|
>
|
|
<span className="sr-only">
|
|
{t("dashboard.registeredAssets")} · {item.name}:{" "}
|
|
</span>
|
|
{item.assets}
|
|
</DashboardNavigationButton>
|
|
</td>
|
|
<td>
|
|
<DashboardNavigationButton
|
|
onClick={() => onNavigate({ area: "company", id: item.id, section: "people" })}
|
|
>
|
|
<span className="sr-only">
|
|
{t("people")} · {item.name}:{" "}
|
|
</span>
|
|
{item.people}
|
|
</DashboardNavigationButton>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</DashboardTable>
|
|
</BlockState>
|
|
</DashboardPanel>
|
|
);
|
|
}
|