Frontend: Create Shipment Management Page (List & Create)

[mftee]

Description:
Implement a comprehensive shipment management page where users can view all their shipments in a table/card view, filter by various criteria, search, and create new shipments through a multi-step modal form.

Page Route: /shipments

Requirements:

• Table/card view toggle
• Advanced filtering and search
• Sorting and pagination
• Create new shipment modal (multi-step form)
• Bulk actions
• Export functionality
• Quick view panel

Page Sections:

1. Page Header

• Page title: "Shipment Management"
• Search bar (search by ID, origin, destination, carrier)
• Filter button (opens filter panel)
• View toggle (table/cards)
• Create Shipment button (primary CTA)
• Export button (CSV/PDF)
• Breadcrumbs navigation

2. Filters Panel (Sidebar or Dropdown)

• Status (multiple select): Draft, Posted, Assigned, In Transit, Delivered, Cancelled
• Date range (from/to picker)
• Carrier (dropdown with search)
• Origin location (autocomplete)
• Destination location (autocomplete)
• Cargo type (dropdown)
• Price range (min/max sliders)
• Reset filters button

3. Shipments Table View

• Columns: Checkbox, Shipment ID, Origin → Destination, Status, Carrier, Pickup Date, Delivery Date, Cost, Actions
• Sortable columns
• Resizable columns
• Column visibility toggle
• Row hover effects
• Pagination (10, 25, 50, 100 per page)
• Empty state if no shipments

4. Shipments Card View

• Grid of cards (3-4 columns on desktop, 1 on mobile)
• Each card shows:
  • Shipment ID and status badge
  • Origin → Destination with icons
  • Carrier info with avatar
  • Progress bar (based on status)
  • Key dates
  • Quick actions (Track, Edit, Delete)
• Card click opens quick view

5. Create Shipment Modal (Multi-step)

Step 1: Basic Information

• Shipment title
• Cargo type (dropdown)
• Description (textarea)
• Weight (number input with unit selector)
• Dimensions (L x W x H)

Step 2: Locations

• Origin address (autocomplete with map preview)
• Destination address (autocomplete with map preview)
• Pickup date (date picker)
• Delivery date (date picker)
• Special instructions (textarea)

Step 3: Additional Details

• Insurance required (yes/no toggle)
• Cargo value (for insurance calculation)
• Handling requirements (checkboxes: fragile, temperature-controlled, hazmat)
• Required documents (checklist)
• Upload documents (drag-drop)

Step 4: Review & Submit

• Summary of all information entered
• Estimated cost display (calculated)
• Terms & conditions checkbox
• Submit button
• Edit button for each section to go back

6. Quick View Panel

• Slide-in panel from right showing:
  • Shipment details
  • Mini timeline
  • Carrier contact
  • Documents preview
  • Quick actions
• Close button

Components to Create:

/components/shipments/
├── ShipmentsTable.tsx
├── ShipmentCard.tsx (reusable)
├── ShipmentsGrid.tsx
├── FiltersPanel.tsx
├── SearchBar.tsx (reusable)
├── ViewToggle.tsx
├── CreateShipmentModal.tsx
├── ShipmentFormStep1.tsx
├── ShipmentFormStep2.tsx
├── ShipmentFormStep3.tsx
├── ShipmentFormStep4.tsx
├── QuickViewPanel.tsx
├── BulkActionsBar.tsx
├── StatusBadge.tsx (reusable)
├── ProgressBar.tsx (reusable)
└── EmptyState.tsx (reusable)

/components/shared/
├── DataTable.tsx (reusable)
├── Pagination.tsx (reusable)
├── DateRangePicker.tsx (reusable)
├── LocationAutocomplete.tsx (reusable)
└── MultiStepForm.tsx (reusable wrapper)

Technical Requirements:

• TanStack Table for table functionality
• TanStack Query for data fetching and caching
• react-hook-form + zod for form validation
• date-fns + react-day-picker for date selection
• Google Places API for location autocomplete

Multi-step Form:

• Progress indicator showing current step (1/4, 2/4, etc.)
• Validation before proceeding to next step
• Can go back to edit previous steps
• Data persists across steps
• Form data saved in state
• Submit only on final step

Bulk Actions:

• Select multiple shipments via checkboxes
• Bulk operations: Export Selected, Delete Selected, Change Status
• Confirmation modals for destructive actions
• Floating action bar when items selected

Acceptance Criteria:

• Table view with all columns implemented
• Card view responsive grid
• View toggle works smoothly
• Search filters data correctly
• Filters panel with all options functional
• Sorting on all columns
• Pagination controls functional
• Create modal with 4 steps
• Form validation on each step
• Can't proceed without valid data
• Quick view panel slides in/out
• Bulk selection and actions work
• Export to CSV functional
• Loading states for data fetch
• Empty state when no shipments
• Responsive design (mobile: table becomes cards)
• TypeScript: full type coverage
• Performance: smooth scrolling with 100+ items

Testing Requirements:

• Test with 0, 1, 10, 100+ shipments
• Test all filter combinations
• Test multi-step form validation
• Test table sorting on each column
• Test pagination
• Test responsive layouts
• Test bulk operations

[drips-wave]

This issue has been added to the Stellar Wave Program and is worth 150 Points.

🧑‍💻 Interested in contributing? Apply to work on this issue on Drips Wave, earn points, and receive rewards.

🤠 Repo maintainers: You can manage this issue's Points and Complexity on your Maintainer Dashboard here. Please keep an eye on applications and respond quickly 💙

ℹ️ Learn more about Drips Wave

[Emmzyemms]

@Emmzyemms has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I’d like to work on this frontend issue. I have experience with Web3 UI integration, wallet connections, and responsive React-based interfaces.
I can start immediately. Thanks!

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

[Iwueseiter]

@Iwueseiter has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hello Maintainer,

My name is Iwueseiter, and I am a frontend developer with solid experience in React, Next.js, TypeScript, JavaScript, and frontend integrations.

Beyond implementing the required features, I place strong emphasis on clean, maintainable code and ensuring the final output aligns closely with the provided design while remaining visually appealing and user-friendly.

I can complete this task within an estimated timeline of 2 days.
Thank you for your consideration.

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

[Rampop01]

@Rampop01 has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I would like to work on this issue as a web3 full-stack developer with a strong focus on frontend development. I understand the assignment and the requirements, and I’m confident in the approach needed to deliver the best solution. Kindly assign this task to me.
Thank you

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

[EA10-lite]

@EA10-lite has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

My name is Emmanuel, and I’m a full-stack developer with 4 years of experience building Web and mobile applications. I’ve worked extensively on scalable web platforms, interactive mobile apps, and full-stack projects, handling both frontend and backend development while ensuring clean architecture and smooth user experiences.

I’m very familiar with the complete development workflow — from issue analysis and solution design, to implementation, testing, and well-structured pull requests that follow project standards and best practices.

This issue aligns closely with my experience, and I’m confident I can deliver a clean, efficient, and production-ready solution within a short timeframe. I invite you to review my portfolio to see my previous projects and hands-on experience across real-world applications.

I value clear communication, maintainable code, and high-quality delivery, and I’d be happy to contribute to this task and collaborate with the team throughout the process.

Here is my portfolio and projects I have handled:

https://ecohotels.com
https://loveping.vercel.app
https://proposelyai.com
https://www.usememora.xyz
https://360comms.network
https://ea10.vercel.app
https://novacrust-exercise.vercel.app/

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

[Marvelousmicheal]

@Marvelousmicheal has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

this is very board issue , but I know I can handle it if I get assigned

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

[josephchimebuka]

@josephchimebuka has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I have read this and I can handle it, and it is within my skill sets. I’m Joseph Chimebuka, a Full-stack and Blockchain Developer with a strong background in open-source contributions. I’m a top open-source contributor on OnlyDust, have participated in multiple hackathons, and enjoy solving complex problems.

I’m currently building with TypeScript and Rust, and I’m confident I can tackle this issue and deliver results quickly. Let’s get to work!

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

[Macnelson9]

@Macnelson9 has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hi team, I’d like to work on this issue.

I’m a Frontend Developer who thrives at the intersection of UI polish + product usability, and I’ve shipped responsive components/pages using Next.js/React + Tailwind (including interactions, animations, and pixel-accurate Figma builds).

What I’ll deliver

Shipment Management Page implemented to match the design/spec

Responsive behavior (mobile + desktop), no layout breakage

Hover/focus states + accessible semantics

Clean, reusable components and consistent styling

Approach

Review the design/spec and existing code patterns

Build the UI + interactions

QA on multiple breakpoints + open a PR with screenshots/video

If assigned, I’ll start immediately and share progress updates in the PR.

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

[raymondjoseph02]

@raymondjoseph02 has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hi, I’m Raymond Joseph, a Frontend Developer with experience in TypeScript, React/Next.js, Tailwind CSS, and complex data-driven interfaces.

For this task, I’ll build a comprehensive Shipment Management page with table and card views, advanced filtering, search, sorting, pagination, and bulk actions. I’ll implement a multi-step modal form for creating shipments with validation using React Hook Form + Zod, and ensure data persists across steps.

The page will include a quick view panel, smooth responsive layouts, export functionality, loading/empty states, and full TypeScript coverage. I’ll focus on performance, accessibility, and a smooth UX for handling even 100+ shipments.

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

[samad13]

@samad13 has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

i have the necessary experience, to deliver this issue on time

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

[ReinaMaze]

@ReinaMaze has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hi,
I’d like to apply for this issue and kindly request to be assigned.
I’ve reviewed the requirements and I’m confident I can deliver the solution as described. I have open-source contribution experience and I’ll follow the project guidelines to ensure the implementation is clean, tested, and meets the acceptance criteria.

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