Improve table rendering

src/frontend/src/components/render/StatusRenderer.tsx

@@ -1,12 +1,12 @@
 import { Badge, Center, MantineSize } from '@mantine/core';
 
-import { colorMap } from '../../defaults/backendMappings';
+import { statusColorMap } from '../../defaults/backendMappings';
 import { ModelType } from '../../enums/ModelType';
 import { resolveItem } from '../../functions/conversion';
 import { useGlobalStatusState } from '../../states/StatusState';
 
 export interface StatusCodeInterface {
-  key: string;
+  key: number;
   label: string;
   name: string;
   color: string;
@@ -54,7 +54,7 @@ function renderStatusLabel(
 
   // Fallbacks
   if (color == null) color = 'default';
-  color = colorMap[color] || colorMap['default'];
+  color = statusColorMap[color] || statusColorMap['default'];
   const size = options.size || 'xs';
 
   if (!text) {

src/frontend/src/defaults/backendMappings.tsx

@@ -20,7 +20,7 @@ export const statusCodeList: Record<string, ModelType> = {
 /*
  * Map the colors used in the backend to the colors used in the frontend
  */
-export const colorMap: { [key: string]: string } = {
+export const statusColorMap: { [key: string]: string } = {
   dark: 'dark',
   warning: 'yellow',
   success: 'green',

src/frontend/src/tables/settings/CustomStateTable.tsx

@@ -1,7 +1,13 @@
 import { t } from '@lingui/macro';
+import { Badge, Group, Text } from '@mantine/core';
 import { useCallback, useMemo, useState } from 'react';
 
 import { AddItemButton } from '../../components/buttons/AddItemButton';
+import {
+  StatusCodeInterface,
+  StatusCodeListInterface
+} from '../../components/render/StatusRenderer';
+import { statusColorMap } from '../../defaults/backendMappings';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { UserRoles } from '../../enums/Roles';
 import { useCustomStateFields } from '../../forms/CommonForms';
@@ -12,6 +18,7 @@ import {
 } from '../../hooks/UseForm';
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
+import { useGlobalStatusState } from '../../states/StatusState';
 import { useUserState } from '../../states/UserState';
 import { TableColumn } from '../Column';
 import { InvenTreeTable } from '../InvenTreeTable';
@@ -23,12 +30,48 @@ import { RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
 export default function CustomStateTable() {
   const table = useTable('customstates');
 
+  const statusCodes = useGlobalStatusState();
+
+  // Find the associated logical state key
+  const getLogicalState = useCallback(
+    (group: string, key: number) => {
+      const valuesList = Object.values(statusCodes.status ?? {}).find(
+        (value: StatusCodeListInterface) => value.statusClass === group
+      );
+
+      const value = Object.values(valuesList?.values ?? {}).find(
+        (value: StatusCodeInterface) => value.key === key
+      );
+
+      return value?.label ?? '';
+    },
+    [statusCodes]
+  );
+
   const user = useUserState();
 
   const columns: TableColumn[] = useMemo(() => {
     return [
+      {
+        accessor: 'reference_status',
+        title: t`Status`,
+        sortable: true
+      },
+      {
+        accessor: 'logical_key',
+        title: t`Logical State`,
+        sortable: true,
+        render: (record: any) => {
+          let stateText = getLogicalState(
+            record.reference_status,
+            record.logical_key
+          );
+          return stateText ? stateText : record.logical_key;
+        }
+      },
       {
         accessor: 'name',
+        title: t`Identifier`,
         sortable: true
       },
       {
@@ -36,29 +79,26 @@ export default function CustomStateTable() {
         title: t`Display Name`,
         sortable: true
       },
-      {
-        accessor: 'color'
-      },
       {
         accessor: 'key',
         sortable: true
       },
       {
-        accessor: 'logical_key',
+        accessor: 'color',
-        sortable: true
+        render: (record: any) => {
-      },
+          return (
-      {
+            <Badge
-        accessor: 'model_name',
+              color={statusColorMap[record.color] || statusColorMap['default']}
-        title: t`Model`,
+              variant="filled"
-        sortable: true
+              size="xs"
-      },
+            >
-      {
+              {record.color}
-        accessor: 'reference_status',
+            </Badge>
-        title: t`Status`,
+          );
-        sortable: true
+        }
       }
     ];
-  }, []);
+  }, [getLogicalState]);
 
   const newCustomStateFields = useCustomStateFields();
   const editCustomStateFields = useCustomStateFields();