Frontend: Real-time WebSocket Delivery Status Badge

[johdanike]

Description
johdanike opened on Jun 1
Member
📁 Implementation Directory
components/logistics/LiveStatusBadge.tsx

🎯 Goal
Display the current status of a delivery (Pending, In Transit, Delivered) that updates instantly without requiring a page refresh.

📋 Requirements

• Custom styled badge component (e.g., Yellow for Pending, Blue for Transit, Green for Delivered).
• Integration with a WebSocket or Server-Sent Events (SSE) hook.
• Pulse animation class applied when the status changes to draw the user's attention.

🔧 Technical Scope
React, Socket.io-client (or native WebSocket), Tailwind CSS

🌿 Branch
git checkout -b feat/live-status-badge

✅ Acceptance Criteria

• Badge state and color update immediately upon receiving a push event from the backend socket connection.
• Strict Layered Architecture: Implement using the 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
• Note a default in any of this will result to issue not being closed nor merged

📌 PR Requirements

• ⚠️ Assignment is required before starting — comment to request assignment
• PR must comply fully with CONTRIBUTING.md
• AI Agent submissions are DISALLOWED and will be closed without review
• 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): implement websocket-driven live status badge

[Faromzy]

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

I will love to work on this issue,pls 🙏 give me

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

[manueldezman]

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

Hi @johdanike,

I will implement the live status badge module utilizing a strict Component -> Hook -> Service architectural boundary without any internal mock data points.

Implementation Plan

1. Service Integration: Implement logisticsService.ts to manage instance streaming connections and real-time backend updates.
2. State Pipeline: Abstract state tracking inside useLiveStatus.ts to coordinate payload updates and transient animation flag durations.
3. Interface Implementation: Create components/logistics/LiveStatusBadge.tsx utilizing context-sensitive Tailwind configurations and smooth change-pulse notifications.
4. Validation: I will run test suites and attach verification screenshots detailing the active runtime responses directly inside the pull request body.
5. Workflow: Branch setup under git checkout -b feat/live-status-badge and commit following feat(logistics): implement websocket-driven live status badge.

Could you please assign this issue to me? I can deliver a clean, architecture-compliant PR immediately.

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

[Agbeleshe]

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

Hi, I can handle this. I have experience building production-ready features and fixing complex issues, and I can deliver a maintainable solution that satisfies the acceptance criteria. Looking forward to contributing.

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

[Babigdk]

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

Hi Maintainer,
I’d like to work on this issue. Could you please assign it to me?
I will provide a detailed explanation of the implementation and the changes made in the pull request once it's ready.
Thank you.

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

[EzeanoroEbuka]

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

Hello JD I would love to clear out this issue quickly in no time, it just a little steps to implement to get it done

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

[Ebenezer199914]

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

i would like this on issue

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