AS/400 Modernization in Logistics: Mapping Undocumented Freight Routing Logic to React Components

The $3.6 trillion global technical debt isn't just a number on a balance sheet; in the logistics industry, it’s a physical bottleneck. Your freight routing logic isn’t documented in a Confluence page or a clean architecture diagram. It’s buried in thousands of lines of undocumented RPG code on an AS/400 (IBM i) system, accessible only through a "green screen" terminal that hasn't changed since 1994. When your lead developer retires, that logic—the very competitive advantage of your routing efficiency—effectively disappears.

Traditional 400 modernization logistics initiatives fail because they attempt to treat the problem as a translation exercise. They try to rewrite 30 years of edge cases from scratch, leading to the industry-standard 70% failure rate for legacy rewrites. The future of enterprise architecture isn't rewriting; it's understanding. It’s about extracting the "black box" of legacy logic and turning it into a documented, modern codebase without the manual archaeology.

TL;DR: Modernizing AS/400 logistics systems doesn't require a 2-year "big bang" rewrite; visual reverse engineering via Replay maps undocumented freight routing logic to React components in weeks, reducing modernization timelines by 70%.

The High Cost of Manual Archaeology in 400 Modernization Logistics#

For most logistics firms, the AS/400 is the "System of Record" for everything from LTL (Less-Than-Truckload) optimization to fuel surcharge calculations. However, 67% of these legacy systems lack any form of up-to-date documentation. When a VP of Engineering decides to modernize, they typically face an 18-24 month timeline.

The first six months are usually spent in "discovery"—a polite term for developers staring at 5250 terminal emulators trying to figure out what happens when a dispatcher hits

on a routing screen. This manual archaeology is the primary reason why 400 modernization logistics projects exceed their budgets.

The manual approach costs roughly 40 hours per screen to document, design, and develop in a modern framework like React. With Replay, that timeline drops to 4 hours per screen. We move from "guessing the logic" to "recording the truth."

The Modernization Matrix: Comparing Approaches#

Mapping Undocumented Freight Routing Logic#

In logistics, the "logic" is often a series of undocumented business rules: If the carrier is X, and the weight is Y, but the destination is a residential zone Z, apply surcharge A unless contract B is active.

On an AS/400, this is often handled by unmapped subfiles and indicator variables. Attempting to map this by reading the source code is a recipe for disaster. Instead, Replay uses Visual Reverse Engineering. By recording a real user workflow—a dispatcher actually routing a shipment—Replay captures the state changes, data inputs, and UI transitions.

How Replay Transforms Green Screens into React#

Replay doesn't just take a screenshot. It records the underlying data flows and generates a Blueprint. This Blueprint acts as the bridge between the legacy terminal and a modern React component.

1. •Recording: A subject matter expert (SME) performs a standard freight routing task.
2. •Extraction: Replay identifies the data fields (e.g., Pro Number, Origin ZIP, Carrier Code) and the logic triggers.
3. •Generation: The platform generates a documented React component, an API contract, and E2E tests.

💡 Pro Tip: Don't try to refactor the logic during extraction. Use Replay to create a "Functional Twin" first. Once the logic is documented and running in React, you can optimize the business rules without the fear of breaking the core system.

From Subfiles to React: A Code-Level View#

When we talk about 400 modernization logistics, we are specifically looking to move away from fixed-position terminal screens toward responsive, type-safe web components. Below is an example of what Replay generates after analyzing a freight routing workflow.

typescript
// Example: Generated React Component from AS/400 Routing Screen
// Source: FRTR001C - Freight Routing Terminal
// Generated by Replay AI Automation Suite

import React, { useState, useEffect } from 'react';
import { RoutingHeader, CarrierTable, SurchargeCalculator } from './design-system';

interface FreightRoutingProps {
  proNumber: string;
  onRouteComplete: (data: RouteData) => void;
}

export const FreightRoutingManager: React.FC<FreightRoutingProps> = ({ proNumber, onRouteComplete }) => {
  const [routeState, setRouteState] = useState<RouteState>('loading');
  const [routingData, setRoutingData] = useState<any>(null);

  // Replay preserved the legacy logic: "If Origin ZIP starts with 9, use West Coast Hub"
  const calculateHub = (zip: string) => {
    return zip.startsWith('9') ? 'HUB-SEA' : 'HUB-CHI';
  };

  return (
    <div className="p-6 bg-slate-50 rounded-lg shadow-md">
      <RoutingHeader 
        proNumber={proNumber} 
        status={routingData?.status} 
      />
      
      <div className="grid grid-cols-2 gap-4 mt-4">
        <CarrierTable 
          carriers={routingData?.availableCarriers} 
          selectedHub={calculateHub(routingData?.originZip)}
        />
        <SurchargeCalculator 
          baseRate={routingData?.baseRate}
          accessorials={routingData?.accessorials}
        />
      </div>
      
      <button 
        onClick={() => onRouteComplete(routingData)}
        className="mt-6 bg-blue-600 text-white px-4 py-2 rounded"
      >
        Confirm Freight Route (F3 Equivalent)
      </button>
    </div>
  );
};

⚠️ Warning: Most modernization tools only "scrape" the UI. Replay captures the Flows, ensuring that hidden business logic (like the

text

calculateHub

logic above) is extracted and preserved in the new TypeScript architecture.

The Replay Workflow: A 3-Step Modernization Guide#

For a CTO overseeing 400 modernization logistics, the goal is to de-risk the project. Replay achieves this through a structured, automated pipeline.

Step 1: Visual Recording & Flow Capture#

Instead of interviewing retired RPG programmers, your team records the current dispatching process. Replay’s engine watches the screen transitions. If a user enters a weight over 10,000 lbs and the screen jumps to a "Heavy Haul" sub-menu, Replay flags this as a conditional branch in the architecture.

Step 2: Blueprint Generation & Technical Audit#

Replay generates a Technical Debt Audit. It identifies which parts of the legacy screen are actually used. In many logistics systems, 40% of the fields on an AS/400 screen are "ghost fields" that no longer serve a purpose. Replay filters these out, creating a clean API contract.

json
// Generated API Contract for Freight Routing
{
  "endpoint": "/api/v1/logistics/route",
  "method": "POST",
  "parameters": {
    "pro_number": "string (Required)",
    "origin_zip": "string (Length: 5)",
    "weight_lbs": "integer",
    "service_level": "enum [LTL, TL, EXPEDITED]"
  },
  "legacy_mapping": {
    "pro_number": "SCR_FLD_001",
    "origin_zip": "SCR_FLD_042"
  }
}

Step 3: Component Export to the Library#

The final step is exporting the extracted logic into your Design System. Replay’s Library feature ensures that every modernized screen follows your corporate UI/UX standards, even though the logic was born in a 1980s mainframe environment.

Overcoming the "Black Box" Problem in Logistics#

The biggest fear in 400 modernization logistics is the "Black Box" syndrome. You know data goes in and a routing manifest comes out, but no one knows exactly how the fuel surcharge was calculated on a Tuesday for a shipment to Manitoba.

Replay turns that black box into a documented codebase. By using video as the source of truth for reverse engineering, we eliminate the "he-said-she-said" of requirements gathering. The video doesn't lie. The user interaction is the ultimate documentation.

💰 ROI Insight: A Tier-1 Logistics provider recently used Replay to modernize their terminal operations. They reduced their "Discovery and Mapping" phase from 9 months to 3 weeks, saving an estimated $1.2M in developer hours and avoiding the standard 18-month rewrite delay.

Built for Regulated and High-Security Logistics#

Logistics and supply chain data are often subject to strict regulatory oversight, especially when dealing with government contracts or healthcare shipments. Replay is built for these environments:

• •SOC2 & HIPAA Ready: Your data and workflows are handled with enterprise-grade security.
• •On-Premise Availability: For firms that cannot allow their legacy data to leave their internal network, Replay offers on-premise deployment.
• •Audit Trails: Every extracted component is linked back to the original recording, providing a 1:1 audit trail of why a piece of logic exists.

Frequently Asked Questions#

How does Replay handle complex AS/400 subfiles?#

Replay’s Visual Reverse Engineering engine is designed to recognize patterns in terminal emulators. It identifies subfile structures (lists/tables) by observing how the user scrolls and selects line items. It then maps these to modern React table components with full pagination and sorting capabilities.

Can we use Replay if we don't have the original RPG source code?#

Yes. That is the core advantage of Replay. Because we use Visual Reverse Engineering, we don't need to read the underlying RPG or COBOL code. We observe the system's behavior and data outputs to reconstruct the logic. This is critical for systems where the source code has been lost or is too convoluted to parse manually.

What is the typical timeline for a 400 modernization logistics project?#

While a "Big Bang" rewrite takes 18-24 months, a Replay-driven modernization typically takes 2 to 8 weeks for the initial extraction and component generation. The total time to production depends on your internal QA and deployment cycles, but the "heavy lifting" of reverse engineering is reduced by 70-80%.

Does Replay generate backend code or just frontend?#

Replay generates the React components (Frontend), API Contracts (the bridge), and Documentation. It also provides a technical debt audit that helps your backend team build the necessary microservices to replace the legacy logic, ensuring the "Strangler Fig" pattern can be implemented effectively.

How does this compare to screen scraping?#

Screen scraping merely puts a "web skin" over an old terminal; you are still running the legacy system underneath. Replay extracts the logic and UI into a standalone modern codebase. Once you have used Replay to move your logic to React and modern APIs, you can eventually turn off the AS/400 entirely.

---

Ready to modernize without rewriting? Book a pilot with Replay - see your legacy screen extracted live during the call.