Skip to content

Frontend: Route Optimization Waypoint Planner with Drag-and-Drop Map #830

Closed
#929
Closed
Frontend: Route Optimization Waypoint Planner with Drag-and-Drop Map#830
#929
Assignees
TechBroAfrica
Labels
Stellar WaveTasks related to the Stellar Wave development phasefrontendFrontend / client-side implementationlogisticsHardTech logistics, routing, and delivery tasksmapsuiUser Interface and component styling

Description

@johdanike
johdanike
opened on Sep 28, 2026

Summary

Part of the UI/UX Design (Light Mode) implementation initiative. Addresses one of 100 granular issues generated from the first 22 Figma design areas.

Implementation Directory

components/shipments/RouteOptimizer.tsx

Goal

Create an interactive map-based tool for fleet managers to visually drag, drop, and reorder delivery waypoints, then compute the optimized route between all stops.

Requirements

  • Display map with all delivery waypoints as draggable markers
  • Show optimized route polyline between reordered waypoints
  • Reorder waypoints via drag-and-drop on markers
  • Show route distance and estimated time
  • Export optimized route to JSON or share link

Technical Scope

React, Leaflet, react-leaflet, TailwindCSS, Drag-and-Drop

Branch

git checkout -b feat/route-optimizer-component

Acceptance Criteria

  • Markers are draggable and reorder updates route

  • Route polyline calculates efficiently

  • Export button downloads optimized waypoint order

  • Mobile layout stacks controls vertically

  • Strict Layered Architecture: Component -> Hook -> Service pattern

  • Data Source: Response data must be retrieved from the backend API. No Inline Mock Objects

  • Screenshot of all implementations must be included in PR

  • AI-generated PR submissions are strictly disallowed

  • Closes #[issue_id] with a work summary included in the PR body

  • PR must comply fully with CONTRIBUTING.md

PR Requirements

  • Assignment is required before starting - comment to request assignment
  • Upload a screenshot showing all unit tests passing or API response
  • PR description must include: Closes #[issue_id] and a brief summary of work done

Example Commit

feat(logistics): create route optimization waypoint planner with drag-and-drop map

Activity

  1. johdanike
    added
    frontendFrontend / client-side implementation
    uiUser Interface and component styling
    logisticsHardTech logistics, routing, and delivery tasks
    maps
    on Sep 28, 2026
  2. drips-wave
    added
    Stellar WaveTasks related to the Stellar Wave development phase
    on Oct 16, 2026

  3. CryptoverseOG commented on Oct 16, 2026

    @CryptoverseOG
    CryptoverseOG
    on Oct 16, 2026 – with Drips Wave

    @CryptoverseOG has applied to work on this issue as part of the Stellar Wave Program's 10th wave.

    Hello Maintainer, I’ve reviewed the issue and understand the expected outcome. I’m interested in taking responsibility for this task and would appreciate your consideration for the assignment.

    ℹ️ Repo Maintainers: To accept this application, review their application or assign @CryptoverseOG to this issue.

  4. majormmu2-bot commented on Oct 16, 2026

    @majormmu2-bot
    majormmu2-bot
    on Oct 16, 2026 – with Drips Wave

    @majormmu2-bot has applied to work on this issue as part of the Stellar Wave Program's 10th wave.

    I can handle this issue.Assign it to me

    ℹ️ Repo Maintainers: To accept this application, review their application or assign @majormmu2-bot to this issue.

  5. vincentchimene commented on Oct 16, 2026

    @vincentchimene
    vincentchimene
    on Oct 16, 2026 – with Drips Wave
    Contributor

    @vincentchimene has applied to work on this issue as part of the Stellar Wave Program's 10th wave.

    Good day Boss,

    I would love to contribute to Issue #830, Route Optimization Waypoint Planner.

    I will build the Leaflet map component with draggable waypoints, route reordering, distance and ETA display, and JSON export. I will follow the Component → Hook → Service architecture, retrieve data from the backend API, and ensure the layout works well on mobile.

    Thank you for the opportunity.

    Make I run this thing abeg,
    Vincent

    ℹ️ Repo Maintainers: To accept this application, review their application or assign @vincentchimene to this issue.

  6. TechBroAfrica commented on Oct 18, 2026

    @TechBroAfrica
    TechBroAfrica
    on Oct 18, 2026 – with Drips Wave

    @TechBroAfrica has applied to work on this issue as part of the Stellar Wave Program's 10th wave.

    Hi, kindly assign task to me Thanks.

    ℹ️ Repo Maintainers: To accept this application, review their application or assign @TechBroAfrica to this issue.

  7. johdanike
    assigned
    TechBroAfrica
    on Oct 18, 2026

  8. drips-wave commented on Oct 18, 2026

    @drips-wave
    drips-waveBot
    on Oct 18, 2026 – with Drips Wave

    Congratulations, @TechBroAfrica! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on October 22, 2026.

    🧑‍💻 @TechBroAfrica: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

    Warning

    When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

    🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

    🌊 Happy Wave 🌊

  9. drips-wave commented on Oct 22, 2026

    @drips-wave
    drips-waveBot
    on Oct 22, 2026 – with Drips Wave

    This issue has been marked as completed by a Drips Wave moderator for @TechBroAfrica as part of the Stellar Wave Program's 10th Wave 🥳

    Moderator's reason: [Auto-assessed] The PR #929 correctly implements the requested route optimization waypoint planner feature with drag-and-drop marker support, distance/ETA calculations, service integration, and accompanying unit tests. There are no maintainer objections across any of the channels.

    😎 @TechBroAfrica: You earned 200 Points for completing this issue! Once the Wave's rewards are finalized, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here.

    🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.

    ℹ️ Note: This issue was marked complete via moderation. Points were issued even though the GitHub issue remains open.

  10. johdanike
    closed this as completedin #929on Oct 23, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Stellar WaveTasks related to the Stellar Wave development phasefrontendFrontend / client-side implementationlogisticsHardTech logistics, routing, and delivery tasksmapsuiUser Interface and component styling

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions