Streamlining Delivery via AG grid

Building Logistic interface with pre-Built Data Grids

In the dynamic world of logistics, accurate and accessible data is essential. This concept is the backbone of OPTISTOCK, an advanced decision support tool. Crafted to combine ERP data from sales, stores, and warehouse stocks, OPTISTOCK aids supply managers in day-to-day tasks. Its main goal? To optimize daily stock distribution strategies and ensure the greatest sales.

The client's goal was to transform the existing, on-premise solution, into a cloud-based multi-tenant SaaS platform. This evolution was not only for modernizing the tool but also accommodating an ever-growing user base.

OPTISTOCK's main feature for users is suggesting daily stock levels based on sales and what's in the warehouse. It shows, detailed insights, displayed in extensive tables with vast rows and columns in a coherent manner. Furthermore, it offers a meticulous customization feature for every product attribute. The dilemma? Determining the optimal method to present such complex data to the end-users without overwhelming them. Our solution? Leveraging the power of pre-built data grids.

Before diving into the specifics of our chosen solution, it's worth highlighting the criteria that guided our selection:

• Performance & Scalability
  The ability to handle vast amounts of data without compromising speed or responsiveness was a top priority.

• Customizability & Flexibility
  We needed a solution that would allow us to tailor components to our unique requirements, given the intricate nature of OPTISTOCK's functionalities.

• Ease of Integration
  A smooth integration process with our existing systems was crucial to ensure continuity and reduce development time.

• User Experience
  The library had to support the creation of intuitive, user-friendly interfaces to ensure that OPTISTOCK users could effortlessly navigate and interact with the platform.

• Reliability & Support
  Given the mission-critical nature of logistics operations, we sought a library with a proven track record and robust community or official support.

• Out of the box analytical capabilities
  In addition to the above criteria, we considered the library's ability to provide out-of-the-box analytical capabilities. This was important to empower our users with advanced data analysis features without the need for extensive custom development.

​

For a tool like OPTISTOCK, presenting data effectively is as crucial as the data itself. This is where AG GRID stands out, to maximise outcomes we use the Enterprise version:

• Efficiency & Speed
  Integrating AG GRID ensures rapid deployment, enabling OPTISTOCK users to dive into decision-making without delay.

• Tailored Presentation
  While AG GRID offers a comprehensive suite of features out-of-the-box, its true strength lies in its adaptability. It can be customized to fit the specific needs and nuances of each logistics operation—aligning perfectly with OPTISTOCK's emphasis on detailed product customization.

• Enhanced User Experience
  In logistics, clarity is paramount. An organized grid, like the one provided by AG GRID, offers a clear, concise data presentation, facilitating the decision-making process for supply managers.

• React.js Integration
  Combining the dynamic capabilities of React.js with AG GRID's robust features further augments OPTISTOCK's front-end. Real-time data updates and functionalities like sorting and filtering become invaluable tools for analysing logistics data.

While AG GRID has been a game-changer for Optistock's front-end development efficiency, integrating such a robust component library wasn't without its challenges:

AG Grid offers extensive customization options, which can be overwhelming for new users. Configuring the grid to meet our specific requirements required a deep understanding of the library and its numerous features and involved a considerable learning curve for our development team. This process has been helped by the extensive documentation - https://www.ag-grid.com/react-data-grid/ as well as some additional training courses - https://blog.ag-grid.com/free-online-training-for-ag-grid-in-react-and-angular/

Мanaging large datasets, a common occurrence in stock optimization software tools such as Optistock, presented performance challenges. Our application's real-time data rendering capabilities were put to the test. We had to fine-tune data loading and rendering mechanisms to ensure smooth user experiences even with significant data volumes.

Еnsuring seamless functionality across various web browsers and OS was a crucial aspect of our integration process. Compatibility issues arose, requiring additional testing and adjustments to guarantee a consistent user experience for all Optistock's clients.

Balancing customisation with out-of-the-box functionality was a constant challenge. While AG Grid offered many features, especially in its enterprise version, we sometimes had to choose between leveraging these built-in capabilities and crafting custom solutions tailored to our exact requirements.

Take, for instance, our Product Performance table which is one of the most valuable parts of the software. This table was intricate, having numerous columns. We initially opted for a custom solution, splitting the information across three tables to achieve our desired layout and functionality.

However, as we sought to optimise performance, we realised the potential of AG Grid's existing functionalities. We consolidated our data into a singular table and by using AG Grid's pinned columns feature, we fixed the positioning of certain columns while making the remainder scrollable. This decision represented a trade-off: choosing between our custom solution, which perfectly met our design needs but had certain limitations, and AG Grid's built-in solution, which, while not visually perfect, offered enhanced speed and performance.