How is this different from the Indonesia livestock dashboard on this site?

The Indonesia dashboard is a provincial monitoring tool built around Indonesian mega-farm operations and spreadsheet-derived financials. AR C3 is a separate repository, started five months later on a newer React, Vite and Tailwind generation, with a dual-region Indonesia and Gulf scope and panels the earlier build has no equivalent of: data freshness, supply-chain chokepoints and a macro stress index.

What does a command-and-control view need that a BI dashboard does not?

Three things. Current state visible without configuration, exceptions surfaced before anyone asks, and a clear next action attached to each one. AR C3 does that with an always-populated map and KPI row, a freshness panel sorted by how stale each site is, and risk and rebalancing panels where every item carries a priority and a typed action.

Is the data live or simulated?

Simulated. Shared entities such as farms, suppliers, warehouses, demand points, price points, a risk matrix and scenarios live in one typed module, and individual panels carry their own fixture arrays. That is deliberate for a demonstrator. Components consume TypeScript interfaces rather than a fetch layer, so swapping in real feeds is an integration job, not a rewrite.

Is it open source, and can I see it running?

The repository is private. The build is deployed publicly at ar-c3.vercel.app, so you can click through all three views, toggle map layers, open any panel full screen and drive the forecast sliders yourself. If you want a walkthrough of the code structure I can screen-share it.

What does it cost to run?

Very little as built. It is a static Vite bundle with no backend, no database and no API keys of any kind, deployed on Vercel and drawing its basemap from CARTO's public tile service. Cost only enters the picture when you connect real telemetry, weather, pricing and market feeds, and that cost is driven by those providers rather than by the app.

Can this work with my existing stack?

Yes. The data module is the seam. Anything that can produce the Farm, Supplier, Warehouse, DemandPoint, PricePoint and RiskCell shapes will drive the UI, whether that is a Postgres warehouse, an IoT ingestion pipeline or an existing ERP export. The front end has no assumptions about where the rows come from.

How does it handle farms that stop reporting?

It treats silence as a signal. Health has a fourth state, labelled unmonitored, that is visually distinct from healthy on both the map legend and the health grid. The Data Freshness panel tracks last report time, data completeness percentage, which metric groups are still arriving and signal strength per site, then sorts the whole list by staleness so the darkest sites sit at the top.

AR C3 — Livestock Supply-Chain Command & Control Center — Case Study

Verify it yourself

AR C3 live demo — Deployed build. All three views, map layers and forecast sliders are interactive.

Introduction

AR C3 stands for Alia Risk Command & Control Center. It is the screen a livestock trading operation looks at when it wants to know what is wrong right now, not what happened last quarter. I built it as a ground-up React front end in a new repository, five months after an earlier Indonesia-only livestock dashboard, with triage rather than reporting as the design target.

The Challenge

A livestock supply chain fails in ways a BI tool does not describe well. A disease cluster, a flooded corridor, an expiring halal certificate and a currency move are different data sources with different refresh rates, and any one of them can strand animals. A query-first tool only answers once you already know which question to ask. I wanted the opposite: a screen that shows what changed, which of the changes matter, and what to do about each one, before anyone has formed a query. It also had to be honest about gaps, because remote sites drop off the network for hours or days at a time and silence is not the same as health.

The Solution

I built AR C3 as three views hanging off a single shell. Command Center is the live picture: hero KPIs, a dual-region map, then supply-side, demand-side and integrated sections. Meating Point is the downstream commercial view of warehouses, pricing, margin and shipments. Forecasting is the what-if surface. Underneath them sits a typed domain module defining Farm, Supplier, Warehouse, DemandPoint, PricePoint, RiskCell and AIScenario, with the shared entity fixtures kept in one place, so components read a contract rather than a feed. Every panel on the page is wrapped in the same expandable card, giving a dense overview grid and a full-detail modal from a single component.

Technical Deep Dive

Health is a four-value enum, not a boolean. Red, amber and green mean what you expect, and white is labelled unmonitored. That fourth state is the reason the Data Freshness panel exists: it tracks last report time, minutes since, data completeness percentage, which metric groups are still arriving and signal strength per site, and it sorts by staleness rather than by name. A site at zero percent completeness surfaces at the top instead of quietly rendering as fine.

The map is react-leaflet over CARTO dark tiles with five independently toggleable layers: farms, suppliers, trade routes, demand points and warehouses. Trade routes are not stored. Each supplier is joined to its two nearest same-region farms using a cheap planar distance sort, and each route is drawn as an arc sampled at twenty steps with a sine bulge so overlapping corridors stay visually separable. Suppliers and warehouses use SVG divIcons coloured by health, and critical farms get a CSS keyframe glow so they read at a glance on a wall display.

The forecast simulator is deterministic, not a black box. Eight sliders (supply growth, mortality, price volatility, demand multiplier, lead time, safety stock, feed cost, currency effect) feed a single generator that produces 18 monthly points. Seasonality comes from a sine term plus Ramadan and Eid season multipliers keyed to the month of year, with the Ramadan, Eid al-Adha and Hajj windows labelled directly on the chart. Confidence bands are computed from price volatility and widened by a time-decay factor, so the fan gets visibly less trustworthy the further out you look.

Because the whole forecast recomputes inside useMemo, moving one slider updates the chart, the deficit and utilisation metrics, the break-even month, the sensitivity table and the recommendation list together. There is no apply button and no partially stale panel, which is the failure mode that makes most scenario tools untrustworthy.

Every AI-flavoured panel is shaped to end in an action. The risk predictor carries probability, direction, horizon and a confidence figure per category, and each warning signal has a required action field alongside its description. The supply balancer emits typed actions (reroute, accelerate, hedge, defer, stockpile, substitute) each with a priority, a confidence figure and a status of pending, executing or completed. Alongside them, a filterable Action Log records what was done and by whom, mixing named human actors with system services, each entry carrying its impact and the entity it touched.

ExpandablePanel is one component doing two jobs: a compact card in the grid and a portal-rendered modal at up to 1400px with a sticky header, escape-to-close, backdrop click handling and a body scroll lock. Panels pass a max-height wrapper in the grid and get the full render in the modal, so I never wrote a second cramped version of any chart.

Region scoping lives in the header as an all/Indonesia/GCC toggle and flows down as a single string. Filtered farms, the red/amber/green/white counts on the map legend and the alert badge are all derived with useMemo from that one filter rather than being stored, so there is no way for the counts and the map to disagree.

Key Features

Dual-region operating picture

One Leaflet canvas carrying 30 farms across Indonesia, Pakistan, Uganda, Yemen and Syria, plus 15 suppliers, 15 demand points and 8 warehouses reaching into Singapore and the Gulf, 21 AAAID member-country markers for context, and a per-farm drill-down panel showing mortality, feed and vaccine days remaining, water and power status, staffing and last vet check.

Exceptions that surface themselves

Alerts, disease outbreak monitoring, supply-chain chokepoint status and a macro stress index that composites seven pressure signals into one score all render without a query. The Data Freshness panel makes missing telemetry a first-class signal rather than an absence.

Scenario simulator with honest uncertainty

Four presets (baseline, Eid surge, supply crisis, disease outbreak) plus eight free sliders drive an 18-month supply and demand forecast with 50 and 90 percent confidence bands that widen over the horizon, a sensitivity table and priority-ranked recommendations.

Action-shaped recommendations

Rebalancing suggestions are typed by verb (reroute, accelerate, hedge, defer, stockpile, substitute) and carry a priority, a confidence score and an execution status. A separate Action Log, filterable across six categories, records who or what acted, the impact and the entity involved.

Commercial and compliance layers

Price monitoring by country, region and outlet, currency tracking, cost and margin analysis, competitor intelligence, shipment tracking, halal certification status and an ESG panel, so the trading view and the risk view live on the same screen.

Expand-in-place density

Every panel is a compact card that opens into a full-screen modal from the same component, keeping the overview scannable on a large display while allowing full-resolution investigation without navigating away.

Results & Impact

✓Three complete views shipped and deployed to Vercel: Command Center, Meating Point and Forecasting, all sharing one region filter and one typed data contract.
✓The map, the layer legend, the farm health grid and the alert badge all derive from the same filtered farm array with useMemo, so those counts cannot drift apart. The risk heatmap is generated as a full cross product of six categories across eight regions rather than a hand-kept table.
✓The forecast model is fully deterministic and recomputes end to end on every slider change, which makes scenario output reproducible and reviewable rather than opaque.
✓The shared entity data lives in one typed module and the remaining panels carry their own local fixtures. This is a working demonstrator, not a system wired to production feeds, and the interfaces exist precisely so real feeds can replace those modules without component changes.

Lessons Learned

"A command-and-control view and a BI dashboard have different default states. BI defaults to a blank query. C3 has to default to a full, opinionated picture with the exceptions already pulled forward. Once I stopped adding filters and started ranking by staleness and severity, the screen got useful."

"Carrying an unknown health state is only half the job. The earlier Indonesia build used the same four-value enum but had nothing that acted on it. Adding a freshness panel that sorts sites by how long they have been silent is what turned that fourth state from a legend colour into something an operator can work from."

"Scenario tools lose trust the moment one panel updates and another does not. Deriving everything from one memoised generator, and refusing to store anything the filter could invalidate, was worth more than any extra visualisation."

"Recommendations only earn their place if they name an action. A risk score with no next step is just a colour. Adding a required action field to the warning signal type forced every predictive panel to end somewhere a person could act."

Conclusion

AR C3 is what the Indonesia livestock dashboard taught me to build next: less reporting surface, more triage. The interesting engineering was not the charts, it was deciding what the screen owes an operator who has thirty seconds and a bad morning.

Frequently asked questions

How is this different from the Indonesia livestock dashboard on this site?: The Indonesia dashboard is a provincial monitoring tool built around Indonesian mega-farm operations and spreadsheet-derived financials. AR C3 is a separate repository, started five months later on a newer React, Vite and Tailwind generation, with a dual-region Indonesia and Gulf scope and panels the earlier build has no equivalent of: data freshness, supply-chain chokepoints and a macro stress index.
What does a command-and-control view need that a BI dashboard does not?: Three things. Current state visible without configuration, exceptions surfaced before anyone asks, and a clear next action attached to each one. AR C3 does that with an always-populated map and KPI row, a freshness panel sorted by how stale each site is, and risk and rebalancing panels where every item carries a priority and a typed action.
Is the data live or simulated?: Simulated. Shared entities such as farms, suppliers, warehouses, demand points, price points, a risk matrix and scenarios live in one typed module, and individual panels carry their own fixture arrays. That is deliberate for a demonstrator. Components consume TypeScript interfaces rather than a fetch layer, so swapping in real feeds is an integration job, not a rewrite.
Is it open source, and can I see it running?: The repository is private. The build is deployed publicly at ar-c3.vercel.app, so you can click through all three views, toggle map layers, open any panel full screen and drive the forecast sliders yourself. If you want a walkthrough of the code structure I can screen-share it.
What does it cost to run?: Very little as built. It is a static Vite bundle with no backend, no database and no API keys of any kind, deployed on Vercel and drawing its basemap from CARTO's public tile service. Cost only enters the picture when you connect real telemetry, weather, pricing and market feeds, and that cost is driven by those providers rather than by the app.
Can this work with my existing stack?: Yes. The data module is the seam. Anything that can produce the Farm, Supplier, Warehouse, DemandPoint, PricePoint and RiskCell shapes will drive the UI, whether that is a Postgres warehouse, an IoT ingestion pipeline or an existing ERP export. The front end has no assumptions about where the rows come from.
How does it handle farms that stop reporting?: It treats silence as a signal. Health has a fourth state, labelled unmonitored, that is visually distinct from healthy on both the map legend and the health grid. The Data Freshness panel tracks last report time, data completeness percentage, which metric groups are still arriving and signal strength per site, then sorts the whole list by staleness so the darkest sites sit at the top.

AR C3 — Livestock Supply-Chain Command & Control Center