feat: linking relation with id in importing

packages/webapp/src/containers/Items/ItemsActionsBar.tsx

@@ -94,6 +94,10 @@ function ItemsActionsBar({
   const handleTableRowSizeChange = (size) => {
     addSetting('items', 'tableSize', size);
   };
+  // Handles the import button click.
+  const handleImportBtnClick = () => {
+    history.push('/items/import');
+  };
 
   return (
     <DashboardActionsBar>
@@ -143,6 +147,7 @@ function ItemsActionsBar({
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon="file-import-16" iconSize={16} />}
+          onClick={handleImportBtnClick}
           text={<T id={'import'} />}
         />
         <Button

packages/webapp/src/containers/Items/ItemsImportPage.tsx

@@ -0,0 +1,25 @@
+// @ts-nocheck
+import { DashboardInsider } from '@/components';
+import { ImportView } from '../Import/ImportView';
+import { useHistory } from 'react-router-dom';
+
+export default function ItemsImportpage() {
+  const history = useHistory();
+
+  const handleImportSuccess = () => {
+    history.push('/items');
+  };
+  const handleCancelBtnClick = () => {
+    history.push('/items');
+  };
+  return (
+    <DashboardInsider name={'import-items'}>
+      <ImportView
+        resource={'items'}
+        onImportSuccess={handleImportSuccess}
+        onCancelClick={handleCancelBtnClick}
+        exampleTitle="Items Example"
+        />
+    </DashboardInsider>
+  );
+}

packages/webapp/src/containers/ItemsCategories/ItemCategoriesImport.tsx

@@ -0,0 +1,25 @@
+// @ts-nocheck
+import { DashboardInsider } from '@/components';
+import { ImportView } from '../Import/ImportView';
+import { useHistory } from 'react-router-dom';
+
+export default function ItemCategoriesImport() {
+  const history = useHistory();
+
+  const handleImportSuccess = () => {
+    history.push('/items/categories');
+  };
+  const handleCancelBtnClick = () => {
+    history.push('/items/categories');
+  };
+  return (
+    <DashboardInsider name={'import-item-categories'}>
+      <ImportView
+        resource={'item_category'}
+        onImportSuccess={handleImportSuccess}
+        onCancelClick={handleCancelBtnClick}
+        exampleTitle="Item Categories Example"
+        />
+    </DashboardInsider>
+  );
+}

packages/webapp/src/containers/ItemsCategories/ItemsCategoryActionsBar.tsx

@@ -12,7 +12,7 @@ import {
   FormattedMessage as T,
   AdvancedFilterPopover,
   DashboardFilterButton,
-  DashboardActionsBar
+  DashboardActionsBar,
 } from '@/components';
 
 import withItemCategories from './withItemCategories';
@@ -22,6 +22,7 @@ import withAlertActions from '@/containers/Alert/withAlertActions';
 
 import { compose } from '@/utils';
 import { useItemsCategoriesContext } from './ItemsCategoriesProvider';
+import { useHistory } from 'react-router-dom';
 
 /**
  * Items categories actions bar.
@@ -41,11 +42,16 @@ function ItemsCategoryActionsBar({
   openAlert,
 }) {
   const { fields } = useItemsCategoriesContext();
+  const history = useHistory();
 
   const onClickNewCategory = () => {
     openDialog('item-category-form', {});
   };
 
+  const handleImportBtnClick = () => {
+    history.push('/item/categories/import');
+  };
+
   // Handle the items categories bulk delete.
   const handelBulkDelete = () => {
     openAlert('item-categories-bulk-delete', {
@@ -93,6 +99,7 @@ function ItemsCategoryActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon="file-import-16" iconSize={16} />}
           text={<T id={'import'} />}
+          onClick={handleImportBtnClick}
         />
         <Button
           className={Classes.MINIMAL}