add shipment export, carrier reputation widget, date range picker, an…

[feyishola]

…d empty states

PR Description
Summary
This PR implements four frontend components to enhance the shipment management UX: CSV export functionality, carrier reputation visualization, a reusable date range picker, and standardized empty states across the application.

Changes Included

1. ExportButton Component — Shipment Data Export
   Files:

frontend/package/components/ExportButton/ExportButton.tsx

frontend/package/components/ExportButton/ExportButton.test.tsx

frontend/package/components/ExportButton/index.ts

Features:

Placement: Ships list page, labeled "Export CSV"

Filter Integration: Uses active filter state (date range, status, search)

API Call: GET /api/shipments/export/csv with query params

Download Pattern: Blob URL with timestamped filename (e.g., shipments-2025-05-29.csv)

Loading State: Spinner during request, button disabled

Empty Handling: Disabled when shipment list is empty

Error Handling: Toast notification on API failure

Browser Support: Chrome, Firefox, Edge

2. ReputationScoreWidget — Carrier Quality Visualization
   Files:

frontend/package/components/ReputationScore/ReputationScoreWidget.tsx

frontend/package/components/ReputationScore/ReputationScoreWidget.test.tsx

frontend/package/components/ReputationScore/index.ts

Components:

Full Variant: Circular arc progress, center score, sub-scores below

Compact Variant: Score with mini color-coded ring for bid lists

DateRangePicker — Reusable Range Selection
Files:

frontend/package/components/DateRangePicker/DateRangePicker.tsx

frontend/package/components/DateRangePicker/DateRangePicker.test.tsx

frontend/package/components/DateRangePicker/Calendar.tsx

frontend/package/components/DateRangePicker/PresetShortcuts.tsx

frontend/package/components/DateRangePicker/index.ts

Features:

Calendar View: Two months side-by-side (desktop), single month (mobile)

Range Selection: Click start date → click end date with highlighted range

Preset Shortcuts: Today, Last 7 Days, Last 30 Days, This Month, Last Quarter

Clear Button: Resets both from/to to undefined

Validation: Ensures from ≤ to with inline error message

RHF Integration: Works with Controller pattern

4. EmptyState Component Library — Standardized Empty States
   Files:

frontend/package/components/EmptyState/EmptyState.tsx

frontend/package/components/EmptyState/EmptyState.test.tsx

closes #893
closes #894
closes #895
closes #896

[vercel]

@feyishola 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]

@feyishola 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