1/6






VIMS - Vessel Inventory Management System
Dec 2024 - June 2025TSP Marine - IT Division
Vessel-oriented inventory management system on the Next.js App Router — modules for items, departments, transfers, requests, and report generation for TSP Marine Industries.
NextJSReactJSInventoryJavaScriptHTMLCSSSupabaseShadcn UITailwind CSS
- Framework: Next.js 15 with React 18 and TypeScript, bundled via Turbopack for development
- Styling: Tailwind CSS with custom color tokens and tailwindcss-animate plugin
- UI Components: Radix UI and ShadCN UI primitives
- State/Data: Supabase client and server helpers for authentication and database access
- ORM & DB tooling: Drizzle ORM with migration configs for PostgreSQL
- Utilities: Chart.js for dashboards, ExcelJS and xlsx for export, and various helper libraries for file handling and alerts
VIMS (Vessel Inventory Management System) centralizes tracking of marine vessel stock. Administrators can manage item catalogs, monitor per-vessel quantities, log adjustments or transfers, and export reports to common formats. The application integrates Supabase for authentication and data persistence while providing a modern, responsive UI.
src/
├─ app/ # Next.js routes: admin dashboards, auth pages, user views
├─ components/ # Reusable UI parts (header, footer, form controls)
├─ context/ # React context for session/auth state
├─ db/ # Drizzle schema and Supabase migrations
├─ lib/ # Helper modules: inventory, transfers, exports, auth
└─ utils/ # General utilities
- Admin Inventory: Group items by vessel, filter low stock, and paginate results.
- Adjustments & Transfers: Helpers and pages to move stock between vessels or record consumption.
- Reports & Exports: Generate Excel/PDF summaries through dedicated helper functions.
- Authentication: Supabase sessions with client/server helpers and persistent cookies.