ShipYard Pro - Container Terminal and Shipping Line Management System

Multi-tenant dashboard for container yards and shipping lines covering gate in and out, bookings, yard allocation, tariffs, invoicing and role-based access, in English and Arabic.

Client

Date

January 2026

Duration

5 weeks

Technologies

14 tools

Technologies Used

Next.js

React

TypeScript

Prisma

PostgreSQL

NextAuth.js

next-intl

Tailwind CSS

ShadCN

Zustand

Zod

TanStack Table

Recharts

Framer Motion

Project Overview

ShipYard Pro is a web system for running a container terminal or the depot side of a shipping line. It replaces an older ASP.NET style interface (the repo keeps the old HTML screens as reference) with a Next.js 16 dashboard. Staff register containers at the gate, manage bookings and allocations, move containers between yard blocks, track container history, and bill storage and service charges. Master data such as agents, customers, vessels, ports, container types, commodities, contractors and equipment is managed in the same app. Everything is scoped to an organization and a branch, so several operators can share one deployment. The interface works in English and Arabic with right-to-left layout.

Challenge

Terminal operations have many linked records. A single container touches a booking, an agent, a gate transaction, a yard cell, a tariff and finally an invoice, and every step needs a clean audit trail. The old system also had a different permission rule for almost every screen. The data model had to hold more than 40 models without turning into a tangle, billing had to follow free days and storage rates correctly, and access had to be controlled per screen and per action. The whole interface also needed to be usable in Arabic as well as English.

Solution

I modeled the domain in Prisma with PostgreSQL: organizations, branches, containers, bookings, allocations, gate transactions, moves, tariffs, invoices, credit notes and EDI messages. The App Router holds one dashboard section per module, with API routes validated by Zod schemas. Storage and service tariffs calculate charges from free days and rates when an invoice is submitted. Access control works through user groups with view, add, edit and delete flags per module and form, enforced on both pages and API routes. NextAuth handles sign-in, next-intl handles English and Arabic, and an audit log records changes. Data tables share one reusable component with filters, column toggles and export.

Results & Impact

The delivered system covers the full container flow from booking to gate in, yard placement, gate out and invoicing, in one dashboard with 50 plus pages. It includes a dashboard with gate activity and yard utilization, a yard view per block, container history, operational and booking reports, a credit note and invoice audit flow, and a role and permission manager. English and Arabic screens are both included, and the repo ships a seed with demo roles plus documentation for permissions, tariffs and testing. No usage figures are claimed here because it has not been measured.