diff --git a/src/frontend/src/components/images/Thumbnail.tsx b/src/frontend/src/components/images/Thumbnail.tsx
index c9315dcbcc..2007e8dec0 100644
--- a/src/frontend/src/components/images/Thumbnail.tsx
+++ b/src/frontend/src/components/images/Thumbnail.tsx
@@ -1,5 +1,5 @@
import { t } from '@lingui/core/macro';
-import { Anchor, Group } from '@mantine/core';
+import { Anchor, Group, HoverCard, Image } from '@mantine/core';
import { type ReactNode, useMemo } from 'react';
import { ApiImage } from './ApiImage';
@@ -13,7 +13,9 @@ export function Thumbnail({
size = 20,
link,
text,
- align
+ align,
+ hover,
+ hoverSize = 128
}: Readonly<{
src?: string;
alt?: string;
@@ -21,6 +23,8 @@ export function Thumbnail({
text?: ReactNode;
align?: string;
link?: string;
+ hover?: boolean;
+ hoverSize?: number;
}>) {
const backup_image = '/static/img/blank_image.png';
@@ -37,16 +41,35 @@ export function Thumbnail({
}, [link, text]);
return (
-
-
- {inner}
-
+
+
+
+
+ {inner}
+
+
+
+
+
+
);
}
diff --git a/src/frontend/src/tables/ColumnRenderers.tsx b/src/frontend/src/tables/ColumnRenderers.tsx
index 6c15e21b45..d750bb40bf 100644
--- a/src/frontend/src/tables/ColumnRenderers.tsx
+++ b/src/frontend/src/tables/ColumnRenderers.tsx
@@ -31,6 +31,7 @@ export function PartColumn({
{part?.active == false && (
@@ -55,6 +56,26 @@ export function PartColumn({
);
}
+export function CompanyColumn({
+ company
+}: {
+ company: any;
+}) {
+ return company ? (
+
+
+ {company.name}
+
+ ) : (
+
+ );
+}
+
export function LocationColumn(props: TableColumnProps): TableColumn {
return {
accessor: 'location',
diff --git a/src/frontend/src/tables/company/CompanyTable.tsx b/src/frontend/src/tables/company/CompanyTable.tsx
index 2c56c44943..cd49026c58 100644
--- a/src/frontend/src/tables/company/CompanyTable.tsx
+++ b/src/frontend/src/tables/company/CompanyTable.tsx
@@ -1,5 +1,4 @@
import { t } from '@lingui/core/macro';
-import { Group, Text } from '@mantine/core';
import { useCallback, useMemo, useState } from 'react';
import { useNavigate } from 'react-router-dom';
@@ -10,7 +9,6 @@ import { apiUrl } from '@lib/functions/Api';
import { navigateToLink } from '@lib/functions/Navigation';
import type { TableFilter } from '@lib/types/Filters';
import { AddItemButton } from '../../components/buttons/AddItemButton';
-import { Thumbnail } from '../../components/images/Thumbnail';
import { companyFields } from '../../forms/CompanyForms';
import {
useCreateApiFormModal,
@@ -18,7 +16,11 @@ import {
} from '../../hooks/UseForm';
import { useTable } from '../../hooks/UseTable';
import { useUserState } from '../../states/UserState';
-import { BooleanColumn, DescriptionColumn } from '../ColumnRenderers';
+import {
+ BooleanColumn,
+ CompanyColumn,
+ DescriptionColumn
+} from '../ColumnRenderers';
import { InvenTreeTable } from '../InvenTreeTable';
import { type RowAction, RowEditAction } from '../RowActions';
@@ -45,16 +47,7 @@ export function CompanyTable({
sortable: true,
switchable: false,
render: (record: any) => {
- return (
-
-
- {record.name}
-
- );
+ return ;
}
},
DescriptionColumn({}),
diff --git a/src/frontend/src/tables/purchasing/ManufacturerPartTable.tsx b/src/frontend/src/tables/purchasing/ManufacturerPartTable.tsx
index 0c4dd73735..89bd8e0c37 100644
--- a/src/frontend/src/tables/purchasing/ManufacturerPartTable.tsx
+++ b/src/frontend/src/tables/purchasing/ManufacturerPartTable.tsx
@@ -6,7 +6,6 @@ import { ModelType } from '@lib/enums/ModelType';
import { UserRoles } from '@lib/enums/Roles';
import { apiUrl } from '@lib/functions/Api';
import { AddItemButton } from '../../components/buttons/AddItemButton';
-import { Thumbnail } from '../../components/images/Thumbnail';
import { useManufacturerPartFields } from '../../forms/CompanyForms';
import {
useCreateApiFormModal,
@@ -16,7 +15,12 @@ import {
import { useTable } from '../../hooks/UseTable';
import { useUserState } from '../../states/UserState';
import type { TableColumn } from '../Column';
-import { DescriptionColumn, LinkColumn, PartColumn } from '../ColumnRenderers';
+import {
+ CompanyColumn,
+ DescriptionColumn,
+ LinkColumn,
+ PartColumn
+} from '../ColumnRenderers';
import { InvenTreeTable } from '../InvenTreeTable';
import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
@@ -42,16 +46,9 @@ export function ManufacturerPartTable({
{
accessor: 'manufacturer',
sortable: true,
- render: (record: any) => {
- const manufacturer = record?.manufacturer_detail ?? {};
-
- return (
-
- );
- }
+ render: (record: any) => (
+
+ )
},
{
accessor: 'MPN',
diff --git a/src/frontend/src/tables/purchasing/PurchaseOrderTable.tsx b/src/frontend/src/tables/purchasing/PurchaseOrderTable.tsx
index 7f7a071c10..a86399efd4 100644
--- a/src/frontend/src/tables/purchasing/PurchaseOrderTable.tsx
+++ b/src/frontend/src/tables/purchasing/PurchaseOrderTable.tsx
@@ -7,13 +7,13 @@ import { UserRoles } from '@lib/enums/Roles';
import { apiUrl } from '@lib/functions/Api';
import type { TableFilter } from '@lib/types/Filters';
import { AddItemButton } from '../../components/buttons/AddItemButton';
-import { Thumbnail } from '../../components/images/Thumbnail';
import { formatCurrency } from '../../defaults/formatters';
import { usePurchaseOrderFields } from '../../forms/PurchaseOrderForms';
import { useCreateApiFormModal } from '../../hooks/UseForm';
import { useTable } from '../../hooks/UseTable';
import { useUserState } from '../../states/UserState';
import {
+ CompanyColumn,
CompletionDateColumn,
CreatedByColumn,
CreationDateColumn,
@@ -106,17 +106,9 @@ export function PurchaseOrderTable({
accessor: 'supplier__name',
title: t`Supplier`,
sortable: true,
- render: (record: any) => {
- const supplier = record.supplier_detail ?? {};
-
- return (
-
- );
- }
+ render: (record: any) => (
+
+ )
},
{
accessor: 'supplier_reference'
diff --git a/src/frontend/src/tables/purchasing/SupplierPartTable.tsx b/src/frontend/src/tables/purchasing/SupplierPartTable.tsx
index cd3d56b95f..305c45a99c 100644
--- a/src/frontend/src/tables/purchasing/SupplierPartTable.tsx
+++ b/src/frontend/src/tables/purchasing/SupplierPartTable.tsx
@@ -8,7 +8,6 @@ import { UserRoles } from '@lib/enums/Roles';
import { apiUrl } from '@lib/functions/Api';
import type { TableFilter } from '@lib/types/Filters';
import { AddItemButton } from '../../components/buttons/AddItemButton';
-import { Thumbnail } from '../../components/images/Thumbnail';
import { useSupplierPartFields } from '../../forms/CompanyForms';
import {
useCreateApiFormModal,
@@ -20,6 +19,7 @@ import { useUserState } from '../../states/UserState';
import type { TableColumn } from '../Column';
import {
BooleanColumn,
+ CompanyColumn,
DescriptionColumn,
LinkColumn,
NoteColumn,
@@ -53,18 +53,9 @@ export function SupplierPartTable({
{
accessor: 'supplier',
sortable: true,
- render: (record: any) => {
- const supplier = record?.supplier_detail ?? {};
-
- return supplier?.pk ? (
-
- ) : (
- '-'
- );
- }
+ render: (record: any) => (
+
+ )
},
{
accessor: 'SKU',
@@ -76,18 +67,9 @@ export function SupplierPartTable({
accessor: 'manufacturer',
title: t`Manufacturer`,
sortable: true,
- render: (record: any) => {
- const manufacturer = record?.manufacturer_detail ?? {};
-
- return manufacturer?.pk ? (
-
- ) : (
- '-'
- );
- }
+ render: (record: any) => (
+
+ )
},
{
accessor: 'MPN',
diff --git a/src/frontend/src/tables/purchasing/SupplierPriceBreakTable.tsx b/src/frontend/src/tables/purchasing/SupplierPriceBreakTable.tsx
index 42f3616a4a..47e3984428 100644
--- a/src/frontend/src/tables/purchasing/SupplierPriceBreakTable.tsx
+++ b/src/frontend/src/tables/purchasing/SupplierPriceBreakTable.tsx
@@ -9,7 +9,6 @@ import { apiUrl } from '@lib/functions/Api';
import { getDetailUrl } from '@lib/functions/Navigation';
import type { ApiFormFieldSet } from '@lib/types/Forms';
import { AddItemButton } from '../../components/buttons/AddItemButton';
-import { Thumbnail } from '../../components/images/Thumbnail';
import { formatCurrency } from '../../defaults/formatters';
import {
useCreateApiFormModal,
@@ -19,6 +18,7 @@ import {
import { useTable } from '../../hooks/UseTable';
import { useUserState } from '../../states/UserState';
import type { TableColumn } from '../Column';
+import { CompanyColumn } from '../ColumnRenderers';
import { InvenTreeTable } from '../InvenTreeTable';
import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
@@ -36,21 +36,9 @@ export function SupplierPriceBreakColumns(): TableColumn[] {
title: t`Supplier`,
sortable: true,
switchable: true,
- render: (record: any) => {
- return (
-
-
- {record.supplier_detail?.name}
-
- );
- }
+ render: (record: any) => (
+
+ )
},
{
accessor: 'part_detail.SKU',
diff --git a/src/frontend/src/tables/sales/ReturnOrderTable.tsx b/src/frontend/src/tables/sales/ReturnOrderTable.tsx
index 463ce53985..244fd1b2a5 100644
--- a/src/frontend/src/tables/sales/ReturnOrderTable.tsx
+++ b/src/frontend/src/tables/sales/ReturnOrderTable.tsx
@@ -7,13 +7,13 @@ import { UserRoles } from '@lib/enums/Roles';
import { apiUrl } from '@lib/functions/Api';
import type { TableFilter } from '@lib/types/Filters';
import { AddItemButton } from '../../components/buttons/AddItemButton';
-import { Thumbnail } from '../../components/images/Thumbnail';
import { formatCurrency } from '../../defaults/formatters';
import { useReturnOrderFields } from '../../forms/ReturnOrderForms';
import { useCreateApiFormModal } from '../../hooks/UseForm';
import { useTable } from '../../hooks/UseTable';
import { useUserState } from '../../states/UserState';
import {
+ CompanyColumn,
CompletionDateColumn,
CreatedByColumn,
CreationDateColumn,
@@ -111,17 +111,9 @@ export function ReturnOrderTable({
accessor: 'customer__name',
title: t`Customer`,
sortable: true,
- render: (record: any) => {
- const customer = record.customer_detail ?? {};
-
- return (
-
- );
- }
+ render: (record: any) => (
+
+ )
},
{
accessor: 'customer_reference'
diff --git a/src/frontend/src/tables/sales/SalesOrderTable.tsx b/src/frontend/src/tables/sales/SalesOrderTable.tsx
index 6355462605..073664a8e9 100644
--- a/src/frontend/src/tables/sales/SalesOrderTable.tsx
+++ b/src/frontend/src/tables/sales/SalesOrderTable.tsx
@@ -7,7 +7,6 @@ import { UserRoles } from '@lib/enums/Roles';
import { apiUrl } from '@lib/functions/Api';
import type { TableFilter } from '@lib/types/Filters';
import { AddItemButton } from '../../components/buttons/AddItemButton';
-import { Thumbnail } from '../../components/images/Thumbnail';
import { ProgressBar } from '../../components/items/ProgressBar';
import { formatCurrency } from '../../defaults/formatters';
import { useSalesOrderFields } from '../../forms/SalesOrderForms';
@@ -15,6 +14,7 @@ import { useCreateApiFormModal } from '../../hooks/UseForm';
import { useTable } from '../../hooks/UseTable';
import { useUserState } from '../../states/UserState';
import {
+ CompanyColumn,
CreatedByColumn,
CreationDateColumn,
DescriptionColumn,
@@ -136,17 +136,9 @@ export function SalesOrderTable({
accessor: 'customer__name',
title: t`Customer`,
sortable: true,
- render: (record: any) => {
- const customer = record.customer_detail ?? {};
-
- return (
-
- );
- }
+ render: (record: any) => (
+
+ )
},
{
accessor: 'customer_reference',