Denozordec
733c041482
Build, Test, and Push CFDM Docker Image / test (push) Successful in 3m10s
Build, Test, and Push CFDM Docker Image / build-and-push (push) Successful in 1m46s
Build, Test, and Push CFDM Docker Image / create-release (push) Skipped
Build, Test, and Push CFDM Docker Image / update-wiki (push) Successful in 5s
Обновлены компоненты CertKpiCards, DomainKpiCards, GroupKpiCards и ServiceKpiCards для поддержки новых вариантов отображения ('warning' и 'destructive') в зависимости от состояния данных. Также обновлен интерфейс KpiStatCard для включения свойства variant. Обновлены ссылки в документации для отражения изменений в дизайне KPI карточек.
69 lines
2.1 KiB
TypeScript
69 lines
2.1 KiB
TypeScript
import { useMemo } from 'react'
|
||
import { FolderOpenIcon, FolderTreeIcon, FoldersIcon } from 'lucide-react'
|
||
import { KpiStatGrid, type KpiStatCard } from '@/components/reui-kit/kpi-stat-grid'
|
||
import type { GroupCatalogRow } from '@/components/columns/groups-columns'
|
||
|
||
interface GroupKpiCardsProps {
|
||
rows: GroupCatalogRow[]
|
||
activeTab: string
|
||
isLoading?: boolean
|
||
onSelectTab: (tabId: string) => void
|
||
}
|
||
|
||
/** KPI strip — ReUI PRO [stats-12](https://reui.io/preview/base/stats-12) */
|
||
export function GroupKpiCards({
|
||
rows,
|
||
activeTab,
|
||
isLoading,
|
||
onSelectTab,
|
||
}: GroupKpiCardsProps) {
|
||
const cards = useMemo<KpiStatCard[]>(() => {
|
||
const withDomains = rows.filter((r) => r.domainCount > 0).length
|
||
const empty = rows.filter((r) => r.domainCount === 0).length
|
||
|
||
return [
|
||
{
|
||
id: 'all',
|
||
label: 'Всего',
|
||
value: rows.length,
|
||
hint: 'Группы доменов',
|
||
icon: <FolderTreeIcon aria-hidden />,
|
||
iconClassName: 'text-info',
|
||
onSelect: () => onSelectTab('all'),
|
||
selected: activeTab === 'all',
|
||
},
|
||
{
|
||
id: 'with_domains',
|
||
label: 'С доменами',
|
||
value: withDomains,
|
||
hint: 'Непустые группы',
|
||
icon: <FoldersIcon aria-hidden />,
|
||
iconClassName: 'text-success',
|
||
onSelect: () => onSelectTab('with_domains'),
|
||
selected: activeTab === 'with_domains',
|
||
},
|
||
{
|
||
id: 'empty',
|
||
label: 'Пустые',
|
||
value: empty,
|
||
hint: 'Без доменов',
|
||
icon: <FolderOpenIcon aria-hidden />,
|
||
iconClassName: 'text-muted-foreground',
|
||
variant: empty > 0 ? 'warning' : 'default',
|
||
onSelect: () => onSelectTab('empty'),
|
||
selected: activeTab === 'empty',
|
||
},
|
||
]
|
||
}, [rows, activeTab, onSelectTab])
|
||
|
||
return (
|
||
<KpiStatGrid
|
||
cards={cards}
|
||
isLoading={isLoading}
|
||
skeletonCount={3}
|
||
emptyIcon={<FolderTreeIcon className="text-muted-foreground size-5" aria-hidden />}
|
||
emptyMessage="Нет групп — создайте первую"
|
||
/>
|
||
)
|
||
}
|