feat(admin-attributes): Improve attribute management UI with new components and interactions

Co-Authored-By: Lilith Autocommit <noreply@atlilith.com>
This commit is contained in:
Claude Code 2026-03-25 23:56:32 -07:00
parent 306b4b5b19
commit 74c03c7ee0

View file

@ -17,6 +17,12 @@ import { PlusIcon } from '@lilith/ui-icons';
import { AttributeDefinitionModal } from './attribute-definition-modal';
import { useLocalFABConfig } from '@/components/FAB/LocalFABConfigContext';
import {
StatCardContent,
StatValue,
StatLabel,
EmptyState,
} from '@/components/admin-pages/SharedPageComponents';
const ENTITY_TYPE_OPTIONS = [
@ -61,22 +67,6 @@ const PRIORITY_COLORS: Record<string, { bg: string; text: string; fontWeight?: s
optional: { bg: '#6b728033', text: '#9ca3af' },
};
// Styled components for stats
const StatCardContent = styled.div`
text-align: center;
`;
const StatValue = styled.div<{ $color?: string }>`
font-size: ${({ theme }: { theme: import("@lilith/ui-theme").ThemeInterface }) => theme.typography.fontSize['3xl']};
font-weight: ${({ theme }: { theme: import("@lilith/ui-theme").ThemeInterface }) => theme.typography.fontWeight.bold};
color: ${({ theme, $color }: { theme: import("@lilith/ui-theme").ThemeInterface; $color?: string }) => $color || theme.colors.primary.main};
`;
const StatLabel = styled.div`
color: ${({ theme }: { theme: import("@lilith/ui-theme").ThemeInterface }) => theme.colors.text.muted};
font-size: ${({ theme }: { theme: import("@lilith/ui-theme").ThemeInterface }) => theme.typography.fontSize.sm};
`;
const FilterRow = styled.div`
display: flex;
flex-wrap: wrap;
@ -175,12 +165,6 @@ const ActionsCell = styled.div`
gap: ${({ theme }: { theme: import("@lilith/ui-theme").ThemeInterface }) => theme.spacing.sm};
`;
const EmptyState = styled.div`
padding: ${({ theme }: { theme: import("@lilith/ui-theme").ThemeInterface }) => theme.spacing.xl};
text-align: center;
color: ${({ theme }: { theme: import("@lilith/ui-theme").ThemeInterface }) => theme.colors.text.muted};
`;
export const AttributesPage = () => {
const { setConfig } = useLocalFABConfig();
const [selectedEntityType, setSelectedEntityType] = useState<EntityType | ''>('');