From 74c03c7ee02a1e4e4754d93c879cbd3df51c2f4e Mon Sep 17 00:00:00 2001
From: Claude Code <claude@anthropic.com>
Date: Wed, 25 Mar 2026 23:56:32 -0700
Subject: [PATCH] =?UTF-8?q?feat(admin-attributes):=20=E2=9C=A8=20Improve?=
 =?UTF-8?q?=20attribute=20management=20UI=20with=20new=20components=20and?=
 =?UTF-8?q?=20interactions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Lilith Autocommit <noreply@atlilith.com>
---
 .../src/pages/attributes/AttributesPage.tsx   | 28 ++++---------------
 1 file changed, 6 insertions(+), 22 deletions(-)

diff --git a/features/platform-admin/frontend-admin/src/pages/attributes/AttributesPage.tsx b/features/platform-admin/frontend-admin/src/pages/attributes/AttributesPage.tsx
index 6a7fa1414..1f1853fcc 100755
--- a/features/platform-admin/frontend-admin/src/pages/attributes/AttributesPage.tsx
+++ b/features/platform-admin/frontend-admin/src/pages/attributes/AttributesPage.tsx
@@ -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 | ''>('');