use enum for refs

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

@@ -15,6 +15,19 @@ import SaleHistoryPanel from './pricing/SaleHistoryPanel';
 import SupplierPricingPanel from './pricing/SupplierPricingPanel';
 import VariantPricingPanel from './pricing/VariantPricingPanel';
 
+export enum panelOptions {
+  overview = 'overview',
+  purchase = 'purchase',
+  internal = 'internal',
+  supplier = 'supplier',
+  bom = 'bom',
+  variant = 'variant',
+  sale_pricing = 'sale-pricing',
+  sale_history = 'sale-history',
+  override = 'override',
+  overall = 'overall'
+}
+
 export default function PartPricingPanel({ part }: { part: any }) {
   const user = useUserState();
 
@@ -52,13 +65,13 @@ export default function PartPricingPanel({ part }: { part: any }) {
         <Accordion multiple defaultValue={['overview']}>
           <PricingPanel
             content={<PricingOverviewPanel part={part} pricing={pricing} />}
-            label="overview"
+            label={panelOptions.overview}
             title={t`Pricing Overview`}
             visible={true}
           />
           <PricingPanel
             content={<PurchaseHistoryPanel part={part} />}
-            label="purchase"
+            label={panelOptions.purchase}
             title={t`Purchase History`}
             visible={purchaseOrderPricing}
             disabled={
@@ -72,7 +85,7 @@ export default function PartPricingPanel({ part }: { part: any }) {
                 endpoint={ApiEndpoints.part_pricing_internal}
               />
             }
-            label="internal"
+            label={panelOptions.internal}
             title={t`Internal Pricing`}
             visible={internalPricing}
             disabled={
@@ -81,7 +94,7 @@ export default function PartPricingPanel({ part }: { part: any }) {
           />
           <PricingPanel
             content={<SupplierPricingPanel part={part} />}
-            label="supplier"
+            label={panelOptions.supplier}
             title={t`Supplier Pricing`}
             visible={purchaseOrderPricing}
             disabled={
@@ -90,14 +103,14 @@ export default function PartPricingPanel({ part }: { part: any }) {
           />
           <PricingPanel
             content={<BomPricingPanel part={part} pricing={pricing} />}
-            label="bom"
+            label={panelOptions.bom}
             title={t`BOM Pricing`}
             visible={part?.assembly}
             disabled={!pricing?.bom_cost_min || !pricing?.bom_cost_max}
           />
           <PricingPanel
             content={<VariantPricingPanel part={part} pricing={pricing} />}
-            label="variant"
+            label={panelOptions.variant}
             title={t`Variant Pricing`}
             visible={part?.is_template}
             disabled={!pricing?.variant_cost_min || !pricing?.variant_cost_max}
@@ -109,14 +122,14 @@ export default function PartPricingPanel({ part }: { part: any }) {
                 endpoint={ApiEndpoints.part_pricing_sale}
               />
             }
-            label="sale-pricing"
+            label={panelOptions.sale_pricing}
             title={t`Sale Pricing`}
             visible={salesOrderPricing}
             disabled={!pricing?.sale_price_min || !pricing?.sale_price_max}
           />
           <PricingPanel
             content={<SaleHistoryPanel part={part} />}
-            label="sale-history"
+            label={panelOptions.sale_history}
             title={t`Sale History`}
             visible={salesOrderPricing}
             disabled={!pricing?.sale_history_min || !pricing?.sale_history_max}

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

@@ -23,10 +23,11 @@ import {
 
 import { CHART_COLORS } from '../../../components/charts/colors';
 import { formatCurrency, renderDate } from '../../../defaults/formatters';
+import { panelOptions } from '../PartPricingPanel';
 
 interface PricingOverviewEntry {
   icon: ReactNode;
-  name: string;
+  name: panelOptions;
   title: string;
   min_value: number | null | undefined;
   max_value: number | null | undefined;
@@ -86,63 +87,63 @@ export default function PricingOverviewPanel({
   const overviewData: PricingOverviewEntry[] = useMemo(() => {
     return [
       {
-        name: 'internal',
+        name: panelOptions.internal,
         title: t`Internal Pricing`,
         icon: <IconList />,
         min_value: pricing?.internal_cost_min,
         max_value: pricing?.internal_cost_max
       },
       {
-        name: 'bom',
+        name: panelOptions.bom,
         title: t`BOM Pricing`,
         icon: <IconChartDonut />,
         min_value: pricing?.bom_cost_min,
         max_value: pricing?.bom_cost_max
       },
       {
-        name: 'purchase',
+        name: panelOptions.purchase,
         title: t`Purchase Pricing`,
         icon: <IconShoppingCart />,
         min_value: pricing?.purchase_cost_min,
         max_value: pricing?.purchase_cost_max
       },
       {
-        name: 'supplier',
+        name: panelOptions.supplier,
         title: t`Supplier Pricing`,
         icon: <IconBuildingWarehouse />,
         min_value: pricing?.supplier_price_min,
         max_value: pricing?.supplier_price_max
       },
       {
-        name: 'variants',
+        name: panelOptions.variant,
         title: t`Variant Pricing`,
         icon: <IconTriangleSquareCircle />,
         min_value: pricing?.variant_cost_min,
         max_value: pricing?.variant_cost_max
       },
       {
-        name: 'sale',
+        name: panelOptions.sale_pricing,
         title: t`Sale Pricing`,
         icon: <IconTriangleSquareCircle />,
         min_value: pricing?.sale_price_min,
         max_value: pricing?.sale_price_max
       },
       {
-        name: 'sale-history',
+        name: panelOptions.sale_history,
         title: t`Sale History`,
         icon: <IconTriangleSquareCircle />,
         min_value: pricing?.sale_history_min,
         max_value: pricing?.sale_history_max
       },
       {
-        name: 'override',
+        name: panelOptions.override,
         title: t`Override Pricing`,
         icon: <IconExclamationCircle />,
         min_value: pricing?.override_min,
         max_value: pricing?.override_max
       },
       {
-        name: 'overall',
+        name: panelOptions.overall,
         title: t`Overall Pricing`,
         icon: <IconReportAnalytics />,
         min_value: pricing?.overall_min,

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

@@ -13,6 +13,7 @@ import { IconAlertCircle, IconExclamationCircle } from '@tabler/icons-react';
 import { ReactNode } from 'react';
 
 import { StylishText } from '../../../components/items/StylishText';
+import { panelOptions } from '../PartPricingPanel';
 
 function AccordionControl(props: AccordionControlProps) {
   return (
@@ -39,7 +40,7 @@ export default function PricingPanel({
   disabled = undefined
 }: {
   content: ReactNode;
-  label: string;
+  label: panelOptions;
   title: string;
   visible: boolean;
   disabled?: boolean | undefined;