Inventory Management
Web dashboard for managing assets and consumable stock with borrowing, approvals, and reporting.
Role
Frontend Engineer
Timeline
2025
Platform
Web
Focus
Asset + Stock Ops
Overview
Built a React.js system to manage two asset types: serialized assets (borrow/return) and consumable stock (usage tracking).
Problem
Manual tracking for borrow/return and stock usage caused delays, missing records, and weak accountability.
Solution
Implemented asset lifecycle workflows, approval flows, and notification-driven requests with role-based access.
Role
Frontend Engineer (React.js)
Timeline
2025
Stack
Requirements
Functional & non-functional
Functional
- Asset vs stock categorization
- Borrowing + return flow for serialized assets
- Stock usage tracking for consumables
- Approval workflow for borrow requests
- Notifications for request + approval
- Master data management
- Authentication and role-based access
Non-functional
- Fast list rendering for large datasets
- Secure access for multi-role users
System Design
Architecture + data flow
Architecture
React dashboard with normalized data layer, role-based access, and modular workflow screens.
Key Decisions
- Access-based UI rendering by role
- Separated asset and stock workflows
Data Flow
- Auth → role scope → module access
- Request → approval → status update
Flow & Data
State flow and data model
Flow Steps
- Auth → role scope → module access
- Request → approval → status update
Data Model
Entities
- Asset
- AssetStock
- BorrowRequest
- Approval
- Location
- Category
- UserRole
Relationships
- Asset belongs to Location
- AssetStock belongs to Category
- BorrowRequest references Asset
- Approval belongs to BorrowRequest
- UserRole defines access scope
Business Logic
Rules that drive decisions
- Borrow requests require approval before checkout
- Stock usage reduces available quantity
- Role determines visible modules and actions
Scope & Constraints
Project boundaries
Scope
- Asset lifecycle management
- Borrowing + return workflow
- Consumable stock tracking
- Approval system + notifications
- Master data management
Constraints
- Legacy data formats
- Multiple stakeholder roles
Your Contribution
What I handled directly
- End-to-end React frontend
- Borrow/return workflow implementation
- Approval + notification UI
- Auth and master data screens
Challenges → Solutions
Key problem solving
Challenge
Borrow/return status accuracy
Solution
Defined explicit status transitions per request.
Challenge
Approval bottlenecks
Solution
Added notifications and quick approval actions.
Challenge
Consumable stock visibility
Solution
Separated stock vs asset modules and clear filters.
Edge Cases
Stability in production
- Duplicate request submissions
- Borrowed assets not returned on time
- Stock quantity updates out of sync
Impact
Results and outcomes
Gallery
Key screens
Key Takeaways
What mattered most
- Web
- Operations
- Dashboard