Remix

Make your own version of PortPilot AI

Edit the prompt below and generate a customized version in seconds.

Original by hema

Describe your app

Build a complete working SaaS web app called PORTPILOT AI.

Do not build only an HTML landing page. Build a functional responsive application for freight-forwarding teams.

Purpose:
PortPilot AI organizes container documents, reconstructs shipment timelines, finds missing or conflicting evidence, estimates possible demurrage/detention exposure using user-entered rules, and generates a reviewable report.

Target user:
Import operations coordinators at mid-sized freight-forwarding companies.

Tech stack:
Next.js, TypeScript, Tailwind CSS, Supabase Auth/Database/Storage, Claude API, Zod, Recharts, Lucide icons, PapaParse, jsPDF.

Required pages:
- Landing page
- Login/signup/password reset
- Dashboard
- Container cases
- New case
- Case detail
- Documents
- Timeline
- Evidence gaps
- Reports
- Team
- Settings

Required features:
- Login and protected routes
- Demo mode without API keys
- Create and manage container cases
- Team roles: owner, admin, member, viewer
- Assign case owner
- Comments and activity log
- Upload PDF, TXT, CSV, and DOCX if possible
- Extract shipment events with Claude
- Link every event to its source document and quote
- Display chronological timeline
- Detect missing evidence:
  discharge, customs release, delivery order, appointment, gate-out, empty return, invoice
- Detect conflicting dates
- Allow users to edit and verify events
- Calculate:
  days used
  possible excess days
  estimated exposure
- Clearly show assumptions and “Requires human review”
- Generate editable PDF/CSV case reports
- Generate editable carrier escalation email
- Add loading, empty, success, retry, and error states

AI rules:
- Use only uploaded document text
- Do not invent facts
- Return valid JSON
- Include event type, timestamp, source quote, confidence, and needs_review
- Validate output with Zod
- Use demo fallback if Claude API is unavailable

Database tables:
profiles, workspaces, workspace_members, container_cases, documents, shipment_events, evidence_items, calculations, comments, activity_logs, reports.

Create four fictional demo cases:
1. complete evidence
2. missing gate-out document
3. possible excess days
4. conflicting gate-out dates

Use a professional logistics SaaS design with navy, blue, teal, red, yellow, and green status colors.

Important:
- Do not claim legal responsibility or guaranteed refunds.
- Label results as estimates.
- Do not silently choose between conflicting dates.
- Never send emails automatically.
- Keep private API keys server-side.
- Add Supabase row-level security.
- Use fictional demo data only.

Build in phases:
1. architecture and database
2. auth and demo mode
3. cases and dashboard
4. uploads and AI extraction
5. timeline and evidence gaps
6. calculations and reports
7. collaboration
8. testing and deployment

After every phase, run:
- npm run dev
- npm run lint
- npm run typecheck
- npm test

Fix all errors before continuing.

Finally provide:
- folder structure
- complete code
- SQL schema
- seed data
- environment variables
- setup instructions
- deployment instructions
- QA checklist
- three-minute demo script
- two-minute pitch

Start by showing the architecture and folder structure, then build the application phase by phase.

Free to use. No credit card required.