In many business applications, important information is spread across different screens, tables, and systems. Although the data is available, understanding it quickly can still be a challenge.
This project explores how to build a simple and interactive Asset & Inventory Dashboard that brings materials, assets, PPE, uniforms, values, quantities, and movement history into a single interface.
The dashboard was originally developed for an internal environment and connected to business APIs. For the public version, the original integrations and company-specific information were removed and replaced with mock data.
The goal is to provide a generic example of how a lightweight dashboard can be built using HTML, JavaScript, jQuery, Tailwind CSS, and Chart.js, without requiring a frontend framework.
Overview of the Project
The dashboard was designed to organize different types of operational information into a single interface.
The main sections are:
Materials — Inventory organized by warehouse.
Assets — Assets organized by cost center.
PPE and Uniforms — Dedicated inventory information.
Movement History — Historical movements of materials.
Charts — Visual representation of quantities and values.
Search and Filters — Quick access to specific records.
The basic concept is:
Data
↓
Application Logic
↓
Dashboard
↓
Charts / Tables / Cards
Instead of presenting all information in a large table, the dashboard groups related information and provides different ways to analyze it.
Project Structure
The project uses a simple structure:
dashboard-ativos-materiais/
│
├── index.html
│
├── assets/
│ ├── css/
│ │ └── style.css
│ │
│ ├── img/
│ │ └── favicon.svg
│ │
│ └── js/
│ ├── app.js
│ └── mock-data.js
│
├── README.md
└── .gitignore
The JavaScript code is separated into two main files.
mock-data.js contains the data used by the public demonstration.
app.js contains the application logic, including rendering, filtering, searching, charts, and interactions.
This separation makes it easier to replace the mock data with a real API later.
Technologies Used
The project uses a relatively small frontend stack.
HTML
HTML provides the structure of the dashboard and its components.
Tailwind CSS
Tailwind CSS is used for the visual interface, including:
Cards
Buttons
Filters
Tables
Modals
Responsive layouts
Typography
jQuery
jQuery is responsible for the application's interactions and dynamic content.
It is used for:
DOM manipulation
Event handling
Filtering
Searching
Rendering
AJAX requests
Modal interactions
Chart.js
Chart.js is used to create visual representations of the dashboard data.
Dashboard Categories
The dashboard provides a simple category filter:
ALL
MATERIAL
PPE
ASSET
When the user changes the selected category, the interface updates the information displayed on the screen.
A simplified version of the interaction looks like this:
$("#filterType").on("change", function () {
const type = $(this).val();
filterDashboard(type);
});
This allows the dashboard to change its content without requiring a page reload.
Materials
The materials section organizes inventory by warehouse.
Each warehouse contains information such as:
Warehouse
├── Total Quantity
├── Total Value
└── Items
├── Item Code
├── Item Name
├── Quantity
├── Unit Value
└── Total Value
For example, a simplified data structure could look like this:
const material = {
warehouseCode: "WH01",
warehouseName: "Main Warehouse",
itemCode: "MAT001",
itemName: "Example Material",
quantity: 120,
unitValue: 25.50,
totalValue: 3060
};
The interface uses this information to create the corresponding cards and item details dynamically.
Assets
Assets follow a different grouping strategy.
Instead of warehouses, they are organized by cost center.
For example:
Cost Center 1001
│
├── Asset 001
├── Asset 002
└── Asset 003
This makes it possible to display the number of assets and their values according to the organizational structure represented by the data.
The same rendering concept used for materials can be reused here, while the grouping logic is adapted to the type of information being displayed.
PPE and Uniforms
PPE and uniforms have their own section in the dashboard.
The purpose is to keep these records separated from regular materials while maintaining the same visual language.
This allows the user to switch between different types of inventory without learning a completely different interface.
Search
The dashboard also provides a search field.
A basic implementation can listen for changes in the input:
$("#search").on("input", function () {
const searchTerm = $(this).val().toLowerCase();
filterItems(searchTerm);
});
The search can then be applied to the relevant fields, such as:
Item code
Item name
Warehouse
Cost center
For larger datasets, a debounce can be used to avoid executing the filtering function unnecessarily on every keystroke.
The basic flow becomes:
User types
↓
Wait for input
↓
Search / Filter
↓
Update results
Using Mock Data
Because the original application was connected to internal APIs, the public version needed a different data source.
Instead of exposing the original endpoints, the project uses mock data.
For example:
const materials = [
{
warehouseCode: "WH01",
warehouseName: "Main Warehouse",
itemCode: "MAT001",
itemName: "Example Material",
quantity: 120,
unitValue: 25.50,
totalValue: 3060
},
{
warehouseCode: "WH02",
warehouseName: "Secondary Warehouse",
itemCode: "MAT002",
itemName: "Another Material",
quantity: 75,
unitValue: 18.00,
totalValue: 1350
}
];
The important part is that the UI doesn't need to know whether the information came from a mock file or an API.
The application only needs to receive data in the expected format.
Connecting the Dashboard to an API
This separation makes it possible to replace the mock data with a real API.
The public project follows this concept:
┌─────────────┐
│ Dashboard │
└──────┬──────┘
│
▼
┌─────────────┐
│ JavaScript │
│ + jQuery │
└──────┬──────┘
│
▼
┌─────────────┐
│ Mock Data │
└─────────────┘
With a backend, the last layer can simply be replaced:
┌─────────────┐
│ Dashboard │
└──────┬──────┘
│
▼
┌─────────────┐
│ JavaScript │
│ + jQuery │
└──────┬──────┘
│
▼
┌─────────────┐
│ REST API │
└──────┬──────┘
│
▼
┌─────────────┐
│ Database │
└─────────────┘
This is one of the main reasons for keeping the data layer separated from the interface.
Data Visualization with Chart.js
The dashboard provides a graphical view in addition to the traditional data view.
Chart.js can be used to transform the dataset into charts such as:
Doughnut charts
Bar charts
Ranking charts
A basic Chart.js configuration looks like this:
new Chart(canvas, {
type: "doughnut",
data: {
labels: labels,
datasets: [{
data: values
}]
}
});
The chart receives the same information used by the dashboard.
This means that the data doesn't need to be duplicated just to create a visualization.
Movement History
Another feature of the dashboard is the movement history for materials.
Instead of displaying only the current inventory:
Material: MAT001
Quantity: 120
the user can inspect previous movements.
For example:
Date Type Quantity
09/01/2026 Entry +50
09/05/2026 Exit -10
09/12/2026 Entry +80
09/20/2026 Exit -20
This provides additional context about the current quantity.
The public version uses simulated movement data, but the same structure can be connected to a backend API.
Why jQuery?
One question that naturally comes up is:
Why use jQuery instead of React, Vue, or another frontend framework?
The answer is mostly about project requirements.
This dashboard needs:
DOM manipulation
Event handling
Search
Filtering
Dynamic rendering
API communication
Modal interactions
Chart integration
These requirements can be handled comfortably with jQuery.
Using a framework would certainly be possible, but it would also introduce additional project structure and dependencies that aren't necessary for this particular implementation.
The goal was to keep the application:
Simple → Lightweight → Easy to understand → Easy to deploy
UI and Design
The dashboard uses a clean interface focused on the information itself.
The design uses:
White backgrounds
Green accent colors
Rounded cards
Subtle borders
Clear typography
Responsive layouts
Minimal visual noise
The intention was to avoid the traditional heavy-looking enterprise dashboard and create something closer to a modern productivity application.
The visual hierarchy follows a simple structure:
Header
↓
Filters
↓
Summary
↓
Data
↓
Charts / Details
This helps keep the most important information visible without overwhelming the user.
How the Application Works
The complete flow can be summarized as:
- Load application ↓
- Load data ↓
- Normalize data ↓
- Render dashboard ↓
- User selects a filter ↓
- Filter dataset ↓
- Update interface ↓
- Update charts
For a search operation:
User enters search
↓
Search term is normalized
↓
Dataset is filtered
↓
Matching records are rendered
↓
Dashboard is updated
This keeps the interaction entirely on the client side in the public version.
Benefits and Use Cases
Reusable
The dashboard isn't tied to a specific company or database in its public version.
The data layer can be replaced with another source.
Lightweight
There is no complex frontend build system required.
The project can run as a simple web application.
Scalable
The same structure can be extended with additional categories, filters, charts, or API endpoints.
Easy to Customize
Because the interface is built with HTML, Tailwind CSS and JavaScript, the visual design can be modified without changing the entire application architecture.
API Ready
The mock data layer can be replaced with a REST API when real data becomes available.
What I Learned
This project reinforced an important idea:
A dashboard isn't just about displaying data. It's about making data easier to understand.
Creating a chart is relatively easy.
The more interesting challenge is deciding:
What information should be highlighted?
What should be grouped?
What should be a card?
What should be a table?
What should become a chart?
What does the user actually need to find?
These decisions have a direct impact on the usefulness of the application.
Future Improvements
There are several things that could be added to future versions:
REST API integration
Authentication
Role-based access
Advanced filters
Excel export
PDF reports
Pagination
More detailed analytics
Mobile improvements
Dark mode
The current version intentionally focuses on the frontend and uses mock data.
Running the Project
Clone the repository:
git clone YOUR_REPOSITORY_URL
Enter the project directory:
cd dashboard-ativos-materiais
Then open the project using a local development server.
For example, you can use VS Code with Live Server.
Since the public version uses mock data, no backend configuration is required.
Conclusion
This project started as a practical internal dashboard and evolved into a generic version that can be shared publicly.
The main goal was not to build the most complex dashboard possible.
It was to create a solution that is:
Simple
Visual
Responsive
Easy to understand
Easy to customize
Ready for API integration
The public version is available on GitHub, using mock data instead of the original internal integrations.
If you're interested in dashboards, data visualization, jQuery, Tailwind CSS, or lightweight frontend applications, feel free to explore the project.
GitHub Repository
👉 https://github.com/C0aste/Dashboard-Estoque
If you have suggestions or ideas for improvements, feel free to share them in the comments.
Thanks for reading! 🚀
Top comments (0)