feat: responsive dashboard layout and multi-step campaign form (#83, #86)

[josephchimebuka]

Summary

This PR implements two features:

📊 Responsive Dashboard Layout (Closes #83)

Makes the entire dashboard fully responsive across all screen sizes.

• Sidebar → bottom nav: The sidebar navigation is shown on tablet/desktop (≥ 768px) and collapses into a fixed bottom navigation bar on mobile (< 768px). A compact top bar with the brand is shown on mobile.
• Stats widgets: Stack in a single column on mobile, 2 columns on tablet, and 4 columns on desktop using Tailwind breakpoints (grid-cols-1 md:grid-cols-2 lg:grid-cols-4).
• Tables: The recent-donations table is wrapped in an overflow-x-auto container with a sensible min-w, so it becomes horizontally scrollable on small screens instead of breaking the layout.
• No horizontal overflow: Verified the layout against 375px (iPhone SE), 768px (iPad), and 1280px (Desktop) breakpoints.

📝 Multi-Step Form Structure (Closes #86)

Builds the multi-step campaign creation form container that manages step navigation.

• Adds src/pages/campaigns/CreateCampaignPage.jsx as the step container.
• Manages the current step via formStep in Redux (new campaigns slice with nextStep/prevStep/setFormStep).
• Renders the correct step component based on formStep (Details → Funding → Media → Review).
• Adds Next and Back buttons for navigation between steps, plus a progress indicator.
• Persists form data in draftCampaign Redux state as the user moves between steps, so data is retained when going back.
• Prompts the user with an "unsaved changes" warning when leaving the page using useBeforeUnload.

Changes

• src/components/layout/MainLayout.jsx — responsive sidebar/bottom-nav layout (Tailwind)
• src/pages/Dashboard.jsx — responsive stats widgets + scrollable table
• src/features/campaigns/campaignSlice.js — Redux slice for formStep and draftCampaign
• src/store/index.js — register the campaigns reducer
• src/pages/campaigns/CreateCampaignPage.jsx — multi-step form container
• src/pages/campaigns/steps/* — Details, Funding, Media, and Review step components
• src/routes/AppRouter.jsx — route /campaigns/create (and /create) to the new page

Test plan

• npm run lint passes
• npm run build passes
• Dashboard usable with no horizontal overflow at 375px, 768px, 1280px
• Navigate forward/back through campaign steps; data persists when going back
• Refreshing/closing the tab with unsaved data shows the browser warning

Made with Cursor

[ayshadogo]

Hello @josephchimebuka You've done a Great work here. 🫡

Please resolve conflicts
thank you