raven-currency

As a user, I want to see the Landing page implemented based on the existing JSX design (v2). This includes: NavBar with glassmorphism effect, HeroGlobe with 3D interactive WebGL globe, LiveRatesTickerBar with auto-scrolling currency pairs, FeatureHighlights, HowItWorks, QuickConverterWidget, PremiumPricing, Testimonials, TrustAndSecurity, CallToAction, and Footer sections. The page should match the design exactly — deep midnight blue background (#1A1A2E), animated star-field particle layer, coral red accents (#F05454), and fully responsive layout.

As a user, I want to sign in via the Login page so I can access the Dashboard (Professional User), Admin Dashboard, or Supervisor Dashboard depending on my role. Implement the Login page UI based on the existing JSX design (v2) with the Raven-Currency dark theme. Fields: role selector, email, password, submit button in coral red. Include links to Signup. On success, redirect based on role. This is part of the user flow: Landing → Login → Dashboard / Admin Dashboard / Supervisor Dashboard.

As a user, I want to create an account via the Signup page so I can access professional currency tools. Implement Signup page UI based on the existing JSX design (v2) with the Raven-Currency dark theme. Features: left decorative branding panel with globe illustration and floating currency symbols (desktop only), right form panel with full name, email, password, confirm password fields, social OAuth buttons, terms consent, and submit CTA in coral red. Include link back to Login. On success, redirect to Dashboard. Part of the user flow: Landing → Signup → Dashboard.

As a user, I want a backend API for currency conversion so that the Dashboard converter widget shows accurate results. Implement FastAPI endpoint POST /api/convert with params: from_currency, to_currency, amount. Returns converted amount and rate used. Supports all major currencies. Integrates with real-time rate service.

As a premium user, I want a backend API for historical exchange rate data so that the Analytics page can render trend charts. Implement FastAPI endpoint GET /api/rates/history with params: base, target, date_from, date_to. Stores and retrieves historical rate snapshots from the database. Must respond within 2 seconds per SRD. Restricted to premium users.

As an admin, I want backend APIs to manage subscription plans so I can control premium access. Implement FastAPI endpoints: GET /api/admin/subscriptions (list all subscriptions with filters), PUT /api/admin/subscriptions/{id} (modify plan/status), GET /api/admin/subscriptions/summary (revenue and stats). Admin-role JWT required.

As an API Supervisor, I want backend APIs for monitoring data feeds and reviewing activity logs so I can maintain system reliability. Implement FastAPI endpoints: GET /api/supervisor/feeds (list feed sources, status, latency), POST /api/supervisor/feeds/{id}/resolve (manual refresh), GET /api/supervisor/logs (activity log with filters/pagination), POST /api/supervisor/logs/{id}/flag. Supervisor-role JWT required.

As a professional user, I want to use the Dashboard page to convert currencies in real-time so I can manage international transactions. Implement the Dashboard page based on the existing JSX design (v2) with: a currency converter widget (from/to selectors, amount input, live result), quick stats cards, navigation links to Calculator and Analytics, and a premium upsell banner for non-subscribers. Themed with dark surface cards, coral accents. Part of the user flow: Login → Dashboard → Calculator / Analytics.

As an admin, I want to use the Admin Dashboard page to view an overview of users and subscriptions so I can manage platform operations. Implement the Admin Dashboard page based on the existing JSX design (v2) with: summary stats cards (total users, active subscriptions, revenue), recent activity feed, quick action links, navigation to Users and Subscriptions management pages. Dark theme, coral accent cards. Part of the user flow: Login → Admin Dashboard → Users / Subscriptions.

As an API Supervisor, I want to use the Supervisor Dashboard page to view the status of currency data feeds so I can ensure data accuracy for professional users. Implement the Supervisor Dashboard based on the existing JSX design (v2) with: API health status cards, data feed latency metrics, system uptime indicator, quick links to API Monitor and Logs. Dark theme, coral/green status indicators. Part of the user flow: Login → Supervisor Dashboard → API Monitor / Logs.

As a professional user, I want to use the Calculator page to perform multi-currency calculations so I can handle complex international transactions. Implement the Calculator page based on the existing JSX design (v2) with a multi-currency calculator UI: add multiple currency rows, input amounts, real-time cross-currency results, and a summary total. Coral accent buttons and dark theme. Part of the user flow: Dashboard → Calculator.

As a premium professional user, I want to view the Analytics page to analyze historical currency trends so I can make informed financial decisions. Implement the Analytics page based on the existing JSX design (v2) with: historical rate charts (line/area charts), currency pair selector, date range picker, and trend indicators. Locked/blurred state for non-premium users with upgrade CTA. Dark theme with coral accents. Part of the user flow: Dashboard → Analytics → Subscription.

As an admin, I want to use the Users page to manage user accounts so I can maintain platform integrity. Implement the Users page based on the existing JSX design (v2) with: a searchable/filterable user table (name, email, role, plan, status), user stats bar, edit user slide-over drawer (role/plan/status), suspend and delete actions. Dark themed table with coral action buttons, alternating row backgrounds. Part of the user flow: Admin Dashboard → Users → Edit User.

As an admin, I want to use the Subscriptions page to manage subscription plans so I can control premium access and pricing. Implement the Subscriptions page based on the existing JSX design (v2) with: active subscriptions list (user, plan, billing date, status), revenue summary cards, plan modification options (upgrade/downgrade/cancel), and billing history. Dark theme with coral accents. Part of the user flow: Admin Dashboard → Subscriptions → Modify Plan.

As an API Supervisor, I want to use the API Monitor page to check and resolve currency data feeds so I can maintain 99.9% data accuracy for professional users. Implement the API Monitor page based on the existing JSX design (v2) with: live feed status table (source, last updated, latency, status badges), resolve data action (manual refresh), alert indicators for degraded feeds, and feed detail drawer. Dark theme with coral/green/amber status badges. Part of the user flow: Supervisor Dashboard → API Monitor → Resolve Data.

As an API Supervisor, I want to use the Logs page to review activity and flag issues so I can maintain system reliability. Implement the Logs page based on the existing JSX design (v2) with: a filterable activity log table (timestamp, event type, source, severity), flag issue action, log detail drawer, and export log option. Dark theme with severity color coding (coral for errors, amber for warnings, muted for info). Part of the user flow: Supervisor Dashboard → Logs → Flag Issues.

As a professional user, I want the Dashboard and LiveRatesTickerBar to display real-time exchange rates fetched from the backend so that I see accurate live data. Integrate the frontend Dashboard converter widget and the Landing page ticker bar with the GET /api/rates and POST /api/convert endpoints. Handle loading states, error states, and auto-refresh every 30 seconds.

As a professional user, I want to view the Subscription page to understand premium plan details and initiate an upgrade so I can access advanced analytics and unlimited queries. Implement the Subscription page based on the existing JSX design (v2) with: Free vs Premium plan comparison cards, feature comparison table, billing toggle (monthly/annual), $5/month pricing, FAQ accordion, payment trust bar, and 'Subscribe Now' CTA button in coral red. Part of the user flow: Analytics → Subscription → Checkout.

As a premium user, I want the Analytics page to fetch and display real historical exchange rate data from the backend so I can analyze trends. Integrate the Analytics page charts with GET /api/rates/history. Implement currency pair selector, date range picker, and dynamic chart rendering. Show upgrade prompt for non-premium users.

As a professional user, I want to complete payment on the Checkout page so I can activate my premium subscription. Implement the Checkout page based on the existing JSX design (v2) with: order summary (Premium plan, $5/month), payment form (card details via Stripe), billing address, PCI DSS compliance notice, and confirmation redirect. Dark theme, coral submit button. Part of the user flow: Subscription → Checkout → Dashboard (premium).

As a user, I want the Checkout page to process real payments via the backend so I can activate my premium subscription. Integrate the Checkout page with POST /api/subscriptions/create. Implement Stripe Elements for PCI-compliant card input, handle success/failure states, and redirect to Dashboard with premium access on success.