Update columnWidth property to 180 for multiple models to ensure consistent UI layout across the application.

src/components/Dashboard/Management/AppUpdates/NewAppUpdate.jsx

@@ -1,7 +1,9 @@
 import PropTypes from 'prop-types'
-import { Button, Flex, Typography, Card } from 'antd'
+import { useState } from 'react'
+import { Button, Flex, Typography, Card, Dropdown, Modal, Table } from 'antd'
 import TimeDisplay from '../../common/TimeDisplay'
 import FarmControlAppIcon from '../../../Logos/FarmControlAppIcon'
+import EyeIcon from '../../../Icons/EyeIcon'
 
 const { Text, Title } = Typography
 
@@ -9,56 +11,131 @@ const NewAppUpdate = ({ update, onCancel, onUpdate }) => {
   const artifacts = Array.isArray(update?.artifacts) ? update.artifacts : []
   const primaryArtifact = artifacts.find((artifact) => artifact.url)
 
+  const [changesMenuOpen, setChangesMenuOpen] = useState(false)
+
+  const columns = [
+    {
+      title: 'Date',
+      dataIndex: 'date',
+      key: 'date',
+      width: 290,
+      render: (text, record) => {
+        return <TimeDisplay dateTime={record.date} showSince={true} />
+      }
+    },
+    {
+      title: 'Author',
+      dataIndex: 'author',
+      key: 'author',
+      width: 180
+    },
+    {
+      title: 'Message',
+      dataIndex: 'message',
+      key: 'message',
+      width: 500
+    }
+  ]
+
+  const actionsMenu = {
+    items: [
+      {
+        label: 'View Changes',
+        key: 'viewChanges',
+        icon: <EyeIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'viewChanges') {
+        setChangesMenuOpen(true)
+      }
+    }
+  }
+
   return (
-    <Flex vertical gap='middle'>
-      <Text>
-        A new Farm Control update is available. Would you like to update now?
-      </Text>
-      <Card styles={{ body: { padding: 12 } }}>
-        <Flex gap={12}>
-          <FarmControlAppIcon style={{ width: '70px', height: '70px' }} />
-          <Flex vertical gap={2} justify='center'>
-            <Title level={3} style={{ margin: 0 }}>
-              {'Farm Control UI'}
-            </Title>
-            <Flex style={{ columnGap: '15px', rowGap: '8px' }}>
-              <Text style={{ margin: 0 }} type='secondary'>
-                Version:{' '}
-                <Text>
-                  {update?.version ? `v${update.version}` : 'Unknown'}
-                </Text>
-              </Text>
-              <Text style={{ margin: 0 }} type='secondary'>
-                Build Number:{' '}
-                <Text>
-                  {update?.buildNumber ? `b${update.buildNumber}` : 'Unknown'}
-                </Text>
-              </Text>
-              <Text style={{ margin: 0 }} type='secondary'>
-                Branch: <Text>{update?.branch || 'Unknown'}</Text>
-              </Text>
+    <>
+      <Flex vertical gap='middle'>
+        <Text>
+          A new Farm Control update is available. Would you like to update now?
+        </Text>
+        <Card styles={{ body: { padding: '12px 18px 12px 12px' } }}>
+          <Flex gap={12} style={{ width: '100%' }}>
+            <FarmControlAppIcon style={{ width: '70px', height: '70px' }} />
+            <Flex vertical gap={2} justify='center' style={{ width: '100%' }}>
+              <Title level={3} style={{ margin: 0 }}>
+                {'Farm Control UI'}
+              </Title>
+              <Flex
+                align='center'
+                justify='space-between'
+                style={{ width: '100%' }}
+              >
+                <Flex style={{ columnGap: '15px', rowGap: '8px' }}>
+                  <Text style={{ margin: 0 }} type='secondary'>
+                    Version:{' '}
+                    <Text>
+                      {update?.version ? `v${update.version}` : 'Unknown'}
+                    </Text>
+                  </Text>
+                  <Text style={{ margin: 0 }} type='secondary'>
+                    Build Number:{' '}
+                    <Text>
+                      {update?.buildNumber
+                        ? `b${update.buildNumber}`
+                        : 'Unknown'}
+                    </Text>
+                  </Text>
+                  <Text style={{ margin: 0 }} type='secondary'>
+                    Branch: <Text>{update?.branch || 'Unknown'}</Text>
+                  </Text>
+                </Flex>
+                <Dropdown menu={actionsMenu}>
+                  <Button size='small' type='text'>
+                    Actions
+                  </Button>
+                </Dropdown>
+              </Flex>
             </Flex>
           </Flex>
-        </Flex>
-      </Card>
+        </Card>
 
-      <Flex justify='space-between' gap='small' align='center'>
-        <Flex gap='small'>
-          <Text type='secondary'>Built at:</Text>
-          <TimeDisplay dateTime={update?.builtAt} />
-        </Flex>
-        <Flex gap='small'>
-          <Button onClick={onCancel}>Not Now</Button>
-          <Button
-            type='primary'
-            onClick={() => onUpdate(update)}
-            disabled={!primaryArtifact}
-          >
-            Update Now
-          </Button>
+        <Flex justify='space-between' gap='small' align='center'>
+          <Flex gap='small'>
+            <Text type='secondary'>Built at:</Text>
+            <TimeDisplay dateTime={update?.builtAt} />
+          </Flex>
+          <Flex gap='small'>
+            <Button onClick={onCancel}>Not Now</Button>
+            <Button
+              type='primary'
+              onClick={() => onUpdate(update)}
+              disabled={!primaryArtifact}
+            >
+              Update Now
+            </Button>
+          </Flex>
         </Flex>
+
+        <Modal
+          open={changesMenuOpen}
+          onCancel={() => setChangesMenuOpen(false)}
+          footer={null}
+          title='View Changes'
+          width={1200}
+        >
+          <div style={{ marginTop: '20px' }}>
+            <Table
+              dataSource={update?.changes}
+              columns={columns}
+              scroll={{ x: 1100 }}
+              bordered={true}
+              pagination={false}
+              className='child-table'
+            />
+          </div>
+        </Modal>
       </Flex>
-    </Flex>
+    </>
   )
 }
 

src/database/models/AppPassword.js

@@ -96,7 +96,8 @@ export const AppPassword = {
       columnFixed: 'left',
       objectType: 'appPassword',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'name',

src/database/models/AuditLog.js

@@ -42,7 +42,8 @@ export const AuditLog = {
       columnFixed: 'left',
       objectType: 'auditLog',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'updatedAt',

src/database/models/Client.js

@@ -115,7 +115,8 @@ export const Client = {
       columnFixed: 'left',
       objectType: 'client',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'name',

src/database/models/Courier.js

@@ -88,7 +88,8 @@ export const Courier = {
       columnFixed: 'left',
       objectType: 'courier',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'name',

src/database/models/CourierService.js

@@ -104,7 +104,8 @@ export const CourierService = {
       columnFixed: 'left',
       objectType: 'courierService',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'name',

src/database/models/DocumentJob.js

@@ -79,7 +79,8 @@ export const DocumentJob = {
       columnFixed: 'left',
       objectType: 'documentJob',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'name',

src/database/models/DocumentPrinter.js

@@ -86,7 +86,8 @@ export const DocumentPrinter = {
       columnFixed: 'left',
       objectType: 'documentPrinter',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'name',

src/database/models/DocumentSize.js

@@ -93,7 +93,8 @@ export const DocumentSize = {
       columnFixed: 'left',
       objectType: 'documentSize',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'name',

src/database/models/DocumentTemplate.js

@@ -108,7 +108,8 @@ export const DocumentTemplate = {
       columnFixed: 'left',
       objectType: 'documentTemplate',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'name',

src/database/models/Filament.js

@@ -114,7 +114,8 @@ export const Filament = {
       columnFixed: 'left',
       objectType: 'filament',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'name',

src/database/models/FilamentSku.js

@@ -119,7 +119,8 @@ export const FilamentSku = {
       columnFixed: 'left',
       objectType: 'filamentSku',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'name',

src/database/models/FilamentStock.js

@@ -55,7 +55,8 @@ export const FilamentStock = {
       columnFixed: 'left',
       objectType: 'filamentStock',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'state',

src/database/models/File.js

@@ -106,7 +106,8 @@ export const File = {
       columnFixed: 'left',
       objectType: 'file',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'name',

src/database/models/GCodeFile.js

@@ -126,7 +126,8 @@ export const GCodeFile = {
       columnFixed: 'left',
       objectType: 'gcodeFile',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'name',

src/database/models/Host.js

@@ -98,7 +98,8 @@ export const Host = {
       columnFixed: 'left',
       objectType: 'host',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'name',

src/database/models/Invoice.js

@@ -175,7 +175,7 @@ export const Invoice = {
       objectType: 'invoice',
       showCopy: true,
       readOnly: true,
-      columnWidth: 140
+      columnWidth: 180
     },
     {
       name: 'updatedAt',

src/database/models/Job.js

@@ -57,7 +57,8 @@ export const Job = {
       columnFixed: 'left',
       objectType: 'job',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'state',

src/database/models/Listing.js

@@ -154,7 +154,8 @@ export const Listing = {
       columnFixed: 'left',
       objectType: 'listing',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'updatedAt',

src/database/models/ListingVarient.js

@@ -138,7 +138,8 @@ export const ListingVarient = {
       columnFixed: 'left',
       objectType: 'listingVarient',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'updatedAt',

src/database/models/Marketplace.js

@@ -180,7 +180,8 @@ export const Marketplace = {
       columnFixed: 'left',
       objectType: 'marketplace',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'updatedAt',

src/database/models/Material.js

@@ -89,7 +89,8 @@ export const Material = {
       columnFixed: 'left',
       objectType: 'material',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'name',

src/database/models/Note.js

@@ -37,7 +37,8 @@ export const Note = {
       columnFixed: 'left',
       objectType: 'note',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'updatedAt',

src/database/models/NoteType.js

@@ -76,7 +76,8 @@ export const NoteType = {
       columnFixed: 'left',
       objectType: 'noteType',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'name',

src/database/models/OrderItem.js

@@ -130,7 +130,7 @@ export const OrderItem = {
       objectType: 'orderItem',
       showCopy: true,
       readOnly: true,
-      columnWidth: 140
+      columnWidth: 180
     },
     {
       name: 'updatedAt',

src/database/models/Part.js

@@ -101,7 +101,8 @@ export const Part = {
       columnFixed: 'left',
       objectType: 'part',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'name',

src/database/models/PartSku.js

@@ -111,7 +111,8 @@ export const PartSku = {
       columnFixed: 'left',
       objectType: 'partSku',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'name',

src/database/models/PartStock.js

@@ -53,7 +53,8 @@ export const PartStock = {
       columnFixed: 'left',
       objectType: 'partStock',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'state',

src/database/models/Payment.js

@@ -142,7 +142,7 @@ export const Payment = {
       objectType: 'payment',
       showCopy: true,
       readOnly: true,
-      columnWidth: 140
+      columnWidth: 180
     },
     {
       name: 'updatedAt',

src/database/models/Printer.js

@@ -234,7 +234,7 @@ export const Printer = {
       objectType: 'printer',
       showCopy: true,
       readOnly: true,
-      columnWidth: 150
+      columnWidth: 180
     },
     {
       name: 'createdAt',

src/database/models/Product.js

@@ -126,7 +126,8 @@ export const Product = {
       columnFixed: 'left',
       objectType: 'product',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'name',

src/database/models/ProductCategory.js

@@ -92,7 +92,8 @@ export const ProductCategory = {
       columnFixed: 'left',
       objectType: 'productCategory',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'name',

src/database/models/ProductSku.js

@@ -121,7 +121,8 @@ export const ProductSku = {
       columnFixed: 'left',
       objectType: 'productSku',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
 
     {

src/database/models/ProductStock.js

@@ -120,7 +120,8 @@ export const ProductStock = {
       columnFixed: 'left',
       objectType: 'productStock',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'state',

src/database/models/PurchaseOrder.js

@@ -232,7 +232,7 @@ export const PurchaseOrder = {
       objectType: 'purchaseOrder',
       showCopy: true,
       readOnly: true,
-      columnWidth: 140
+      columnWidth: 180
     },
     {
       name: 'updatedAt',

src/database/models/SalesOrder.js

@@ -214,7 +214,7 @@ export const SalesOrder = {
       objectType: 'salesOrder',
       showCopy: true,
       readOnly: true,
-      columnWidth: 140
+      columnWidth: 180
     },
     {
       name: 'updatedAt',

src/database/models/Shipment.js

@@ -167,7 +167,7 @@ export const Shipment = {
       objectType: 'shipment',
       showCopy: true,
       readOnly: true,
-      columnWidth: 140
+      columnWidth: 180
     },
 
     {

src/database/models/StockAudit.js

@@ -45,7 +45,8 @@ export const StockAudit = {
       columnFixed: 'left',
       objectType: 'stockAudit',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'state',

src/database/models/StockEvent.js

@@ -37,7 +37,7 @@ export const StockEvent = {
       value: null,
       showCopy: true,
       readOnly: true,
-      columnWidth: 140
+      columnWidth: 180
     },
     {
       name: 'updatedAt',

src/database/models/StockLocation.js

@@ -45,7 +45,8 @@ export const StockLocation = {
       columnFixed: 'left',
       objectType: 'stockLocation',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'updatedAt',

src/database/models/StockTransfer.js

@@ -112,7 +112,8 @@ export const StockTransfer = {
       columnFixed: 'left',
       objectType: 'stockTransfer',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'name',

src/database/models/SubJob.js

@@ -57,7 +57,8 @@ export const SubJob = {
       columnFixed: 'left',
       objectType: 'subJob',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'state',

src/database/models/TaxRate.js

@@ -104,7 +104,8 @@ export const TaxRate = {
       columnFixed: 'left',
       objectType: 'taxRate',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'name',

src/database/models/TaxRecord.js

@@ -97,7 +97,8 @@ export const TaxRecord = {
       columnFixed: 'left',
       objectType: 'taxRecord',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'taxRate',

src/database/models/User.js

@@ -63,7 +63,8 @@ export const User = {
       columnFixed: 'left',
       objectType: 'user',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'name',

src/database/models/Vendor.js

@@ -113,7 +113,8 @@ export const Vendor = {
       columnFixed: 'left',
       objectType: 'vendor',
       showCopy: true,
-      readOnly: true
+      readOnly: true,
+      columnWidth: 180
     },
     {
       name: 'name',