leocrm-bot
700b7a71ad
- 11 new feature pages (CompaniesList/Detail/Form, ContactsList/Detail/Form, SettingsProfile/Roles/Users, AuditLog, GlobalSearchResults) - 3 page updates (Dashboard with StatCard+ActivityFeed, Settings with tree nav+Outlet, TopBar with SearchDropdown) - 13 new routes in routes/index.tsx - i18n updates (de.json + en.json) with companies/contacts/settings/audit/search keys - 12 new test files + 2 existing test fixes (TopBar, AppShell) - 7 shared components (DataGrid, Tabs, SearchDropdown, CsvImportDialog, StatCard, ActivityFeed, UnsavedChangesGuard) - 16 new API hooks in hooks.ts - Verification: 141 tests pass, build succeeds, tsc --noEmit clean
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import clsx from 'clsx';
|
|
import { Card } from '@/components/ui/Card';
|
|
import { Badge, BadgeVariant } from '@/components/ui/Badge';
|
|
|
|
export interface StatCardProps {
|
|
label: string;
|
|
value: string | number;
|
|
change?: string;
|
|
changeVariant?: BadgeVariant;
|
|
icon?: React.ReactNode;
|
|
testId?: string;
|
|
}
|
|
|
|
export function StatCard({ label, value, change, changeVariant = 'success', icon, testId }: StatCardProps) {
|
|
return (
|
|
<Card>
|
|
<div className="flex items-center justify-between" data-testid={testId}>
|
|
<div>
|
|
<p className="text-sm text-secondary-500">{label}</p>
|
|
<p className="text-2xl font-bold text-secondary-900 mt-1">{value}</p>
|
|
{change && (
|
|
<p className="text-xs mt-1">
|
|
<Badge variant={changeVariant} dot>{change}</Badge>
|
|
</p>
|
|
)}
|
|
</div>
|
|
{icon && (
|
|
<div className="w-12 h-12 rounded-lg bg-primary-50 flex items-center justify-center text-primary-600" aria-hidden="true">
|
|
{icon}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|