🌎 English | 🇧🇷 Português

Inventories web Dashboard (Smart Stock Project)

Frontend module built with Next.js for inventory management integrated with the SSRFID project.

✨ Features

The frontend provides access to the following features:

• Inventory Checks History: View a detailed history of all performed inventory checks, including product readings and associated events.
• User Management: Register new users in the system and manage them, assigning different roles such as Administrator or Operator.
• Product CRUD (Provisional*): Add new products to the inventory by specifying name, code, description, and location, then view and filter the list of products already registered in the system.

*In the final product, the expectation is to only integrate with a product management module from an existing system.

📷 Screenshots

Here are some screenshots of the application in action:

Inventories	Stockists

For more screenshots:

• Login Screen
• Products Screen

🛠️ Technologies Used

This project was built with the following technologies:

• Language: TypeScript 5
• Framework: Next.js 16 (with App Router)
• Styling: Tailwind CSS 4, shadcn/ui and Lucide.

💻 Installation and Usage

Prerequisites

Before you begin, you will need to have installed:

• Node.js (version 20.9 or higher)
• pnpm (recommended package manager)

OR

• Docker

Installation

1. Clone the repository:

   git clone {smartstock-web repository}
   cd smartstock-web

2. Install dependencies:

   pnpm install

3. Create a .env file based on .env.example and add the necessary configurations:

   cp .env.example .env

Running the Development Server

To start the application in development mode, run:

pnpm dev

Or, to spin up the project container locally, use one of the commands below:

# Start the services defined in the compose.dev.yaml file
docker compose -f compose.dev.yaml up

# Start the services and force image rebuilds
docker compose -f compose.dev.yaml up --build

To tear down (stop and remove) the containers:

docker compose -f compose.dev.yaml down

Open http://localhost:3000 in your browser to see the result. The page will automatically reload as you edit the files.

🌐 Production Deployment

As a Node.js project, the application can be easily deployed on most cloud providers. The most practical way is on Vercel, but there are many options, such as Netlify and Render.

For self-hosting, you can use the compose.prod.yaml file to spin up the application in production. In addition to Next.js itself, the compose file also configures an Nginx server.

🔮 Future of the project

Moving forward with the project, these could be the next steps:

• Pagination for the Inventory listing
• Improve form validation and error feedback
• Expand/enrich Inventory reports
• Add charts with information about the Inventories in the listing
• Modify the backend to return the inventory date/time in the GetAll request (in case of delays)
• Add test coverage
• Complete the CRUD in the Products module* (keeping in mind it is a temporary module)
• (Bug) Verify if token refresh flow is working

📄 License

This project is licensed under the MIT License. See the LICENSE file for more details.

👨‍💻 About

This repository contains the frontend implementation of the project, developed by Ruan Macedo Santos.

Developed for the Smart Stock project under the EmbarcaTech Program.