Added add vehicle page

[Duckierstone42]

No description provided.

[netlify]

✅ Deploy Preview for able-alliance ready!

Name	Link
🔨 Latest commit	e052d00
🔍 Latest deploy log	https://app.netlify.com/projects/able-alliance/deploys/69d85bff4963950008bdbfa6
😎 Deploy Preview	https://deploy-preview-71--able-alliance.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[greptile-apps]

Greptile Summary

This PR is broader than the title suggests — beyond redesigning the "add vehicle" form (removing the separate vehicleId field and deriving it from name), it adds a full ride detail page with Mapbox map and real-time chat via WebSocket, a driver-specific rides view with today/tomorrow tabs, and two new API endpoints (/api/routes/missing and /api/routes/pickup).

• P1: src/app/rides/[id]/page.tsx has two useEffect hooks that both call GET /api/locations (lines 207–226 and 359–379), firing redundant parallel requests every time route changes — the second block should be removed.
• P1: The Mapbox map always renders hardcoded GT campus fallback coordinates (33.7756, -84.4027) because the locations state only stores id → name strings, discarding the latitude/longitude from the API; real pickup/dropoff pins are never shown.
• P2: Multiple hardcoded hex color values across styles.module.css, RideCard.tsx, and inline styles in admin/page.tsx should use CSS variables; the vehicle form also uses marginBottom instead of flex gap.

Confidence Score: 4/5

Needs two P1 fixes before merge — duplicate API calls and broken map coordinates.

Two P1 issues block a clean merge: the duplicate locations fetch wastes network calls on every render, and the map always shows default coordinates making it non-functional for its core purpose. The remaining findings are style/convention P2s that don't block functionality.

src/app/rides/[id]/page.tsx requires the most attention — remove the duplicate fetchLocations effect and fix the locations state to store coordinates alongside names so the map renders correctly.

Important Files Changed

Filename	Overview
src/app/rides/[id]/page.tsx	New ride detail page with chat and map — has two P1 issues: duplicate /api/locations fetch and map always rendering default GT campus coordinates instead of real location coordinates.
src/app/admin/page.tsx	Vehicle form redesigned to derive vehicleId from name; uses inline styles with hardcoded colors/margins instead of CSS variables and flex gap.
src/app/rides/[id]/styles.module.css	New stylesheet for ride detail page — largely uses CSS variables correctly, but greenOutlineButton and a few other selectors use hardcoded hex/rgba color values.
src/app/rides/RideCard.tsx	Redesigned driver and student card views; hardcoded hex colors in getStudentStatusChipStyle should use CSS variables.
src/app/api/routes/missing/route.ts	New POST endpoint to mark a route as missing; properly validates auth, driver ownership, and route existence.
src/app/api/routes/pickup/route.ts	New POST endpoint to mark student as picked up; validates auth, driver ownership, and En-route status precondition.
websocket-server/index.mjs	WebSocket server with JWT auth, per-route rooms, chat and location broadcast; several console.log statements remain (expected for a server process).
.claude/settings.local.json	Machine-local Claude Code IDE config — should not be committed as part of a feature PR; candidate for .gitignore.

Sequence Diagram

sequenceDiagram
    participant Client as Ride Detail Page
    participant API as Next.js API
    participant WS as WebSocket Server
    participant DB as MongoDB

    Client->>API: GET /api/routes/:id
    API->>DB: RouteModel.findById()
    DB-->>API: route doc
    API-->>Client: RouteData

    Client->>API: GET /api/locations (x2 duplicate effect)
    API-->>Client: Location[]

    Note over Client: Driver connects WS on page load (isChatEligible)
    Client->>WS: io.connect({ routeId, token })
    WS->>DB: getRouteForAuth(routeId)
    DB-->>WS: route (status, driver, student)
    WS-->>Client: connected / auth error

    Client->>WS: sendChatMessage(text)
    WS-->>Client: receiveChatMessage(text)

    Client->>API: POST /api/routes/pickup { routeId }
    API->>DB: pickupStudent(routeId)
    DB-->>API: updated route
    API-->>Client: 200 OK

    Client->>API: POST /api/routes/missing { routeId }
    API->>DB: markRouteMissing(routeId)
    DB-->>API: updated route
    API-->>Client: 200 OK

Loading

Comments Outside Diff (5)

1. src/app/rides/[id]/page.tsx, line 359-379 (link)

   Duplicate /api/locations fetch causes two identical API calls

   There are two separate useEffect hooks — lines 207–226 and lines 359–379 — that both call fetch("/api/locations") with [route] as the dependency. Every time route is set, both effects fire in parallel, making two needless network requests and overwriting state with identical data. The comment "keep for backward compatibility" suggests this is leftover code. Remove this second block entirely.

2. src/app/rides/[id]/page.tsx, line 240-258 (link)

   Map markers always use hardcoded fallback coordinates

   The pickup and dropoff objects are built with names from the locations map (e.g. locations[route.pickupLocation]) but their latitude/longitude are always the hardcoded GT campus defaults. The locations state is Record<string, string> (id → name only), so real coordinates are never stored or used. The Location type does include latitude and longitude, but they're discarded when setLocations builds the name-only map. The map therefore always shows the same default area regardless of the actual pickup/dropoff locations.

   To fix, either store the full Location objects in state, or pass coordinates alongside the name map so the map effect can use them.

3. src/app/admin/page.tsx, line 738-812 (link)

   Inline styles with hardcoded values should use CSS variables/Tailwind

   The redesigned vehicle form uses inline style props with hardcoded colors, border values, and a marginBottom (e.g. background: "#fff", border: "1px solid rgba(34,7,11,0.15)", marginBottom: "1.6rem"). Per project conventions: colors should come from CSS variables, margins should be replaced with flex gap, and layout styles belong in a CSS module rather than inline.

   Rule Used: Use color variables from the global stylesheet (`s... (source)

   Learnt From
   GTBitsOfGood/design-system#61

   Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

4. src/app/rides/RideCard.tsx, line 56-74 (link)

   Hardcoded hex color values in getStudentStatusChipStyle

   getStudentStatusChipStyle returns raw hex values (e.g. "#ffd17f", "#22070b", "#432c30", "#f4a0a0", "#70cd87") directly in inline style objects. These should reference CSS variables from the global stylesheet (like var(--color-status-amber-fill), var(--color-grey-text-strong), etc.) for consistency and theming.

   Rule Used: Use color variables from the global stylesheet (`s... (source)

   Learnt From
   GTBitsOfGood/design-system#61

   Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

5. .claude/settings.local.json, line 1-17 (link)

   .claude/settings.local.json should not be committed in a feature PR

   This file is a Claude Code IDE configuration that belongs in .gitignore (it is machine-local). Including changes to it in a feature PR adds noise and may expose developer-tool permissions (powershell, docker compose, tsc) that differ between contributors' environments. Consider adding it to .gitignore and reverting this file from the PR.

_{Reviews (1): Last reviewed commit: "Added add vehicle page" | Re-trigger Greptile}

[greptile-apps]

Hardcoded color values — use CSS variables instead

greenOutlineButton uses hardcoded hex/rgba values (#16a34a, rgba(22, 163, 74, 0.06)) instead of CSS variables from the global stylesheet. The same pattern appears elsewhere in the file (e.g. color: #000 on .pageTitle, color: rgba(34, 7, 11, 0.5) on .stopLabel). Per project convention, all color values should reference CSS variables.

Rule Used: Use color variables from the global stylesheet (`s... (source)

Learnt From
GTBitsOfGood/design-system#61

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

[greptile-apps]

vehicleId is now silently set to equal name

After removing the separate vehicleId form field, the payload sends vehicleId: name (the "Vehicle Number" field). If two vehicles are created with the same vehicle number / name, they will have identical vehicleId values. If the backend schema enforces uniqueness on vehicleId this will cause confusing errors; if it doesn't, it creates duplicate IDs. Consider clarifying in a comment that this is intentional and verifying the uniqueness constraint is in place.