---
title: "Indogrosir Supply Chain System Case Study"
period: "Nov 2023 - Jan 2024"
slug: "indogrosir-scm"
roles:
  - "Fullstack Developer"
stacks:
  - "ASP.NET"
  - "JQuery"
  - "SQL Server"
  - "Tailwind CSS"
links:
  - label: "Docs"
    url: "https://github.com/hibatillah/indogrosir-scm/wiki"
  - label: "Repository"
    url: "https://github.com/hibatillah/indogrosir-scm"
headline: "A unified platform for automated inventory control and brand accessibility"
description: "Replaced manual inventory tracking with an system that automates procurement workflows and delivers a seamless public-facing digital experience."
---

## Bridging Efficiency and Accessibility

Indogrosir is a major wholesale network, but their digital presence had a gap. Their partners (small minimarkets and resellers) struggled with manual inventory tracking, while their public website presented an opportunity to improve the customer experience.

In this project, I act as a Fullstack Developer building a logic-heavy Supply Chain Management system, and as a UI Designer executing a complete visual overhaul of their public identity.

## Manual Supply Chains

Through interviews Indogrosir's partners, we uncovered a critical inefficiency. Partners had to manually count their stock and phone in orders. This analog process led to:

1.  Human Error - Forgot to count stock -> Stockouts -> Lost sales.

2.  Delay - Manual order entry took time on both ends.

## Automated Reorder Points (ROP)

We built a dedicated SCM portal to digitize this workflow. The core innovation was the Automated Draft Order system.

Instead of waiting for a partner to call, the system tracks inventory usage. When stock hits the ROP threshold, the system _automatically generates a draft order_. The partner simply logs in, reviews the draft, and clicks "Confirm."

## System Architecture & Roles

We built the backend using `ASP.NET MVC` with `C#` to ensure robust type safety and structure. The system handles three distinct tiers of access:

- Superadmin - Global oversight of all branches.

- Branch Admin - Manages inventory flow for their specific location.

- Partners - The end-users who view product availability and confirm automated orders.

## Technical Challenge

Standard ASP.NET MVC projects often rely on older styling methods (Bootstrap/raw CSS). I wanted to bring the speed of modern frontend development to this traditional framework.

I successfully integrated `Tailwind CSS` with a custom `Node.js` hot reload configuration.

It allowed me to iterate on the UI instantly without restarting the `.NET` server for every CSS change. This hybrid workflow significantly accelerated our development speed.

## The Public Redesign

Beyond the internal system, I redesigned the public-facing website to improve brand perception.

- Visual Refresh - Replaced cluttered layouts with a clean, responsive design.

- Branch Locator - Integrated the Google Maps API with map markers to help customers find the nearest Indogrosir branch dynamically.

- Product Highlights - A showcase section for current promos, helping convert site visitors into potential partners.

---

This project bridged the gap between _Enterprise Architecture_ and _Modern Frontend Experience._

- Business Logic - I learned how to translate real-world SCM concepts into functional code.

- Framework Integration - Configuring Tailwind and Node.js to play nicely with a `.NET` backend taught me a lot about build tools and asset pipelines.

- User-Centric Design - By interviewing actual partners, we ensured the _Auto-Order_ feature solved their actual pain (forgetting to order) rather than just being a cool tech feature.