David
68980d9131
- Added UsersIcon to UserManagement for better visual representation. - Updated Spanish localization for "noValue" to use a dash instead of "Sin datos". - Introduced LayoutTemplateIcon in ResourceCatalogPage for improved UI. - Integrated LayersIcon in ResourcesPage to enhance user experience. - Updated package.json test scripts to include new test files. - Enhanced DetailSection component to support accordion functionality. - Modified EntityListHeader to accept an icon prop for better UI consistency. - Added new CountBadge and TimeLine components for better data representation. - Implemented asset workstation action logic and UI components for asset management. - Created tests for CountBadge and TimeLine components to ensure functionality.
80 lines
2.5 KiB
TypeScript
80 lines
2.5 KiB
TypeScript
import {
|
|
BoxIcon,
|
|
ChevronRightIcon,
|
|
FileKeyIcon,
|
|
TriangleAlertIcon,
|
|
UserRoundXIcon,
|
|
WorkProfileIcon,
|
|
} from "@repo/rdx-ui/lib/icons";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import type { DashboardIssue } from "../../../../common/dashboard";
|
|
import { BlockState, DashboardPanel } from "../../shared";
|
|
import { dashboardApi, dashboardKeys } from "../../shared/api";
|
|
|
|
const ISSUE_ICONS = {
|
|
certificate: FileKeyIcon,
|
|
license: FileKeyIcon,
|
|
profile: WorkProfileIcon,
|
|
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>
|
|
);
|
|
}
|