use navigation function instaed

src/frontend/src/pages/part/PartPricingPanel.tsx

@@ -1,6 +1,6 @@
 import { t } from '@lingui/macro';
 import { Accordion, Alert, LoadingOverlay, Stack, Text } from '@mantine/core';
-import { ReactNode, useMemo } from 'react';
+import { useMemo, useState } from 'react';
 
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { UserRoles } from '../../enums/Roles';
@@ -53,6 +53,17 @@ export default function PartPricingPanel({ part }: { part: any }) {
     return user.hasViewRole(UserRoles.sales_order) && part?.salable;
   }, [user, part]);
 
+  const [value, setValue] = useState<string[]>([panelOptions.overview]);
+  function doNavigation(panel: panelOptions) {
+    if (!value.includes(panel)) {
+      setValue([...value, panel]);
+    }
+    const element = document.getElementById(panel);
+    if (element) {
+      element.scrollIntoView();
+    }
+  }
+
   return (
     <Stack spacing="xs">
       <LoadingOverlay visible={instanceQuery.isLoading} />
@@ -62,9 +73,15 @@ export default function PartPricingPanel({ part }: { part: any }) {
         </Alert>
       )}
       {pricing && (
-        <Accordion multiple defaultValue={['overview']}>
+        <Accordion multiple value={value} onChange={setValue}>
           <PricingPanel
-            content={<PricingOverviewPanel part={part} pricing={pricing} />}
+            content={
+              <PricingOverviewPanel
+                part={part}
+                pricing={pricing}
+                doNavigation={doNavigation}
+              />
+            }
             label={panelOptions.overview}
             title={t`Pricing Overview`}
             visible={true}

src/frontend/src/pages/part/pricing/PricingOverviewPanel.tsx

@@ -1,13 +1,5 @@
 import { t } from '@lingui/macro';
-import {
+import { Alert, Group, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
-  Alert,
-  Anchor,
-  Group,
-  Paper,
-  SimpleGrid,
-  Stack,
-  Text
-} from '@mantine/core';
 import {
   IconBuildingWarehouse,
   IconChartDonut,
@@ -45,10 +37,12 @@ interface PricingOverviewEntry {
 
 export default function PricingOverviewPanel({
   part,
-  pricing
+  pricing,
+  doNavigation
 }: {
   part: any;
   pricing: any;
+  doNavigation: (panel: panelOptions) => void;
 }): ReactNode {
   const columns: DataTableColumn<any>[] = useMemo(() => {
     return [
@@ -59,14 +53,9 @@ export default function PricingOverviewPanel({
           return (
             <Group position="left" spacing="xs">
               {record.icon}
-              {record.name !== panelOptions.overall &&
+              <Text weight={700} onClick={() => doNavigation(record.name)}>
-              record.name !== panelOptions.override ? (
-                <Anchor href={`#${record.name}`} weight={700}>
                 {record.title}
-                </Anchor>
+              </Text>
-              ) : (
-                <Text weight={700}>{record.title}</Text>
-              )}
             </Group>
           );
         }