[UI] Update parametric data table hover (#12145)

- Display last update date
- Display updating user
- Improved formatting

src/frontend/src/tables/TableHoverCard.tsx

@@ -24,7 +24,8 @@ export function TableHoverCard({
   icon, // The icon to display
   iconColor, // The icon color
   position, // The position of the hovercard
-  zIndex // Optional z-index for the hovercard
+  zIndex, // Optional z-index for the hovercard
+  minWidth // Optional minimum width for the dropdown
 }: Readonly<{
   value: any;
   extra?: ReactNode;
@@ -33,6 +34,7 @@ export function TableHoverCard({
   iconColor?: string;
   position?: FloatingPosition;
   zIndex?: string | number;
+  minWidth?: number;
 }>) {
   const extraItems: ReactNode = useMemo(() => {
     if (Array.isArray(extra)) {
@@ -74,7 +76,7 @@ export function TableHoverCard({
           />
         </Group>
       </HoverCard.Target>
-      <HoverCard.Dropdown>
+      <HoverCard.Dropdown style={minWidth ? { minWidth } : undefined}>
         <Stack gap='xs'>
           <Group gap='xs' justify='left'>
             <InvenTreeIcon

src/frontend/src/tables/general/ParametricDataTable.tsx

@@ -14,13 +14,14 @@ import {
 import type { TableFilter } from '@lib/types/Filters';
 import type { TableColumn } from '@lib/types/Tables';
 import { t } from '@lingui/core/macro';
-import { Group } from '@mantine/core';
+import { Divider, Group, Text } from '@mantine/core';
 import { useHover } from '@mantine/hooks';
 import { IconCirclePlus } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import { type ReactNode, useCallback, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useApi } from '../../contexts/ApiContext';
+import { formatDate } from '../../defaults/formatters';
 import { useParameterFields } from '../../forms/CommonForms';
 import {
   useCreateApiFormModal,
@@ -72,11 +73,41 @@ function ParameterCell({
     parameter.data_numeric != parameter.data
   ) {
     const numeric = formatDecimal(parameter.data_numeric, { digits: 15 });
-    extra.push(`${numeric} [${template.units}]`);
+
+    extra.push(
+      <Group gap='xs' justify='space-between'>
+        <Text size='sm' fw='bold'>
+          {numeric}
+        </Text>
+        <Text size='xs'>[{template.units}]</Text>
+      </Group>
+    );
+  }
+
+  if (parameter?.updated) {
+    extra.push(
+      <Group gap='xs' justify='space-between'>
+        <Text size='sm' fw='bold'>{t`Last Updated`}</Text>
+        <Text size='xs'>{formatDate(parameter.updated)}</Text>
+      </Group>
+    );
+  }
+
+  if (parameter?.updated_by_detail?.username) {
+    extra.push(
+      <Group gap='xs' justify='space-between'>
+        <Text size='sm' fw='bold'>{t`Updated By`}</Text>
+        <Text size='xs'>{parameter.updated_by_detail.username}</Text>
+      </Group>
+    );
   }
 
   if (hovered && canEdit) {
-    extra.push(t`Click to edit`);
+    if (extra.length > 0) {
+      extra.push(<Divider />);
+    }
+
+    extra.push(<Text size='xs'>{t`Click to edit`}</Text>);
   }
 
   return (
@@ -88,6 +119,7 @@ function ParameterCell({
             extra={extra}
             icon={hovered && canEdit ? 'edit' : 'info'}
             title={template.name}
+            minWidth={250}
           />
         </Group>
       </Group>