WPT - Warehouse Planning Tool (Front-end)

WPT Frontend serves as the user interface for the Warehouse Planning Tool, delivering a robust dashboard and interactive capabilities for efficient warehouse management. This application redefines the process of tracking trailers, managing product information, and optimizing resource allocation within warehouses.

Key Features

• 📊 Interactive Dashboard: Gain actionable insights through an intuitive dashboard enriched with dynamic charts. Tailor charts with customizable date ranges, enabling detailed trend analysis and data-driven decision-making.

• 🚚 Trailers Board: Seamlessly oversee trailers with the digital trailers board. Effortlessly add, edit, and remove trailer entries for comprehensive monitoring of loaded and dispatched trailers.

• 📈 Trailer Statistics: Obtain immediate access to essential trailer statistics, including monthly trailer counts, average case delivery costs, and comprehensive expenditure with supplementary charges.

• 🔧 Configuration Management: Ensure data accuracy and streamline workflows with the configuration page. Manage load types, products, and contractors through dropdown lists, minimizing errors and maximizing operational efficiency.

• 🗓️ Days and Week Pages: Strategically plan operations using the Days and Week pages. Input precise data for specific days, forecast trailer requirements based on historical data, and analyze demand patterns. The Week page provides a comprehensive overview of a chosen week's data.

• Resource Allocation: Empower store managers with predictive insights, allowing accurate resource allocation decisions before trailers depart the warehouse premises.

• 🔐 Secure Authentication: Safely access the application by creating a personalized account or logging in through Google credentials. Firebase authentication ensures data integrity and user privacy.

• 📱 Responsive Design: Experience a consistent and optimal user interface across various devices, courtesy of the application's responsive design tailored for both desktop and mobile screens.

Screenshots

Deployment

Please note that it might take a while to receive the initial response from the server due to free hosting.

⚡⚡⚡⚡⚡⚡⚡⚡⚡⚡⚡⚡⚡⚡

👉 Link to the Deployed Application 👈:

⚡⚡⚡⚡⚡⚡⚡⚡⚡⚡⚡⚡⚡⚡

Technologies Used

• React: A JavaScript library for building user interfaces.
• TypeScript: A superset of JavaScript that adds static types.
• RTK Query: A data fetching and state management library for React applications.
• Material-UI (mui 5): A popular UI framework for creating responsive and visually appealing components.
• Recharts: A charting library for creating interactive and customizable charts.
• date-fns: A modern JavaScript date utility library.
• countUp: A React component wrapper around the CountUp.js library for animating numbers.

Getting Started

Follow these steps to set up and run the frontend of the Warehouse Planning Tool:

1. Clone the repository:

   git clone https://github.com/AleksandrRiabov/wpt
   

2. Install dependencies:

   cd warehouse-planning-tool-frontend
   npm install
   

3. Set up environment variables:

   • Create the .env file with your Firebase configuration.

4. Start the development server:

   npm start
   

5. Make sure the backend is set up and running. Find the backend repository here: WPT Backend Repository

Contributing

• Contributions are welcome! If you find any issues or want to enhance the application, feel free to open an issue or submit a pull request.

Documentation

• User Guide