Skip to content

Sdk showcase UI improvements#175

Open
dodeja wants to merge 2 commits intomainfrom
sdk-showcase-ui-improvements
Open

Sdk showcase UI improvements#175
dodeja wants to merge 2 commits intomainfrom
sdk-showcase-ui-improvements

Conversation

@dodeja
Copy link
Contributor

@dodeja dodeja commented Feb 5, 2026

Greptile Overview

Greptile Summary

This PR adds a complete SDK showcase Next.js application that demonstrates all Terminal49 TypeScript SDK capabilities through a comprehensive web interface.

Key Changes:

  • New SDK Showcase App: Complete Next.js 14 application with App Router architecture showcasing 20+ SDK methods across shipments, containers, tracking requests, and shipping lines
  • UI Components: Clean component library with cards, buttons, status badges, and a collapsible code panel that displays SDK usage examples on every page
  • API Routes: Server-side API routes for tracking request creation, shipment stop/resume, and container refresh operations
  • Dashboard: Overview page with metrics, status distribution charts, and LFD alerts for containers approaching Last Free Day
  • Tracking Request Flow: Multi-step wizard demonstrating intelligent carrier auto-detection using inferNumber() and createFromInfer() SDK methods
  • Container Views: Detailed pages for containers including overview, events timeline, route visualization, and demurrage/LFD tracking
  • Documentation: Comprehensive PLAN.md with implementation details, SDK_IMPROVEMENTS.md tracking enhancement opportunities, and README with setup instructions

Architecture Highlights:

  • Uses React Server Components for efficient server-side data fetching
  • Singleton SDK client pattern with proper error handling for missing API tokens
  • Custom Vercel build configuration to compile local TypeScript SDK before deployment
  • Tailwind CSS with Kumo semantic tokens for consistent theming
  • All pages include SDK code examples showing exact method calls

Purpose:

This showcase serves as both a developer reference for SDK integration and a demonstration of real container tracking business workflows including demurrage management, tracking lifecycle control, and global search functionality.

Confidence Score: 5/5

  • This PR is safe to merge - it's a complete new feature addition with no modifications to existing API code
  • High confidence based on: (1) isolated new application in sdk-showcase/ directory with no impact on existing API code, (2) well-structured Next.js implementation following best practices with proper error handling, (3) comprehensive documentation including implementation plan and improvement tracking, (4) clean separation of concerns with API routes, components, and utilities, (5) proper TypeScript configuration and type safety throughout
  • No files require special attention - all implementations follow standard patterns

Important Files Changed

Filename Overview
sdk-showcase/package.json Added new dependencies for SDK showcase including Next.js, React, TanStack Query, and Shiki
sdk-showcase/vercel.json Custom build commands to compile local TypeScript SDK before building showcase app
sdk-showcase/src/lib/terminal49/client.ts Singleton SDK client with proper error handling for missing API token
sdk-showcase/src/app/page.tsx Dashboard page with metrics, status distribution, and LFD alerts using SDK methods
sdk-showcase/src/app/api/tracking-requests/create/route.ts API route for creating tracking requests with inference support
sdk-showcase/PLAN.md Comprehensive implementation plan document with SDK method coverage and UI designs
sdk-showcase/README.md Project README with setup instructions and SDK method reference table

Sequence Diagram

sequenceDiagram
    participant User
    participant Browser
    participant NextJS as Next.js App
    participant APIRoute as API Routes
    participant SDK as Terminal49 SDK
    participant T49API as Terminal49 API

    Note over User,T49API: Tracking Request Creation Flow

    User->>Browser: Enter tracking number
    Browser->>NextJS: Navigate to /tracking-requests/new
    NextJS->>Browser: Render tracking form

    User->>Browser: Click "Detect & Continue"
    Browser->>APIRoute: POST /api/tracking-requests/infer
    APIRoute->>SDK: trackingRequests.inferNumber(number)
    SDK->>T49API: POST /tracking_requests/infer
    T49API-->>SDK: { number_type, decision, candidates }
    SDK-->>APIRoute: Inference result
    APIRoute-->>Browser: Inference data

    Browser->>User: Display auto-detected carrier or selection

    alt Auto-selected carrier
        User->>Browser: Click "Create Tracking"
        Browser->>APIRoute: POST /api/tracking-requests/create
        APIRoute->>SDK: trackingRequests.createFromInfer(number, { scac })
    else Manual selection
        User->>Browser: Select carrier from dropdown
        User->>Browser: Click "Create Tracking"
        Browser->>APIRoute: POST /api/tracking-requests/create
        APIRoute->>SDK: trackingRequests.createFromInfer(number, { scac })
    end

    SDK->>T49API: POST /tracking_requests
    T49API-->>SDK: { trackingRequest, shipment }
    SDK-->>APIRoute: Creation result
    APIRoute-->>Browser: Success response
    Browser->>User: Display success + shipment link

    Note over User,T49API: Container Details View

    User->>Browser: Navigate to /containers/[id]
    Browser->>NextJS: Request container page
    NextJS->>SDK: containers.get(id, ['shipment'])
    NextJS->>SDK: containers.events(id)
    
    par Parallel API Calls
        SDK->>T49API: GET /containers/:id
        T49API-->>SDK: Container data
    and
        SDK->>T49API: GET /containers/:id/transport_events
        T49API-->>SDK: Events timeline
    end

    SDK-->>NextJS: Container + Events
    NextJS->>Browser: Render container detail page
    Browser->>User: Display container info & events

    Note over User,T49API: Refresh Container Action

    User->>Browser: Click "Refresh" button
    Browser->>APIRoute: POST /api/containers/[id]/refresh
    APIRoute->>SDK: containers.refresh(id)
    SDK->>T49API: POST /containers/:id/refresh
    T49API-->>SDK: Refresh triggered
    SDK-->>APIRoute: Success
    APIRoute-->>Browser: Success response
    Browser->>NextJS: router.refresh()
    NextJS->>SDK: containers.get(id)
    SDK->>T49API: GET /containers/:id
    T49API-->>SDK: Updated container data
    SDK-->>NextJS: Fresh data
    NextJS->>Browser: Re-render with updates
    Browser->>User: Display updated container
Loading

dodeja and others added 2 commits February 5, 2026 08:07
This creates a comprehensive Next.js application that demonstrates all
Terminal49 TypeScript SDK capabilities while serving as a developer
reference.

Features:
- Dashboard with shipment/container metrics and LFD alerts
- Tracking request management with smart carrier inference
- Shipment list and detail views with stop/resume tracking
- Container management with events, route, and demurrage views
- Shipping lines browser and webhook documentation
- Global search functionality

UI improvements:
- Clean, minimal light theme as default
- Dark mode toggle with localStorage persistence
- Tighter spacing throughout all components
- Smaller, more refined typography
- Professional color palette with semantic tokens

SDK methods covered:
- shipments: list, get, update, stopTracking, resumeTracking
- containers: list, get, events, rawEvents, route, refresh
- trackingRequests: list, get, create, update, inferNumber, createFromInfer
- shippingLines: list
- getDemurrage, getRailMilestones, search

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Documents the architecture, SDK method coverage, visual design mockups,
implementation phases, and future improvement opportunities for the
SDK showcase application.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@vercel
Copy link

vercel bot commented Feb 5, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
api Ready Ready Preview, Comment Feb 5, 2026 4:08pm

Request Review

Copy link

@chatgpt-codex-connector chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: c55d39fdb5

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment on lines +85 to +87
const shippingLine = data.shipping_line || data.shippingLine;
const decision = shippingLine?.decision || data.decision;
const selected = shippingLine?.selected || data.selected;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Badge Read infer fields from JSON:API attributes

handleInfer treats the infer API response as if shipping_line, decision, and selected were top-level fields, but the SDK infer endpoint returns a JSON:API document (data.attributes.*, see Terminal49Client.inferTrackingNumber and generated schema for /tracking_requests/infer_number). In this path selectedScac never gets populated for auto-selected carriers, so Create Tracking Request stays disabled and the primary tracking flow cannot proceed.

Useful? React with 👍 / 👎.

View Shipment →
</Button>
)}
{createResult.trackingRequest?.id && (

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Read created tracking request id from JSON:API payload

The success view checks createResult.trackingRequest?.id, but the create route passes through the SDK create response in JSON:API shape (trackingRequest.data.id), so this condition is false even after successful creation. As a result, users do not get the "View Request" link after creating a tracking request, which breaks the post-create navigation path.

Useful? React with 👍 / 👎.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant