The Landed Cost Admin Dashboard is an internal administration system for structured trade data, role-aware workflows, landed-cost history, and auditable changes. I built the full-stack dashboard for a client around the people who maintain reference data and inspect historical records.
The Brief
The product needed one controlled interface for HS documents, companies, countries, users, and historical landed-cost records. Different responsibilities required different actions, and changes to operational reference data needed to remain visible after they were made.
The goal was not another read-only analytics page. It was software for administering records: searchable tables, validated forms, detail views, permissions, and a clear history of tracked changes.
What I Built
- Authenticated create, read, update, and delete workflows for the supported data domains.
- Role-aware navigation and actions for administrators, editors, and viewers.
- Searchable, filterable tables for trade reference data and historical records.
- Detail drawers that keep record context available without forcing a separate page transition.
- User administration and password set/reset flows.
- Shared form and schema validation across browser and server boundaries.
- Field-level audit records for tracked create, update, and delete operations.
- Summary and historical-data views using reusable dashboard components.
Permission and Audit Model
The application separated administrative, editing, and read-only responsibilities. Authorization checks were enforced through server-side session and middleware behavior rather than relying only on whether a button was visible.
For tracked changes, the audit surface recorded the affected record, action, fields, previous and new values, actor, and time. This gave operators a field-level history they could inspect when a record changed.
Data Surfaces
HS documents
Administrators and editors can manage the reference material used by the surrounding trade workflow, with validated fields and record-level detail views.
Companies and countries
The dashboard provides consistent forms and searchable tables for trading-party and country reference data.
Landed-cost history
Historical records are presented as a searchable, filterable read-only surface. This case study describes the administration and history interface; it does not claim ownership of a separate calculation engine.
The detail drawer keeps breakdown and record context visible without taking the operator away from the history list.
Architecture
- Application: Next.js with React and Tailwind CSS, using Shadcn/UI primitives for reusable dashboard surfaces.
- Data access: Next.js server routes with SWR for client-side fetching and cache updates.
- Identity and authorization: Auth.js sessions with middleware and server-side role checks.
- Database: MongoDB Atlas with Mongoose schemas and application-level validation.
- Forms: React Hook Form and Zod for consistent browser and server validation.
- Visualization: Recharts for summary and historical views.
Decisions That Mattered
Make historical records read-only
Operational reference data and historical calculation records serve different jobs. Keeping the latter read-only in the dashboard reduced accidental changes to history while still making it searchable.
Keep detail in context
Drawers allowed operators to inspect a record and its breakdown without losing their current filters or position in a table.
Make permissions legible
Roles affect both what a person can see and what they can change. Aligning navigation, controls, server checks, and audit history made those boundaries easier to understand in daily use.
Delivered Scope
The delivered dashboard covered the data-management, user, role, validation, detail-view, historical-record, and audit workflows described above. The project reinforced that internal software earns trust by making state, permissions, and change history clear to the people operating it.
