feat: implement frontend components and route guard (#885, #886, #887, #888)

[SharifIbrahimDev]

Description

This PR implements a batch of requested frontend components and hooks inside the frontend/package/ directory.

What was done

Responsive Sidebar Navigation ([FE-17])

• Built a dynamic ResponsiveSidebar that adapts to desktop, tablet, and mobile screens.
• Added hamburger menu and overlay behavior for smaller devices.
• Dynamically renders navigation links based on user roles (shipper, carrier, admin).

Address Book Management UI ([FE-18])

• Created AddressBook for CRUD management of saved addresses.
• Added support for setting and updating default addresses.
• Built reusable AddressSelector component for shipment forms.
• Integrated React Query for caching and optimistic updates.

User Onboarding Wizard ([FE-19])

• Implemented OnboardingWizard overlay component.

• Fetches onboarding progress from the backend.

• Supports 4 onboarding steps:

  • Profile
  • Shipments
  • Wallet
  • Notifications

• Added session-based "Skip for Now" functionality.

Role-Based Route Guard ([FE-20])

• Implemented withRoleGuard HOC.

• Implemented useRoleGuard hook.

• Enforces client-side authorization using useAuthStore.

• Added demo pages for validation at:

  • /admin
  • /shipments/new

Files Changed

• components/Sidebar/ResponsiveSidebar.tsx
• components/AddressBook/AddressBook.tsx
• components/AddressBook/AddressSelector.tsx
• components/OnboardingWizard/OnboardingWizard.tsx
• hocs/withRoleGuard/*
• demo/*

Verification

• Tested responsive behavior on mobile and desktop viewports.
• Verified TypeScript compilation.
• Verified successful Next.js production build using npm run build.

Closes #885
Closes #886
Closes #887
Closes #888

[vercel]

@rhoggs-bot-test-account is attempting to deploy a commit to the Mftee's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@SharifIbrahimDev Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits