fix(features/platform-admin/frontend-admin): ✨ update attribute definition page component and local FAB configuration

features/platform-admin/frontend-admin/src/pages/attributes/AttributesPage.tsx

@@ -1,8 +1,10 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import styled from 'styled-components';
+import { Plus } from 'lucide-react';
 import { Button, Input, Select, Checkbox, Card } from '@lilith/ui-primitives';
 import { Stack, Grid } from '@lilith/ui-layout';
 import { Heading, Text } from '@lilith/ui-typography';
+import { useLocalFABConfig } from '../../components/FAB/LocalFABConfigContext';
 import {
   useAttributeDefinitions,
   useDeleteAttributeDefinition,
@@ -174,6 +176,7 @@ const EmptyState = styled.div`
 `;
 
 export function AttributesPage() {
+  const { setConfig } = useLocalFABConfig();
   const [selectedEntityType, setSelectedEntityType] = useState<EntityType | ''>('');
   const [selectedGrouping, setSelectedGrouping] = useState('');
   const [selectedMetaCategory, setSelectedMetaCategory] = useState('');
@@ -256,20 +259,37 @@ export function AttributesPage() {
     { value: 'optional', label: 'Optional' },
   ];
 
+  // Configure LocalFAB for this page
+  const fabConfig = useMemo(() => ({
+    categories: [{
+      id: 'actions',
+      label: 'Actions',
+      icon: <Plus />,
+      items: [
+        {
+          id: 'create',
+          label: 'New Attribute',
+          icon: <Plus />,
+          onClick: handleCreate,
+        },
+      ],
+    }],
+  }), []);
+
+  useEffect(() => {
+    setConfig(fabConfig);
+    return () => setConfig(null); // Clear on unmount
+  }, [fabConfig, setConfig]);
+
   return (
     <Stack gap="lg">
-      <Stack direction="horizontal" align="center" justify="space-between" fullWidth>
-        <div>
-          <Heading as="h1" size="2xl" weight="bold" marginBottom="xs">
-            Attribute Definitions
-          </Heading>
-          <Text size="sm" color="muted" marginBottom="xs">
-            Manage profile attributes and marketplace filters
-          </Text>
-        </div>
-        <Button variant="primary" onClick={handleCreate}>
-          + New Attribute
-        </Button>
+      <Stack gap="lg" fullWidth>
+        <Heading as="h1" size="2xl" weight="bold">
+          Attribute Definitions
+        </Heading>
+        <Text size="sm" color="muted">
+          Manage profile attributes and marketplace filters
+        </Text>
       </Stack>
 
       <Grid columns={6} gap="md">