Add VarianceDisplay component and update StockEvent model for variance type

src/components/Dashboard/common/VarianceDisplay.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Typography } from 'antd'
+import PropTypes from 'prop-types'
+
+const { Text } = Typography
+
+const VarianceDisplay = ({ value, prefix, suffix }) => {
+  if (value === null || value === undefined) {
+    return <Text type='secondary'>n/a</Text>
+  }
+
+  const isPositive = value > 0
+  const isNegative = value < 0
+  const displayValue = Math.abs(value).toFixed(2)
+
+  return (
+    <Text type={isPositive ? 'success' : isNegative ? 'danger' : undefined}>
+      {prefix || ''}
+      {isPositive ? '+' : isNegative ? '-' : ''}
+      {displayValue}
+      {suffix || ''}
+    </Text>
+  )
+}
+
+VarianceDisplay.propTypes = {
+  value: PropTypes.number,
+  prefix: PropTypes.string,
+  suffix: PropTypes.string
+}
+
+export default VarianceDisplay

src/database/models/StockEvent.js

@@ -60,7 +60,7 @@ export const StockEvent = {
       label: 'Parent',
       type: 'object',
       objectType: (objectData) => {
-        return objectData.parentType
+        return objectData?.parentType
       },
       value: null,
       showCopy: true
@@ -78,9 +78,12 @@ export const StockEvent = {
     {
       name: 'value',
       label: 'Value',
-      columnWidth: 100,
-      type: 'number',
-      showCopy: true
+      columnWidth: 120,
+      type: 'variance',
+      showCopy: true,
+      suffix: (objectData) => {
+        return objectData.unit
+      }
     }
   ]
 }