1.1

backend/src/db/api/packages.js

@@ -19,6 +19,9 @@ module.exports = class PackagesDBApi {
         weight: data.weight || null,
         courier_name: data.courier_name || null,
         tracking_number: data.tracking_number || null,
+        length_cm: data.length_cm || null,
+        width_cm: data.width_cm || null,
+        height_cm: data.height_cm || null,
         importHash: data.importHash || null,
         createdById: currentUser.id,
         updatedById: currentUser.id,
@@ -65,6 +68,9 @@ module.exports = class PackagesDBApi {
       weight: item.weight || null,
       courier_name: item.courier_name || null,
       tracking_number: item.tracking_number || null,
+      length_cm: item.length_cm || null,
+      width_cm: item.width_cm || null,
+      height_cm: item.height_cm || null,
       importHash: item.importHash || null,
       createdById: currentUser.id,
       updatedById: currentUser.id,
@@ -123,6 +129,12 @@ module.exports = class PackagesDBApi {
     if (data.tracking_number !== undefined)
       updatePayload.tracking_number = data.tracking_number;
 
+    if (data.length_cm !== undefined) updatePayload.length_cm = data.length_cm;
+
+    if (data.width_cm !== undefined) updatePayload.width_cm = data.width_cm;
+
+    if (data.height_cm !== undefined) updatePayload.height_cm = data.height_cm;
+
     updatePayload.updatedById = currentUser.id;
 
     await packages.update(updatePayload, { transaction });
@@ -359,6 +371,78 @@ module.exports = class PackagesDBApi {
         }
       }
 
+      if (filter.length_cmRange) {
+        const [start, end] = filter.length_cmRange;
+
+        if (start !== undefined && start !== null && start !== '') {
+          where = {
+            ...where,
+            length_cm: {
+              ...where.length_cm,
+              [Op.gte]: start,
+            },
+          };
+        }
+
+        if (end !== undefined && end !== null && end !== '') {
+          where = {
+            ...where,
+            length_cm: {
+              ...where.length_cm,
+              [Op.lte]: end,
+            },
+          };
+        }
+      }
+
+      if (filter.width_cmRange) {
+        const [start, end] = filter.width_cmRange;
+
+        if (start !== undefined && start !== null && start !== '') {
+          where = {
+            ...where,
+            width_cm: {
+              ...where.width_cm,
+              [Op.gte]: start,
+            },
+          };
+        }
+
+        if (end !== undefined && end !== null && end !== '') {
+          where = {
+            ...where,
+            width_cm: {
+              ...where.width_cm,
+              [Op.lte]: end,
+            },
+          };
+        }
+      }
+
+      if (filter.height_cmRange) {
+        const [start, end] = filter.height_cmRange;
+
+        if (start !== undefined && start !== null && start !== '') {
+          where = {
+            ...where,
+            height_cm: {
+              ...where.height_cm,
+              [Op.gte]: start,
+            },
+          };
+        }
+
+        if (end !== undefined && end !== null && end !== '') {
+          where = {
+            ...where,
+            height_cm: {
+              ...where.height_cm,
+              [Op.lte]: end,
+            },
+          };
+        }
+      }
+
       if (filter.active !== undefined) {
         where = {
           ...where,

backend/src/db/migrations/1748006568095.js

@@ -0,0 +1,49 @@
+module.exports = {
+  /**
+   * @param {QueryInterface} queryInterface
+   * @param {Sequelize} Sequelize
+   * @returns {Promise<void>}
+   */
+  async up(queryInterface, Sequelize) {
+    /**
+     * @type {Transaction}
+     */
+    const transaction = await queryInterface.sequelize.transaction();
+    try {
+      await queryInterface.addColumn(
+        'packages',
+        'length_cm',
+        {
+          type: Sequelize.DataTypes.DECIMAL,
+        },
+        { transaction },
+      );
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+  /**
+   * @param {QueryInterface} queryInterface
+   * @param {Sequelize} Sequelize
+   * @returns {Promise<void>}
+   */
+  async down(queryInterface, Sequelize) {
+    /**
+     * @type {Transaction}
+     */
+    const transaction = await queryInterface.sequelize.transaction();
+    try {
+      await queryInterface.removeColumn('packages', 'length_cm', {
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+};

backend/src/db/migrations/1748006598326.js

@@ -0,0 +1,49 @@
+module.exports = {
+  /**
+   * @param {QueryInterface} queryInterface
+   * @param {Sequelize} Sequelize
+   * @returns {Promise<void>}
+   */
+  async up(queryInterface, Sequelize) {
+    /**
+     * @type {Transaction}
+     */
+    const transaction = await queryInterface.sequelize.transaction();
+    try {
+      await queryInterface.addColumn(
+        'packages',
+        'width_cm',
+        {
+          type: Sequelize.DataTypes.DECIMAL,
+        },
+        { transaction },
+      );
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+  /**
+   * @param {QueryInterface} queryInterface
+   * @param {Sequelize} Sequelize
+   * @returns {Promise<void>}
+   */
+  async down(queryInterface, Sequelize) {
+    /**
+     * @type {Transaction}
+     */
+    const transaction = await queryInterface.sequelize.transaction();
+    try {
+      await queryInterface.removeColumn('packages', 'width_cm', {
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+};

backend/src/db/migrations/1748006625126.js

@@ -0,0 +1,49 @@
+module.exports = {
+  /**
+   * @param {QueryInterface} queryInterface
+   * @param {Sequelize} Sequelize
+   * @returns {Promise<void>}
+   */
+  async up(queryInterface, Sequelize) {
+    /**
+     * @type {Transaction}
+     */
+    const transaction = await queryInterface.sequelize.transaction();
+    try {
+      await queryInterface.addColumn(
+        'packages',
+        'height_cm',
+        {
+          type: Sequelize.DataTypes.DECIMAL,
+        },
+        { transaction },
+      );
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+  /**
+   * @param {QueryInterface} queryInterface
+   * @param {Sequelize} Sequelize
+   * @returns {Promise<void>}
+   */
+  async down(queryInterface, Sequelize) {
+    /**
+     * @type {Transaction}
+     */
+    const transaction = await queryInterface.sequelize.transaction();
+    try {
+      await queryInterface.removeColumn('packages', 'height_cm', {
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+};

backend/src/db/models/packages.js

@@ -30,6 +30,18 @@ module.exports = function (sequelize, DataTypes) {
         type: DataTypes.TEXT,
       },
 
+      length_cm: {
+        type: DataTypes.DECIMAL,
+      },
+
+      width_cm: {
+        type: DataTypes.DECIMAL,
+      },
+
+      height_cm: {
+        type: DataTypes.DECIMAL,
+      },
+
       importHash: {
         type: DataTypes.STRING(255),
         allowNull: true,

backend/src/db/seeders/20231127130745-sample-data.js

@@ -41,6 +41,14 @@ const ActivityLogsData = [
 
     timestamp: new Date('2023-10-04T09:15:00Z'),
   },
+
+  {
+    // type code here for "relation_one" field
+
+    action: 'Processed Order',
+
+    timestamp: new Date('2023-10-05T16:20:00Z'),
+  },
 ];
 
 const OrdersData = [
@@ -51,7 +59,7 @@ const OrdersData = [
 
     recipient_name: 'Alice Johnson',
 
-    status: 'Processing',
+    status: 'Created',
   },
 
   {
@@ -61,7 +69,7 @@ const OrdersData = [
 
     recipient_name: 'Bob Williams',
 
-    status: 'Created',
+    status: 'Processing',
   },
 
   {
@@ -83,6 +91,16 @@ const OrdersData = [
 
     status: 'Packed',
   },
+
+  {
+    // type code here for "relation_many" field
+
+    quantity: 8,
+
+    recipient_name: 'Eve Davis',
+
+    status: 'Processing',
+  },
 ];
 
 const PackagesData = [
@@ -100,6 +118,12 @@ const PackagesData = [
     // type code here for "files" field
 
     // type code here for "files" field
+
+    length_cm: 72.38,
+
+    width_cm: 15.35,
+
+    height_cm: 83.24,
   },
 
   {
@@ -116,6 +140,12 @@ const PackagesData = [
     // type code here for "files" field
 
     // type code here for "files" field
+
+    length_cm: 19.01,
+
+    width_cm: 42.83,
+
+    height_cm: 11.07,
   },
 
   {
@@ -132,6 +162,12 @@ const PackagesData = [
     // type code here for "files" field
 
     // type code here for "files" field
+
+    length_cm: 25.67,
+
+    width_cm: 29.24,
+
+    height_cm: 33.02,
   },
 
   {
@@ -148,6 +184,34 @@ const PackagesData = [
     // type code here for "files" field
 
     // type code here for "files" field
+
+    length_cm: 54.88,
+
+    width_cm: 15.33,
+
+    height_cm: 17.73,
+  },
+
+  {
+    // type code here for "relation_one" field
+
+    dimension: 18,
+
+    weight: 2.8,
+
+    courier_name: 'TNT',
+
+    tracking_number: '5566778899',
+
+    // type code here for "files" field
+
+    // type code here for "files" field
+
+    length_cm: 44.95,
+
+    width_cm: 71.07,
+
+    height_cm: 61.84,
   },
 ];
 
@@ -167,6 +231,10 @@ const ProductsData = [
   {
     sku: 'PROD004',
   },
+
+  {
+    sku: 'PROD005',
+  },
 ];
 
 // Similar logic for "relation_many"
@@ -215,6 +283,17 @@ async function associateActivityLogWithUser() {
   if (ActivityLog3?.setUser) {
     await ActivityLog3.setUser(relatedUser3);
   }
+
+  const relatedUser4 = await Users.findOne({
+    offset: Math.floor(Math.random() * (await Users.count())),
+  });
+  const ActivityLog4 = await ActivityLogs.findOne({
+    order: [['id', 'ASC']],
+    offset: 4,
+  });
+  if (ActivityLog4?.setUser) {
+    await ActivityLog4.setUser(relatedUser4);
+  }
 }
 
 // Similar logic for "relation_many"
@@ -263,6 +342,17 @@ async function associatePackageWithOrder() {
   if (Package3?.setOrder) {
     await Package3.setOrder(relatedOrder3);
   }
+
+  const relatedOrder4 = await Orders.findOne({
+    offset: Math.floor(Math.random() * (await Orders.count())),
+  });
+  const Package4 = await Packages.findOne({
+    order: [['id', 'ASC']],
+    offset: 4,
+  });
+  if (Package4?.setOrder) {
+    await Package4.setOrder(relatedOrder4);
+  }
 }
 
 module.exports = {

backend/src/routes/packages.js

@@ -33,6 +33,15 @@ router.use(checkCrudPermissions('packages'));
  *          weight:
  *            type: integer
  *            format: int64
+ *          length_cm:
+ *            type: integer
+ *            format: int64
+ *          width_cm:
+ *            type: integer
+ *            format: int64
+ *          height_cm:
+ *            type: integer
+ *            format: int64
 
  */
 
@@ -321,6 +330,9 @@ router.get(
 
         'dimension',
         'weight',
+        'length_cm',
+        'width_cm',
+        'height_cm',
       ];
       const opts = { fields };
       try {

backend/src/services/search.js

@@ -54,7 +54,7 @@ module.exports = class SearchService {
       const columnsInt = {
         orders: ['quantity'],
 
-        packages: ['dimension', 'weight'],
+        packages: ['dimension', 'weight', 'length_cm', 'width_cm', 'height_cm'],
       };
 
       let allFoundRecords = [];

frontend/src/components/Packages/CardPackages.tsx

@@ -172,6 +172,39 @@ const CardPackages = ({
                     </div>
                   </dd>
                 </div>
+
+                <div className='flex justify-between gap-x-4 py-3'>
+                  <dt className='  text-gray-200  dark:text-dark-600'>
+                    Length cm
+                  </dt>
+                  <dd className='flex items-start gap-x-2'>
+                    <div className='font-medium line-clamp-4'>
+                      {item.length_cm}
+                    </div>
+                  </dd>
+                </div>
+
+                <div className='flex justify-between gap-x-4 py-3'>
+                  <dt className='  text-gray-200  dark:text-dark-600'>
+                    Width cm
+                  </dt>
+                  <dd className='flex items-start gap-x-2'>
+                    <div className='font-medium line-clamp-4'>
+                      {item.width_cm}
+                    </div>
+                  </dd>
+                </div>
+
+                <div className='flex justify-between gap-x-4 py-3'>
+                  <dt className='  text-gray-200  dark:text-dark-600'>
+                    Height cm
+                  </dt>
+                  <dd className='flex items-start gap-x-2'>
+                    <div className='font-medium line-clamp-4'>
+                      {item.height_cm}
+                    </div>
+                  </dd>
+                </div>
               </dl>
             </li>
           ))}

frontend/src/components/Packages/ListPackages.tsx

@@ -117,6 +117,21 @@ const ListPackages = ({
                           </button>
                         ))}
                     </div>
+
+                    <div className={'flex-1 px-3'}>
+                      <p className={'text-xs   text-gray-200 '}>Length cm</p>
+                      <p className={'line-clamp-2'}>{item.length_cm}</p>
+                    </div>
+
+                    <div className={'flex-1 px-3'}>
+                      <p className={'text-xs   text-gray-200 '}>Width cm</p>
+                      <p className={'line-clamp-2'}>{item.width_cm}</p>
+                    </div>
+
+                    <div className={'flex-1 px-3'}>
+                      <p className={'text-xs   text-gray-200 '}>Height cm</p>
+                      <p className={'line-clamp-2'}>{item.height_cm}</p>
+                    </div>
                   </Link>
                   <ListActionsPopover
                     onDelete={onDelete}

frontend/src/components/Packages/configurePackagesCols.tsx

@@ -164,6 +164,48 @@ export const loadColumns = async (
       ),
     },
 
+    {
+      field: 'length_cm',
+      headerName: 'Length cm',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+
+      editable: hasUpdatePermission,
+
+      type: 'number',
+    },
+
+    {
+      field: 'width_cm',
+      headerName: 'Width cm',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+
+      editable: hasUpdatePermission,
+
+      type: 'number',
+    },
+
+    {
+      field: 'height_cm',
+      headerName: 'Height cm',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+
+      editable: hasUpdatePermission,
+
+      type: 'number',
+    },
+
     {
       field: 'actions',
       type: 'actions',

frontend/src/menuAside.ts

@@ -7,88 +7,15 @@ const menuAside: MenuAsideItem[] = [
     icon: icon.mdiViewDashboardOutline,
     label: 'Dashboard',
   },
-
   {
-    href: '/users/users-list',
+    href: '/products/products-list',
-    label: 'Users',
+    icon: icon.mdiPackageVariant,
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    label: 'Products',
-    // @ts-ignore
-    icon: icon.mdiAccountGroup ?? icon.mdiTable,
-    permissions: 'READ_USERS',
-  },
-  {
-    href: '/activity_logs/activity_logs-list',
-    label: 'Activity logs',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon:
-      'mdiHistory' in icon
-        ? icon['mdiHistory' as keyof typeof icon]
-        : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_ACTIVITY_LOGS',
   },
   {
     href: '/orders/orders-list',
+    icon: icon.mdiCart,
     label: 'Orders',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon:
-      'mdiCart' in icon
-        ? icon['mdiCart' as keyof typeof icon]
-        : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_ORDERS',
-  },
-  {
-    href: '/packages/packages-list',
-    label: 'Packages',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon:
-      'mdiPackageVariantClosed' in icon
-        ? icon['mdiPackageVariantClosed' as keyof typeof icon]
-        : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_PACKAGES',
-  },
-  {
-    href: '/products/products-list',
-    label: 'Products',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon:
-      'mdiPackageVariant' in icon
-        ? icon['mdiPackageVariant' as keyof typeof icon]
-        : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_PRODUCTS',
-  },
-  {
-    href: '/roles/roles-list',
-    label: 'Roles',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: icon.mdiShieldAccountVariantOutline ?? icon.mdiTable,
-    permissions: 'READ_ROLES',
-  },
-  {
-    href: '/permissions/permissions-list',
-    label: 'Permissions',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: icon.mdiShieldAccountOutline ?? icon.mdiTable,
-    permissions: 'READ_PERMISSIONS',
-  },
-  {
-    href: '/profile',
-    label: 'Profile',
-    icon: icon.mdiAccountCircle,
-  },
-
-  {
-    href: '/api-docs',
-    target: '_blank',
-    label: 'Swagger API',
-    icon: icon.mdiFileCode,
-    permissions: 'READ_API_DOCS',
   },
 ];
-
 export default menuAside;

frontend/src/pages/orders/orders-picking-list.tsx

@@ -0,0 +1,75 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { fetch } from '../../stores/orders/ordersSlice';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import { getPageTitle } from '../../config';
+
+const OrdersPickingList = () => {
+  const router = useRouter();
+  const { id } = router.query;
+  const dispatch = useAppDispatch();
+  const { orders } = useAppSelector((state) => state.orders);
+
+  useEffect(() => {
+    if (id) {
+      dispatch(fetch({ id }));
+    }
+  }, [dispatch, id]);
+
+  if (!orders?.products) {
+    return <p>Loading...</p>;
+  }
+
+  return (
+    <div className="p-4 picking-list">
+      <Head>
+        <title>{getPageTitle('Picking list')}</title>
+      </Head>
+      <h1 className="text-xl font-bold mb-4">Picking List</h1>
+      <table className="w-full border-collapse">
+        <thead>
+          <tr>
+            <th className="border p-2">SKU</th>
+            <th className="border p-2">Quantity</th>
+          </tr>
+        </thead>
+        <tbody>
+          {orders.products.map((item: any) => (
+            <tr key={item.id}>
+              <td className="border p-2">{item.sku}</td>
+              <td className="border p-2">{orders.quantity}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <style jsx global>{`
+        @page {
+          size: 6in 4in;
+          margin: 0;
+        }
+        @media print {
+          body * {
+            visibility: hidden;
+          }
+          .picking-list,
+          .picking-list * {
+            visibility: visible;
+          }
+          .picking-list {
+            position: absolute;
+            left: 0;
+            top: 0;
+          }
+        }
+      `}</style>
+    </div>
+  );
+};
+
+OrdersPickingList.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutAuthenticated permission={'READ_ORDERS'}>{page}</LayoutAuthenticated>;
+};
+
+export default OrdersPickingList;

frontend/src/pages/orders/orders-view.tsx

@@ -123,6 +123,12 @@ const OrdersView = () => {
                       <th>CourierName</th>
 
                       <th>TrackingNumber</th>
+
+                      <th>Length cm</th>
+
+                      <th>Width cm</th>
+
+                      <th>Height cm</th>
                     </tr>
                   </thead>
                   <tbody>
@@ -146,6 +152,12 @@ const OrdersView = () => {
                           <td data-label='tracking_number'>
                             {item.tracking_number}
                           </td>
+
+                          <td data-label='length_cm'>{item.length_cm}</td>
+
+                          <td data-label='width_cm'>{item.width_cm}</td>
+
+                          <td data-label='height_cm'>{item.height_cm}</td>
                         </tr>
                       ))}
                   </tbody>
@@ -158,6 +170,8 @@ const OrdersView = () => {
           </>
 
           <BaseDivider />
+          <BaseButton color='info' label='Picking list' onClick={() => window.open(`/orders/orders-picking-list/?id=${id}`, '_blank')} style={{ marginRight: '8px' }}/>
+
 
           <BaseButton
             color='info'

frontend/src/pages/packages/[packagesId].tsx

@@ -49,6 +49,12 @@ const EditPackages = () => {
     shipping_label: [],
 
     commercial_invoice: [],
+
+    length_cm: '',
+
+    width_cm: '',
+
+    height_cm: '',
   };
   const [initialValues, setInitialValues] = useState(initVals);
 
@@ -160,6 +166,18 @@ const EditPackages = () => {
                 ></Field>
               </FormField>
 
+              <FormField label='Length cm'>
+                <Field type='number' name='length_cm' placeholder='Length cm' />
+              </FormField>
+
+              <FormField label='Width cm'>
+                <Field type='number' name='width_cm' placeholder='Width cm' />
+              </FormField>
+
+              <FormField label='Height cm'>
+                <Field type='number' name='height_cm' placeholder='Height cm' />
+              </FormField>
+
               <BaseDivider />
               <BaseButtons>
                 <BaseButton type='submit' color='info' label='Submit' />

frontend/src/pages/packages/packages-edit.tsx

@@ -49,6 +49,12 @@ const EditPackagesPage = () => {
     shipping_label: [],
 
     commercial_invoice: [],
+
+    length_cm: '',
+
+    width_cm: '',
+
+    height_cm: '',
   };
   const [initialValues, setInitialValues] = useState(initVals);
 
@@ -158,6 +164,18 @@ const EditPackagesPage = () => {
                 ></Field>
               </FormField>
 
+              <FormField label='Length cm'>
+                <Field type='number' name='length_cm' placeholder='Length cm' />
+              </FormField>
+
+              <FormField label='Width cm'>
+                <Field type='number' name='width_cm' placeholder='Width cm' />
+              </FormField>
+
+              <FormField label='Height cm'>
+                <Field type='number' name='height_cm' placeholder='Height cm' />
+              </FormField>
+
               <BaseDivider />
               <BaseButtons>
                 <BaseButton type='submit' color='info' label='Submit' />

frontend/src/pages/packages/packages-list.tsx

@@ -34,6 +34,9 @@ const PackagesTablesPage = () => {
 
     { label: 'Dimension', title: 'dimension', number: 'true' },
     { label: 'Weight', title: 'weight', number: 'true' },
+    { label: 'Length cm', title: 'length_cm', number: 'true' },
+    { label: 'Width cm', title: 'width_cm', number: 'true' },
+    { label: 'Height cm', title: 'height_cm', number: 'true' },
 
     { label: 'Order', title: 'order' },
   ]);

frontend/src/pages/packages/packages-new.tsx

@@ -46,6 +46,12 @@ const initialValues = {
   shipping_label: [],
 
   commercial_invoice: [],
+
+  length_cm: '',
+
+  width_cm: '',
+
+  height_cm: '',
 };
 
 const PackagesNew = () => {
@@ -133,6 +139,18 @@ const PackagesNew = () => {
                 ></Field>
               </FormField>
 
+              <FormField label='Length cm'>
+                <Field type='number' name='length_cm' placeholder='Length cm' />
+              </FormField>
+
+              <FormField label='Width cm'>
+                <Field type='number' name='width_cm' placeholder='Width cm' />
+              </FormField>
+
+              <FormField label='Height cm'>
+                <Field type='number' name='height_cm' placeholder='Height cm' />
+              </FormField>
+
               <BaseDivider />
               <BaseButtons>
                 <BaseButton type='submit' color='info' label='Submit' />

frontend/src/pages/packages/packages-table.tsx

@@ -34,6 +34,9 @@ const PackagesTablesPage = () => {
 
     { label: 'Dimension', title: 'dimension', number: 'true' },
     { label: 'Weight', title: 'weight', number: 'true' },
+    { label: 'Length cm', title: 'length_cm', number: 'true' },
+    { label: 'Width cm', title: 'width_cm', number: 'true' },
+    { label: 'Height cm', title: 'height_cm', number: 'true' },
 
     { label: 'Order', title: 'order' },
   ]);

frontend/src/pages/packages/packages-view.tsx

@@ -116,6 +116,21 @@ const PackagesView = () => {
             )}
           </div>
 
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>Length cm</p>
+            <p>{packages?.length_cm || 'No data'}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>Width cm</p>
+            <p>{packages?.width_cm || 'No data'}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>Height cm</p>
+            <p>{packages?.height_cm || 'No data'}</p>
+          </div>
+
           <BaseDivider />
 
           <BaseButton