diff --git a/src/frontend/src/tables/Details.tsx b/src/frontend/src/components/details/Details.tsx
similarity index 74%
rename from src/frontend/src/tables/Details.tsx
rename to src/frontend/src/components/details/Details.tsx
index 20057ba180..02de921a19 100644
--- a/src/frontend/src/tables/Details.tsx
+++ b/src/frontend/src/components/details/Details.tsx
@@ -14,17 +14,17 @@ import {
import { useSuspenseQuery } from '@tanstack/react-query';
import { Suspense, useMemo } from 'react';
-import { api } from '../App';
-import { ProgressBar } from '../components/items/ProgressBar';
-import { YesNoButton } from '../components/items/YesNoButton';
-import { getModelInfo } from '../components/render/ModelType';
-import { StatusRenderer } from '../components/render/StatusRenderer';
-import { ApiEndpoints } from '../enums/ApiEndpoints';
-import { ModelType } from '../enums/ModelType';
-import { InvenTreeIcon } from '../functions/icons';
-import { getDetailUrl } from '../functions/urls';
-import { apiUrl } from '../states/ApiState';
-import { useGlobalSettingsState } from '../states/SettingsState';
+import { api } from '../../App';
+import { ApiEndpoints } from '../../enums/ApiEndpoints';
+import { ModelType } from '../../enums/ModelType';
+import { InvenTreeIcon } from '../../functions/icons';
+import { getDetailUrl } from '../../functions/urls';
+import { apiUrl } from '../../states/ApiState';
+import { useGlobalSettingsState } from '../../states/SettingsState';
+import { ProgressBar } from '../items/ProgressBar';
+import { YesNoButton } from '../items/YesNoButton';
+import { getModelInfo } from '../render/ModelType';
+import { StatusRenderer } from '../render/StatusRenderer';
export type PartIconsType = {
assembly: boolean;
@@ -101,92 +101,6 @@ type FieldProps = {
unit?: string | null;
};
-/**
- * Fetches and wraps an InvenTreeIcon in a flex div
- * @param icon name of icon
- *
- */
-function PartIcon(icon: string) {
- return (
- <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
- <InvenTreeIcon icon={icon} />
- </div>
- );
-}
-
-/**
- * Generates a table cell with Part icons.
- * Only used for Part Model Details
- */
-export function PartIcons({ part }: { part: any }) {
- return (
- <td colSpan={2}>
- <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
- {!part.active && (
- <Tooltip label={t`Part is not active`}>
- <Badge color="red" variant="filled">
- <div
- style={{ display: 'flex', alignItems: 'center', gap: '5px' }}
- >
- <InvenTreeIcon icon="inactive" iconProps={{ size: 19 }} />{' '}
- <Trans>Inactive</Trans>
- </div>
- </Badge>
- </Tooltip>
- )}
- {part.template && (
- <Tooltip
- label={t`Part is a template part (variants can be made from this part)`}
- children={PartIcon('template')}
- />
- )}
- {part.assembly && (
- <Tooltip
- label={t`Part can be assembled from other parts`}
- children={PartIcon('assembly')}
- />
- )}
- {part.component && (
- <Tooltip
- label={t`Part can be used in assemblies`}
- children={PartIcon('component')}
- />
- )}
- {part.trackable && (
- <Tooltip
- label={t`Part stock is tracked by serial number`}
- children={PartIcon('trackable')}
- />
- )}
- {part.purchaseable && (
- <Tooltip
- label={t`Part can be purchased from external suppliers`}
- children={PartIcon('purchaseable')}
- />
- )}
- {part.saleable && (
- <Tooltip
- label={t`Part can be sold to customers`}
- children={PartIcon('saleable')}
- />
- )}
- {part.virtual && (
- <Tooltip label={t`Part is virtual (not a physical part)`}>
- <Badge color="yellow" variant="filled">
- <div
- style={{ display: 'flex', alignItems: 'center', gap: '5px' }}
- >
- <InvenTreeIcon icon="virtual" iconProps={{ size: 18 }} />{' '}
- <Trans>Virtual</Trans>
- </div>
- </Badge>
- </Tooltip>
- )}
- </div>
- </td>
- );
-}
-
/**
* Fetches user or group info from backend and formats into a badge.
* Badge shows username, full name, or group name depending on server settings.
diff --git a/src/frontend/src/components/details/ItemDetails.tsx b/src/frontend/src/components/details/ItemDetails.tsx
index 8252afc3a2..543c23964e 100644
--- a/src/frontend/src/components/details/ItemDetails.tsx
+++ b/src/frontend/src/components/details/ItemDetails.tsx
@@ -2,7 +2,7 @@ import { Grid, Group, Paper, SimpleGrid } from '@mantine/core';
import React from 'react';
import { UserRoles } from '../../enums/Roles';
-import { DetailsField, DetailsTable } from '../../tables/Details';
+import { DetailsField, DetailsTable } from './Details';
import { DetailImageButtonProps, DetailsImage } from './DetailsImage';
/**
diff --git a/src/frontend/src/components/details/PartIcons.tsx b/src/frontend/src/components/details/PartIcons.tsx
new file mode 100644
index 0000000000..ccaf7bef73
--- /dev/null
+++ b/src/frontend/src/components/details/PartIcons.tsx
@@ -0,0 +1,90 @@
+import { Trans, t } from '@lingui/macro';
+import { Badge, Tooltip } from '@mantine/core';
+
+import { InvenTreeIcon } from '../../functions/icons';
+
+/**
+ * Fetches and wraps an InvenTreeIcon in a flex div
+ * @param icon name of icon
+ *
+ */
+function PartIcon(icon: string) {
+ return (
+ <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+ <InvenTreeIcon icon={icon} />
+ </div>
+ );
+}
+
+/**
+ * Generates a table cell with Part icons.
+ * Only used for Part Model Details
+ */
+export function PartIcons({ part }: { part: any }) {
+ return (
+ <td colSpan={2}>
+ <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+ {!part.active && (
+ <Tooltip label={t`Part is not active`}>
+ <Badge color="red" variant="filled">
+ <div
+ style={{ display: 'flex', alignItems: 'center', gap: '5px' }}
+ >
+ <InvenTreeIcon icon="inactive" iconProps={{ size: 19 }} />{' '}
+ <Trans>Inactive</Trans>
+ </div>
+ </Badge>
+ </Tooltip>
+ )}
+ {part.template && (
+ <Tooltip
+ label={t`Part is a template part (variants can be made from this part)`}
+ children={PartIcon('template')}
+ />
+ )}
+ {part.assembly && (
+ <Tooltip
+ label={t`Part can be assembled from other parts`}
+ children={PartIcon('assembly')}
+ />
+ )}
+ {part.component && (
+ <Tooltip
+ label={t`Part can be used in assemblies`}
+ children={PartIcon('component')}
+ />
+ )}
+ {part.trackable && (
+ <Tooltip
+ label={t`Part stock is tracked by serial number`}
+ children={PartIcon('trackable')}
+ />
+ )}
+ {part.purchaseable && (
+ <Tooltip
+ label={t`Part can be purchased from external suppliers`}
+ children={PartIcon('purchaseable')}
+ />
+ )}
+ {part.saleable && (
+ <Tooltip
+ label={t`Part can be sold to customers`}
+ children={PartIcon('saleable')}
+ />
+ )}
+ {part.virtual && (
+ <Tooltip label={t`Part is virtual (not a physical part)`}>
+ <Badge color="yellow" variant="filled">
+ <div
+ style={{ display: 'flex', alignItems: 'center', gap: '5px' }}
+ >
+ <InvenTreeIcon icon="virtual" iconProps={{ size: 18 }} />{' '}
+ <Trans>Virtual</Trans>
+ </div>
+ </Badge>
+ </Tooltip>
+ )}
+ </div>
+ </td>
+ );
+}
diff --git a/src/frontend/src/pages/build/BuildDetail.tsx b/src/frontend/src/pages/build/BuildDetail.tsx
index 163c3a6616..5b9d9a1994 100644
--- a/src/frontend/src/pages/build/BuildDetail.tsx
+++ b/src/frontend/src/pages/build/BuildDetail.tsx
@@ -24,6 +24,7 @@ import {
import { useMemo } from 'react';
import { useParams } from 'react-router-dom';
+import { DetailsField, DetailsTable } from '../../components/details/Details';
import { DetailsImage } from '../../components/details/DetailsImage';
import { ItemDetailsGrid } from '../../components/details/ItemDetails';
import {
@@ -47,7 +48,6 @@ import { useEditApiFormModal } from '../../hooks/UseForm';
import { useInstance } from '../../hooks/UseInstance';
import { apiUrl } from '../../states/ApiState';
import { useUserState } from '../../states/UserState';
-import { DetailsField, DetailsTable } from '../../tables/Details';
import BuildLineTable from '../../tables/build/BuildLineTable';
import { BuildOrderTable } from '../../tables/build/BuildOrderTable';
import { AttachmentTable } from '../../tables/general/AttachmentTable';
diff --git a/src/frontend/src/pages/company/CompanyDetail.tsx b/src/frontend/src/pages/company/CompanyDetail.tsx
index d4f9e81c28..dbbc2957e6 100644
--- a/src/frontend/src/pages/company/CompanyDetail.tsx
+++ b/src/frontend/src/pages/company/CompanyDetail.tsx
@@ -18,6 +18,7 @@ import {
import { useMemo } from 'react';
import { useParams } from 'react-router-dom';
+import { DetailsField, DetailsTable } from '../../components/details/Details';
import { DetailsImage } from '../../components/details/DetailsImage';
import { ItemDetailsGrid } from '../../components/details/ItemDetails';
import {
@@ -37,7 +38,6 @@ import { useEditApiFormModal } from '../../hooks/UseForm';
import { useInstance } from '../../hooks/UseInstance';
import { apiUrl } from '../../states/ApiState';
import { useUserState } from '../../states/UserState';
-import { DetailsField, DetailsTable } from '../../tables/Details';
import { AddressTable } from '../../tables/company/AddressTable';
import { ContactTable } from '../../tables/company/ContactTable';
import { AttachmentTable } from '../../tables/general/AttachmentTable';
diff --git a/src/frontend/src/pages/part/CategoryDetail.tsx b/src/frontend/src/pages/part/CategoryDetail.tsx
index 263015d030..a7921e1011 100644
--- a/src/frontend/src/pages/part/CategoryDetail.tsx
+++ b/src/frontend/src/pages/part/CategoryDetail.tsx
@@ -9,6 +9,7 @@ import {
import { useMemo, useState } from 'react';
import { useParams } from 'react-router-dom';
+import { DetailsField, DetailsTable } from '../../components/details/Details';
import { ItemDetailsGrid } from '../../components/details/ItemDetails';
import { PageDetail } from '../../components/nav/PageDetail';
import { PanelGroup, PanelType } from '../../components/nav/PanelGroup';
@@ -16,7 +17,6 @@ import { PartCategoryTree } from '../../components/nav/PartCategoryTree';
import { ApiEndpoints } from '../../enums/ApiEndpoints';
import { ModelType } from '../../enums/ModelType';
import { useInstance } from '../../hooks/UseInstance';
-import { DetailsField, DetailsTable } from '../../tables/Details';
import ParametricPartTable from '../../tables/part/ParametricPartTable';
import { PartCategoryTable } from '../../tables/part/PartCategoryTable';
import { PartListTable } from '../../tables/part/PartTable';
diff --git a/src/frontend/src/pages/part/PartDetail.tsx b/src/frontend/src/pages/part/PartDetail.tsx
index b99594f488..dd36532e3f 100644
--- a/src/frontend/src/pages/part/PartDetail.tsx
+++ b/src/frontend/src/pages/part/PartDetail.tsx
@@ -35,8 +35,10 @@ import { useMemo, useState } from 'react';
import { useParams } from 'react-router-dom';
import { api } from '../../App';
+import { DetailsField, DetailsTable } from '../../components/details/Details';
import { DetailsImage } from '../../components/details/DetailsImage';
import { ItemDetailsGrid } from '../../components/details/ItemDetails';
+import { PartIcons } from '../../components/details/PartIcons';
import {
ActionDropdown,
BarcodeActionDropdown,
@@ -60,7 +62,6 @@ import { useEditApiFormModal } from '../../hooks/UseForm';
import { useInstance } from '../../hooks/UseInstance';
import { apiUrl } from '../../states/ApiState';
import { useUserState } from '../../states/UserState';
-import { DetailsField, DetailsTable, PartIcons } from '../../tables/Details';
import { BomTable } from '../../tables/bom/BomTable';
import { UsedInTable } from '../../tables/bom/UsedInTable';
import { BuildOrderTable } from '../../tables/build/BuildOrderTable';
diff --git a/src/frontend/src/pages/purchasing/PurchaseOrderDetail.tsx b/src/frontend/src/pages/purchasing/PurchaseOrderDetail.tsx
index 4ae7bc82a8..1030eb4d8c 100644
--- a/src/frontend/src/pages/purchasing/PurchaseOrderDetail.tsx
+++ b/src/frontend/src/pages/purchasing/PurchaseOrderDetail.tsx
@@ -11,6 +11,7 @@ import {
import { useMemo } from 'react';
import { useParams } from 'react-router-dom';
+import { DetailsField, DetailsTable } from '../../components/details/Details';
import { DetailsImage } from '../../components/details/DetailsImage';
import { ItemDetailsGrid } from '../../components/details/ItemDetails';
import {
@@ -33,7 +34,6 @@ import { useEditApiFormModal } from '../../hooks/UseForm';
import { useInstance } from '../../hooks/UseInstance';
import { apiUrl } from '../../states/ApiState';
import { useUserState } from '../../states/UserState';
-import { DetailsField, DetailsTable } from '../../tables/Details';
import { AttachmentTable } from '../../tables/general/AttachmentTable';
import { PurchaseOrderLineItemTable } from '../../tables/purchasing/PurchaseOrderLineItemTable';
import { StockItemTable } from '../../tables/stock/StockItemTable';
diff --git a/src/frontend/src/pages/sales/ReturnOrderDetail.tsx b/src/frontend/src/pages/sales/ReturnOrderDetail.tsx
index 57044765aa..c8b405ecfa 100644
--- a/src/frontend/src/pages/sales/ReturnOrderDetail.tsx
+++ b/src/frontend/src/pages/sales/ReturnOrderDetail.tsx
@@ -9,6 +9,7 @@ import {
import { useMemo } from 'react';
import { useParams } from 'react-router-dom';
+import { DetailsField, DetailsTable } from '../../components/details/Details';
import { DetailsImage } from '../../components/details/DetailsImage';
import { ItemDetailsGrid } from '../../components/details/ItemDetails';
import { PageDetail } from '../../components/nav/PageDetail';
@@ -19,7 +20,6 @@ import { ModelType } from '../../enums/ModelType';
import { UserRoles } from '../../enums/Roles';
import { useInstance } from '../../hooks/UseInstance';
import { apiUrl } from '../../states/ApiState';
-import { DetailsField, DetailsTable } from '../../tables/Details';
import { AttachmentTable } from '../../tables/general/AttachmentTable';
/**
diff --git a/src/frontend/src/pages/sales/SalesOrderDetail.tsx b/src/frontend/src/pages/sales/SalesOrderDetail.tsx
index 6f5916e2f0..84db04670e 100644
--- a/src/frontend/src/pages/sales/SalesOrderDetail.tsx
+++ b/src/frontend/src/pages/sales/SalesOrderDetail.tsx
@@ -12,6 +12,7 @@ import {
import { useMemo } from 'react';
import { useParams } from 'react-router-dom';
+import { DetailsField, DetailsTable } from '../../components/details/Details';
import { DetailsImage } from '../../components/details/DetailsImage';
import { ItemDetailsGrid } from '../../components/details/ItemDetails';
import { PageDetail } from '../../components/nav/PageDetail';
@@ -22,7 +23,6 @@ import { ModelType } from '../../enums/ModelType';
import { UserRoles } from '../../enums/Roles';
import { useInstance } from '../../hooks/UseInstance';
import { apiUrl } from '../../states/ApiState';
-import { DetailsField, DetailsTable } from '../../tables/Details';
import { BuildOrderTable } from '../../tables/build/BuildOrderTable';
import { AttachmentTable } from '../../tables/general/AttachmentTable';
diff --git a/src/frontend/src/pages/stock/LocationDetail.tsx b/src/frontend/src/pages/stock/LocationDetail.tsx
index 875664e894..3214ed8183 100644
--- a/src/frontend/src/pages/stock/LocationDetail.tsx
+++ b/src/frontend/src/pages/stock/LocationDetail.tsx
@@ -4,6 +4,7 @@ import { IconInfoCircle, IconPackages, IconSitemap } from '@tabler/icons-react';
import { useMemo, useState } from 'react';
import { useParams } from 'react-router-dom';
+import { DetailsField, DetailsTable } from '../../components/details/Details';
import { ItemDetailsGrid } from '../../components/details/ItemDetails';
import { PageDetail } from '../../components/nav/PageDetail';
import { PanelGroup, PanelType } from '../../components/nav/PanelGroup';
@@ -11,7 +12,6 @@ import { StockLocationTree } from '../../components/nav/StockLocationTree';
import { ApiEndpoints } from '../../enums/ApiEndpoints';
import { ModelType } from '../../enums/ModelType';
import { useInstance } from '../../hooks/UseInstance';
-import { DetailsField, DetailsTable } from '../../tables/Details';
import { StockItemTable } from '../../tables/stock/StockItemTable';
import { StockLocationTable } from '../../tables/stock/StockLocationTable';
diff --git a/src/frontend/src/pages/stock/StockDetail.tsx b/src/frontend/src/pages/stock/StockDetail.tsx
index fe000711ed..9889451b7c 100644
--- a/src/frontend/src/pages/stock/StockDetail.tsx
+++ b/src/frontend/src/pages/stock/StockDetail.tsx
@@ -27,6 +27,7 @@ import {
import { useMemo, useState } from 'react';
import { useParams } from 'react-router-dom';
+import { DetailsField, DetailsTable } from '../../components/details/Details';
import { DetailsImage } from '../../components/details/DetailsImage';
import {
ItemDetails,
@@ -52,7 +53,6 @@ import { useEditStockItem } from '../../forms/StockForms';
import { useInstance } from '../../hooks/UseInstance';
import { apiUrl } from '../../states/ApiState';
import { useUserState } from '../../states/UserState';
-import { DetailsField, DetailsTable } from '../../tables/Details';
import { AttachmentTable } from '../../tables/general/AttachmentTable';
import { StockItemTable } from '../../tables/stock/StockItemTable';
import StockItemTestResultTable from '../../tables/stock/StockItemTestResultTable';