Programuotojai Kaune

We need a React developer with experience in DataGrid components. Application is build using MERN stack + SCSS, Tailwind, MUI lib, Node.js server (full list of packages used will be below). We currently working with MUI library and their DataGrid component as well as we tried to use free jspreadsheet v4 version of excel-based DataGrid. We are open for any other solution based on any technology.

What do we need:
1 Set of requirements:
- section based on only one DataGrid component.
- convenient user interface:
-- excel based inputs, autocompletes in several columns, ability to drag and drop columns, pint columns to any side, resize columns, hide columns, (optionally sort for each column, drag and drop rows),
-- all settings must be saved for each user (now we save them in localStorage, but you can offer some solution for database based settings too)
-- inputs should open on single click with ability to select data inside (.focus()) depending on column settings, so in one columns you will start entering new data right after any key press (deleting old data) and in others you will enter new data right after existing data (demo of first option - https://preview.themeforest.net/item/dashgrin-responsive-bootstrap-4-crm-template/full_screen_preview/25227304 (Left Side Bar Menu->Tables->Editable Table))
--pay specific attention to simplicity of copy-paste actions for windows and mac users. They have to have ability to copy or/and paste column from this data grid and into this DataGrid from excel or google sheets or table in email…
-- ability to autoCopy cells down as in excel
- autosave of inserted data right after inserting it
- fast and responsive behaviour
2 Set of requirements:
- after the data is entered -> we need to compare it with the local products collection, which in tern is taken from accounting program iTax.lt (https://www.itax.lt/helps/37-api). So, user enters some product codes, then system checks the codes with all the products, find matching products and offers user to join them (via modal window or another section or any other way) into one single product (all other products have to stay in database, but they are disabled now), (optionaly: then this single product with multiple codes must scan the system second time and find all the products with one or more matching codes and again connect them into one single product via modal or any other way) at the same time user should clearly see which codes where entered by the user in start of the process and which codes where added later during joining (probably via different colors)
- all the changes with products described above have to be sent to iTax via API, so product there would me merged as well
- products have to have their history meaning each product have to have connection with buyer, and suppliers who has this product in stock (suppliers and prices are not coming from API, instead they are entered manually by user)
- all the data from this section have to be passed via React Context provider to the next section for further processes

If you need more information, please contact us.
We need to know how much does it cost and how much time it would take to finish this section.


List of packages used in the project.
FrontEnd:

"@craco/craco": "^6.3.0",
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"@mui/base": "^5.0.0-alpha.74",
"@mui/icons-material": "^5.3.1",
"@mui/lab": "^5.0.0-alpha.75",
"@mui/material": "^5.3.0",
"@mui/x-data-grid-pro": "^5.4.0",
"@tailwindcss/forms": "^0.4.0",
"@testing-library/jest-dom": "^5.11.10",
"@testing-library/react": "^11.2.6",
"@testing-library/user-event": "^12.8.3",
"autoprefixer": "^9.8.8",
"axios": "^0.24.0",
"chart.js": "^3.5.0",
"chartjs-adapter-moment": "^1.0.0",
"craco-alias": "^3.0.1",
"cross-env": "^7.0.3",
"date-fns": "^2.28.0",
"firebase": "^9.6.1",
"jspreadsheet-ce": "^4.11.1",
"moment": "^2.29.2",
"postcss": "^8.3.9",
"prop-types": "^15.8.1",
"react": "^17.0.2",
"react-beautiful-dnd": "^13.1.0",
"react-comments-section": "^2.0.10",
"react-dom": "^17.0.2",
"react-drag-drop-files": "^2.2.4",
"react-dropzone": "^12.0.4",
"react-flatpickr": "^3.10.7",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"react-table": "^7.7.0",
"react-table-hoc-draggable-columns": "^1.3.2",
"react-tables": "^1.0.2",
"react-toastify": "^9.0.3",
"react-transition-group": "^4.4.1",
"sass": "^1.43.2",
"serve": "^13.0.2",
"simple-react-lightbox": "^3.6.9-0",
"uniqid": "^5.4.0",
"web-vitals": "^1.1.1",
"tailwindcss": "^3.0.2"

BackEnd:
"accesscontrol": "^2.2.1",
"axios": "^0.25.0",
"bcrypt": "^5.0.1",
"body-parser": "^1.19.1",
"compression": "^1.7.4",
"cors": "^2.8.5",
"dotenv": "^10.0.0",
"export-from-json": "^1.6.0",
"express": "^4.17.2",
"firebase-tools": "^10.0.1",
"fuse.js": "^6.6.2",
"jsonwebtoken": "^8.5.1",
"mongoose": "^6.1.3",
"multer": "^1.4.4",
"nodemon": "^2.0.19",
"translate": "^1.4.1"