74 lines
2.7 KiB
TypeScript
74 lines
2.7 KiB
TypeScript
import { ClockIcon } 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 } from "../../shared";
|
|
import { dashboardApi, dashboardKeys } from "../../shared/api";
|
|
import type { DashboardNavigation } from "../../shared/helpers";
|
|
import { KIND_ICONS, entryDestination } from "../../shared/helpers";
|
|
|
|
export function DashboardActivityPanel({
|
|
companyId,
|
|
onDetails,
|
|
onNavigate,
|
|
}: {
|
|
companyId: string | undefined;
|
|
onDetails: () => void;
|
|
onNavigate: (destination: DashboardNavigation) => void;
|
|
}) {
|
|
const { t, i18n } = useTranslation("companies");
|
|
const activity = useQuery({
|
|
queryKey: dashboardKeys.block("activity", companyId),
|
|
queryFn: ({ signal }) => dashboardApi.activity(signal, companyId),
|
|
staleTime: 0,
|
|
});
|
|
|
|
const date = (value: string | null) =>
|
|
value
|
|
? new Intl.DateTimeFormat(i18n.language, { dateStyle: "medium", timeStyle: "short" }).format(
|
|
new Date(value)
|
|
)
|
|
: "—";
|
|
|
|
return (
|
|
<DashboardPanel action={onDetails} icon={<ClockIcon />} title={t("dashboard.recentActivity")}>
|
|
<BlockState
|
|
empty={!activity.data?.items.length}
|
|
emptyText={t("dashboard.noRecentActivity")}
|
|
query={activity}
|
|
>
|
|
<ol className="grid gap-5">
|
|
{activity.data?.items.slice(0, 4).map((item) => {
|
|
const Icon = KIND_ICONS[item.kind];
|
|
|
|
return (
|
|
<li
|
|
className="grid grid-cols-[24px_minmax(0,1fr)] items-start gap-3 text-sm leading-[1.5] shell:grid-cols-[110px_24px_minmax(0,1fr)]"
|
|
key={item.eventId ?? item.id}
|
|
>
|
|
<time
|
|
className="col-span-full text-xs text-muted-foreground shell:col-span-1"
|
|
dateTime={item.recordedAt ?? undefined}
|
|
>
|
|
{date(item.recordedAt)}
|
|
</time>
|
|
<Icon aria-hidden="true" className="size-5 text-primary shrink-0" />
|
|
<div>
|
|
<DashboardNavigationButton onClick={() => onNavigate(entryDestination(item))}>
|
|
{t("dashboard.recordUpdated", { name: item.name })}
|
|
</DashboardNavigationButton>
|
|
<p className="text-xs text-muted-foreground">
|
|
<CompanyIdentity companyId={item.companyId} name={item.companyName} />
|
|
{item.actorName ? ` · ${item.actorName}` : ""}
|
|
</p>
|
|
</div>
|
|
</li>
|
|
);
|
|
})}
|
|
</ol>
|
|
</BlockState>
|
|
</DashboardPanel>
|
|
);
|
|
}
|