Skip to content

Repository files navigation

ImportTrace360

ImportTrace360 is a front-end prototype for exploring the lifecycle of vehicles imported from Japan to the United Kingdom. It brings mock provenance events, compliance indicators, shipment stages, document-processing simulations, and explainable risk scores into one responsive dashboard.

Prototype disclaimer: This repository uses fictional, locally bundled data. It has no database, external API, real OCR, regulatory integration, document storage, or production authentication. Do not use it to make compliance, insurance, customs, or purchasing decisions.

Highlights

  • Importer and vehicle-owner dashboard views
  • Fleet metrics, status distribution, and reporting screens
  • Per-vehicle provenance timelines from auction through registration
  • Explainable, rule-weighted demo risk scores
  • Simulated document extraction workflow
  • Client-side demo authentication and persona switching
  • Responsive Next.js interface styled with Tailwind CSS

Demo routes

Route Purpose
/login Local demo sign-in
/ Fleet dashboard or owner wallet
/vehicles/[id] Vehicle details and provenance timeline
/upload Simulated document-processing flow
/reports Illustrative inventory, compliance, risk, and shipment reports

Use admin / password to access the demo. These credentials are hard-coded for local demonstration only and are not a security mechanism.

Technology

  • Next.js 14 with the App Router
  • React 18 and TypeScript
  • Tailwind CSS
  • Zustand for client-side state
  • Recharts for dashboard visualisations
  • Framer Motion for timeline animation
  • Lucide React for icons

Getting started

Prerequisites

  • Node.js 18.17 or newer
  • npm 9 or newer

Install and run

git clone https://github.com/muhammadzain-byte/ImportTrace360.git
cd ImportTrace360
npm ci
npm run dev

Open http://localhost:3000, then sign in with the demo credentials above.

Production build

npm run lint
npm run typecheck
npm run build
npm start

Project structure

app/                 Next.js routes and global styles
components/          Dashboard, navigation, charts, tables, and timeline UI
docs/                Implemented scope and prototype limitations
src/lib/mockData.ts  Fictional vehicles, events, documents, and shipments
src/store/           Local authentication and persona state

Data and security boundaries

  • All vehicle records, VINs, organisations, events, and scores are demo fixtures.
  • Selecting a document only starts a timer-driven UI simulation. The browser does not read or upload the file contents.
  • Authentication is client-side state persisted in browser storage.
  • Search, notification, settings, quick actions, and document links are illustrative.
  • Historical charts contain representative values rather than measured operational data.
  • No environment variables are required.

See docs/PROJECT_SCOPE.md for a detailed implemented-versus-out-of-scope summary.

About

A modern Next.js dashboard for exploring vehicle import provenance, compliance workflows, reports, and traceability data.

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages