@salesgenterp/ui-components 0.4.435 → 0.4.436

package/dist/index.js

@@ -32,7 +32,7 @@ var Cards = _interopDefault(require('react-credit-cards'));
 var hi = require('react-icons/hi');
 var bs = require('react-icons/bs');
 require('react-icons/tfi');
-require('react-icons/go');
+var go = require('react-icons/go');
 var ri = require('react-icons/ri');
 var Checkbox = _interopDefault(require('@mui/material/Checkbox'));
 var FormControl = _interopDefault(require('@mui/material/FormControl'));
@@ -59,6 +59,7 @@ var ReCAPTCHA = _interopDefault(require('react-google-recaptcha'));
 var paramCase = require('param-case');
 var cg = require('react-icons/cg');
 var fi = require('react-icons/fi');
+var fa6 = require('react-icons/fa6');
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -13338,14 +13339,38 @@ var bottomTableTargetKeys = {
   adjustmentValue: 'Adjustment'
 };
 var topCardTargetKeys = {
-  id: 'PO ID',
-  vendorName: 'Vendor',
-  insertedTimestamp: 'PO Date',
-  vendorCompanyName: 'Company',
-  trackingNumber: 'Tracking Number',
-  vendorInvoiceId: 'Vendor Invoice',
-  statusId: 'Status',
-  vendorNotes: 'Vendor Notes'
+  id: {
+    label: 'PO ID',
+    icon: /*#__PURE__*/React__default.createElement(md.MdOutlineNumbers, null)
+  },
+  vendorName: {
+    label: 'Vendor',
+    icon: /*#__PURE__*/React__default.createElement(md.MdDateRange, null)
+  },
+  insertedTimestamp: {
+    label: 'PO Date',
+    icon: /*#__PURE__*/React__default.createElement(io5.IoTimeOutline, null)
+  },
+  vendorCompanyName: {
+    label: 'Company',
+    icon: /*#__PURE__*/React__default.createElement(md.MdOutlineWarehouse, null)
+  },
+  trackingNumber: {
+    label: 'Tracking Number',
+    icon: /*#__PURE__*/React__default.createElement(go.GoNumber, null)
+  },
+  vendorInvoiceId: {
+    label: 'Vendor Invoice',
+    icon: /*#__PURE__*/React__default.createElement(md.MdOutlineNumbers, null)
+  },
+  statusName: {
+    label: 'Status',
+    icon: /*#__PURE__*/React__default.createElement(fa.FaCalendarCheck, null)
+  },
+  vendorNotes: {
+    label: 'Vendor Notes',
+    icon: /*#__PURE__*/React__default.createElement(fa6.FaRegNoteSticky, null)
+  }
 };
 var PurchaseOrderDetail = function PurchaseOrderDetail(_ref) {
   var _topDtoData$slice, _topDtoData$slice2, _router$query;
@@ -13370,10 +13395,14 @@ var PurchaseOrderDetail = function PurchaseOrderDetail(_ref) {
   }).map(function (_ref3) {
     var key = _ref3[0],
       value = _ref3[1];
+    var displayValue = key === 'insertedTimestamp' ? getLocalTime({
+      time: value
+    }) : value;
     return {
       key: key,
-      label: topCardTargetKeys[key],
-      value: value
+      label: topCardTargetKeys[key].label || topCardTargetKeys[key],
+      value: displayValue,
+      icon: topCardTargetKeys[key].icon
     };
   });
   var bottomTableDtoData = Object.entries(poDto).filter(function (_ref4) {
@@ -13396,7 +13425,7 @@ var PurchaseOrderDetail = function PurchaseOrderDetail(_ref) {
     }
   }, /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
-    lg: 6,
+    lg: 8,
     xs: 12
   }, /*#__PURE__*/React__default.createElement(material.Card, {
     variant: "outlined",
@@ -13422,34 +13451,55 @@ var PurchaseOrderDetail = function PurchaseOrderDetail(_ref) {
       }
     }, /*#__PURE__*/React__default.createElement(material.Box, {
       display: "flex",
-      alignItems: "center",
       border: "1px solid #d9d9d9",
       borderRadius: "8px",
-      fontSize: "1rem"
+      fontSize: "1rem",
+      alignItems: "stretch"
     }, /*#__PURE__*/React__default.createElement(material.Box, {
       style: {
         padding: '0.5rem',
-        width: '50%',
+        flex: 1,
         background: '#f7f7f7',
         borderTopLeftRadius: '8px',
-        borderBottomLeftRadius: '8px'
+        borderBottomLeftRadius: '8px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'start'
       }
-    }, /*#__PURE__*/React__default.createElement(material.Typography, {
+    }, (item === null || item === void 0 ? void 0 : item.icon) && /*#__PURE__*/React__default.createElement("span", {
+      style: {
+        marginRight: '0.5rem',
+        marginTop: '0.2rem',
+        fontSize: '1.2rem'
+      }
+    }, item.icon), /*#__PURE__*/React__default.createElement(material.Typography, {
       sx: {
         fontWeight: 'bold',
-        whiteSpace: 'nowrap'
+        whiteSpace: 'nowrap',
+        fontSize: '1.2rem',
+        textAlign: 'center'
       }
     }, item === null || item === void 0 ? void 0 : item.label, ":")), /*#__PURE__*/React__default.createElement(material.Box, {
       style: {
         padding: '0.5rem',
-        width: '50%'
+        flex: 1,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'start'
       }
     }, /*#__PURE__*/React__default.createElement(material.Typography, {
-      variant: "body1"
+      variant: "body1",
+      fontSize: "1.2rem",
+      sx: (item === null || item === void 0 ? void 0 : item.key) === 'statusName' && {
+        background: '#fafafa',
+        padding: '3px 7px',
+        borderRadius: '4px',
+        border: '1px solid #d9d9d9'
+      }
     }, item === null || item === void 0 ? void 0 : item.value)))));
   })))))), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
-    lg: 6,
+    lg: 4,
     xs: 12
   }, /*#__PURE__*/React__default.createElement(material.Card, {
     variant: "outlined",
@@ -13474,30 +13524,47 @@ var PurchaseOrderDetail = function PurchaseOrderDetail(_ref) {
       }
     }, /*#__PURE__*/React__default.createElement(material.Box, {
       display: "flex",
-      alignItems: "center",
       border: "1px solid #d9d9d9",
       borderRadius: "8px",
-      fontSize: "1rem"
+      fontSize: "1rem",
+      alignItems: "stretch"
     }, /*#__PURE__*/React__default.createElement(material.Box, {
       style: {
         padding: '0.5rem',
-        width: '50%',
+        flex: 1,
         background: '#f7f7f7',
         borderTopLeftRadius: '8px',
-        borderBottomLeftRadius: '8px'
+        borderBottomLeftRadius: '8px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'start'
       }
-    }, /*#__PURE__*/React__default.createElement(material.Typography, {
+    }, (item === null || item === void 0 ? void 0 : item.icon) && /*#__PURE__*/React__default.createElement("span", {
+      style: {
+        marginRight: '0.5rem',
+        marginTop: '0.2rem',
+        fontSize: '1.2rem'
+      }
+    }, item.icon), /*#__PURE__*/React__default.createElement(material.Typography, {
       sx: {
         fontWeight: 'bold',
-        whiteSpace: 'nowrap'
+        whiteSpace: 'nowrap',
+        fontSize: '1.2rem',
+        textAlign: 'center'
       }
     }, item === null || item === void 0 ? void 0 : item.label, ":")), /*#__PURE__*/React__default.createElement(material.Box, {
       style: {
         padding: '0.5rem',
-        width: '50%'
+        flex: 1,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'start'
       }
     }, /*#__PURE__*/React__default.createElement(material.Typography, {
-      variant: "body1"
+      variant: "body1",
+      sx: {
+        fontSize: '1.2rem'
+      }
     }, item === null || item === void 0 ? void 0 : item.value)))));
   }))))))), /*#__PURE__*/React__default.createElement(TableContainer$2, null, /*#__PURE__*/React__default.createElement(APITable, {
     cacheFilters: true,
@@ -13570,13 +13637,13 @@ var PurchaseOrderDetail = function PurchaseOrderDetail(_ref) {
         textAlign: 'left',
         background: 'rgb(247, 247, 247)',
         color: '#000',
-        fontSize: '1rem'
+        fontSize: '1.2rem'
       }
     }, item === null || item === void 0 ? void 0 : item.label), /*#__PURE__*/React__default.createElement(material.TableCell, {
       sx: {
         textAlign: 'left',
         width: '50%',
-        fontSize: '1rem'
+        fontSize: '1.2rem'
       }
     }, item === null || item === void 0 ? void 0 : item.value));
   }))))), /*#__PURE__*/React__default.createElement(material.Grid, {
@@ -13596,13 +13663,13 @@ var PurchaseOrderDetail = function PurchaseOrderDetail(_ref) {
         textAlign: 'left',
         background: 'rgb(247, 247, 247)',
         color: '#000',
-        fontSize: '1rem'
+        fontSize: '1.2rem'
       }
     }, item === null || item === void 0 ? void 0 : item.label), /*#__PURE__*/React__default.createElement(material.TableCell, {
       sx: {
         textAlign: 'left',
         width: '50%',
-        fontSize: '1rem'
+        fontSize: '1.2rem'
       }
     }, item === null || item === void 0 ? void 0 : item.value));
   })))))));