space-hui

As a guest/user I want to experience an immersive galaxy map landing page. Implement the Landing page (v2) based on the existing JSX design. Includes: NavBar (sticky frosted glass, logo, nav links, Sign In + Get Started CTA), GalaxyHero (100vh star field, headline, CTAs, stat pills), TrustBadges (marquee of tech logos), InteractiveGalaxyMap (3D/2D star map with clickable features), FeatureHighlights (4-card grid), AIChatbotDemo (live demo strip for guests), HowItWorks (3-step stepper), Testimonials (carousel), PricingTeaser (2-tier cards), CallToAction (CTA banner), Footer (4-column). Links to: /Login, /Signup, /Chatbot, /Features.

As a user I want to sign in to access my personalized AI dashboard. Implement the Login page with cosmic theme styling: email/password form, sign-in button in #FF6F61, link to Signup, frosted-glass card on galaxy background. On success redirects to /Dashboard. Follows the space-hui design system established in t1.

As a guest I want to create an account to unlock full AI features. Implement the Signup page with cosmic theme: name, email, password fields, Create Account CTA in #FF6F61, link back to Login, frosted-glass card on galaxy background. On success redirects to /Dashboard. Guest flow: Features/Chatbot -> Signup.

As a guest I want to browse all platform capabilities before signing up. Implement the Features page: detailed feature showcase with sections for AI Chatbot, Recommendations, Image Analysis, and Dashboard insights. Each feature has icon, headline, description, and demo/signup CTA. Cosmic galaxy background. Linked from Landing navbar and Guest flow.

As a registered user I want to view my AI-generated insights and navigate to all features from a central dashboard. Implement the Dashboard page: sidebar navigation (links to /Chatbot, /Upload, /Recommendations), AI insights summary cards, recent activity feed, personalized stats. Background uses the galaxy canvas. Links from Login -> Dashboard. Acts as the post-login hub for User flow.

As an admin I want to monitor system performance and user interactions from a central admin panel. Implement the Admin Dashboard page: system metrics cards (active users, API calls, model performance), recent user activity feed, quick links to /AI Models and /User Activity pages, alert/notification panel. Admin-only access protected by role-based auth. Linked from Login (admin role).

As a user I want the platform to respect UAE timezone and localization settings. Implement Gulf Standard Time (GST, UTC+4) as default timezone across all timestamps in the UI and API responses. Add Arabic language support toggle in settings/footer. Implement time-of-day color shift logic (warm amber/coral tones during UAE daytime hours, cooler tones at night) via CSS custom property updated by JS. Ensure date/time formatting follows UAE conventions.

As a user/guest I want to interact with an AI chatbot for assistance. Implement the Chatbot page: full-screen chat UI with scrollable message thread, user/AI alternating bubbles, typewriter animation for AI responses, text input bar, Send button in #FF6F61. Guest mode shows limited interaction with Signup CTA. Registered users get full access. Linked from Dashboard and Landing demo strip.

As a user I want to upload images for AI-based analysis and receive insights. Implement the Upload page: drag-and-drop image upload zone, file browser fallback, image preview, analysis trigger button in #FF6F61, results display panel showing AI-generated analysis. Cosmic theme with frosted-glass cards. Linked from Dashboard.

As a user I want to view personalized AI-powered recommendations based on my preferences. Implement the Recommendations page: grid of recommendation cards with AI-generated suggestions, filter/sort controls, each card showing title, description, relevance score, and action CTA in #FF6F61. Cosmic theme styling. Linked from Dashboard.

As an admin I want to manage AI model configurations and update training datasets. Implement the AI Models page: list of configured AI models (GPT, Claude, Gemini) with status indicators, configuration panels for each model (parameters, routing via LiteLLM), dataset upload/update controls, enable/disable toggles. Cosmic theme with data-dense layout. Linked from Admin Dashboard.

As an admin I want to monitor user interactions across the platform. Implement the User Activity page: searchable/filterable table of user interactions (timestamps, user IDs, actions taken, AI model used), charts for activity trends over time (daily/weekly), export functionality. Cosmic theme. Linked from Admin Dashboard.

As a user I want to use the backend API for AI-generated insights on my dashboard. Implement FastAPI endpoints: GET /api/dashboard/insights (aggregate AI usage stats, recent activity, personalized summary), GET /api/dashboard/stats (metrics: messages sent, images analyzed, recommendations viewed). Query MySQL for relational data and MongoDB for unstructured activity logs.

As a user I want to use the backend API for AI chatbot interactions. Implement FastAPI endpoints: POST /api/chat (send message, receive AI response), GET /api/chat/history (retrieve conversation history), DELETE /api/chat/session (clear session). Integrate LiteLLM for routing between GPT, Claude, and Gemini models. Guest mode returns limited responses. JWT auth middleware for registered users.

As a user I want to use the backend API to upload images for AI-based analysis. Implement FastAPI endpoints: POST /api/upload/image (multipart upload, store in MongoDB, trigger AI analysis), GET /api/upload/results/{id} (retrieve analysis results). Integrate Google Nano Banana model for image processing. Return structured analysis response. JWT auth required.

As a user I want to use the backend API to receive personalized AI recommendations. Implement FastAPI endpoints: GET /api/recommendations (fetch personalized recommendations based on user profile and history), POST /api/recommendations/feedback (submit user feedback to improve recommendations). Use WeaviateDB for vector-based similarity search. JWT auth required.

As an admin I want to use the backend API to monitor system performance and user interactions. Implement FastAPI endpoints: GET /api/admin/metrics (system performance stats), GET /api/admin/users/activity (paginated user interaction logs), GET /api/admin/models/status (AI model health and usage stats). Admin role middleware protection. Query MySQL and MongoDB.

As an admin I want to use the backend API to manage AI model configurations. Implement FastAPI endpoints: GET /api/admin/models (list all models with configs), PUT /api/admin/models/{id}/config (update model parameters), POST /api/admin/models/{id}/dataset (upload training dataset), PATCH /api/admin/models/{id}/status (enable/disable model). Admin role protected. Update LiteLLM routing config dynamically.