venus-website

As a user, I want to use the Outfit Detail page frontend so that I can view comprehensive information about a specific outfit before deciding to book an appointment. Implement the Outfit Detail page based on the existing JSX design (v2) which includes: a large editorial-style outfit image gallery (multiple angles with thumbnail strip), outfit name and designer in serif typography, rental price in INR, size availability badges, outfit description and care notes, occasion tags (e.g., Wedding, Party), a prominent 'Book Appointment' CTA button in blush pink, and a related outfits section below. Page reached from Collection. Links to: Booking.

As an admin, I want to use the Login page frontend so that I can sign in to access the dashboard and manage bookings and inventory. Implement the Login page based on the existing JSX design (v2) which includes: a two-column desktop layout (editorial fashion image panel on the left with tagline overlay; login card on the right with brand wordmark 'The Velvet Hanger', 'Welcome Back' heading, email + password fields with show/hide toggle, 'Forgot Password?' blush-pink link, 'Sign In' pill CTA, 'Continue as Guest' ghost button, and 'Request Access' register prompt). On mobile, image column is hidden and card goes full-screen. Styled in luxury beige/ivory theme. Page links to: Dashboard (on successful login). Must be responsive and mobile-friendly.

As a user, I want to use the Home page frontend so that I can view the hero section, browse categories, learn how it works, explore featured outfits, read testimonials, and book an appointment. Implement the Home page based on the existing JSX design (v2) which includes: NavBar, Hero (full-viewport editorial image, headline 'Rent Designer Looks Without Buying'), TrustBar, InteractiveClothingRack (horizontal scroll with hover tooltips), FeaturedDesignerPieces (carousel), HowItWorks (4-step animated flow: Browse → Select → Rent → Return), CategoryBrowse (Bridal Lehengas, Party Gowns, Cocktail Dresses, Pre-Wedding Shoot Outfits), Testimonials (slider), InstagramGallery (3x3 grid), BookingCTA ('Book Your Outfit Now' button), and Footer. Page links to: Collection, How It Works, Booking. Existing JSX design (v2) is available — AI percentage is high.

As a user, I want to use the How It Works page frontend so that I can understand the complete rental process step-by-step before browsing the collection. Implement the How It Works page based on the existing JSX design (v2) which includes: a full-page editorial layout explaining the 4-step rental flow (Browse → Select → Rent → Return) using large step illustrations or icons, descriptive copy for each step, an FAQ accordion section addressing common questions (deposit, sizing, return policy, delivery), and a CTA at the bottom ('Start Browsing' linking to Collection). Features smooth scroll animations and the signature luxury aesthetic. Page reached from Home. Links to: Collection.

As a user, I want to use the Collection page frontend so that I can filter and browse all available designer outfits by category and find the perfect look for my occasion. Implement the Collection page based on the existing JSX design (v2) which includes: CollectionHero editorial banner, sticky FilterBar (category pills: Bridal Lehengas, Party Gowns, Cocktail Dresses, Pre-Wedding, All; Sort By dropdown; size multi-select; price-range trigger), ActiveFiltersStrip with dismissible lavender chip tags, CollectionGrid (4-col desktop / 3-col tablet / 2-col mobile outfit cards with hover zoom and 'View Details' overlay), EmptyState (hanger illustration, 'No Pieces Found', Clear Filters + Browse All CTAs), and Pagination. Page reached from Home (Browse Categories). Links to: Outfit Detail.

As a user, I want to use the Booking page frontend so that I can book a studio appointment to try on a selected outfit for my special occasion. Implement the Booking page based on the existing JSX design (v2) which includes: BookingHero ('Reserve Your Look'), BookingStepIndicator (4-step progress: Appointment Type → Date & Time → Your Details → Confirm), AppointmentTypeSelector (selectable cards: Bridal/Lehenga Trial, Party & Gown Fitting, Pre-Wedding Shoot Styling, Cocktail & Occasion Wear), DateTimePickerSection (inline calendar widget + time slot pills: 10AM–5PM, IST timezone), OutfitPreferenceForm (optional: categories multi-select, size, occasion date, budget range, special requests), PersonalDetailsForm (Full Name, Phone +91, Email, City with floating labels), BookingSummaryPanel (sticky recap card), ConfirmationCTA ('Confirm My Appointment' + WhatsApp contact + reassurance icons), and HowItWorksReminder band. Page reached from Outfit Detail and Home CTA.

As a user/admin, I want to use the backend API for appointment bookings so that users can submit booking requests and admins can manage them. Implement FastAPI endpoints: POST /bookings (user: submit appointment — name, phone, email, outfit_id, preferred_date in IST, occasion, notes), GET /bookings (admin: list all bookings with filters by status/date), GET /bookings/{id} (admin: booking detail), PUT /bookings/{id}/status (admin: update status — Confirmed, Pending, Cancelled), DELETE /bookings/{id} (admin: cancel booking). Use MySQL with Alembic for the Booking model. Send email/WhatsApp confirmation on booking creation (optional async task).

As an admin, I want to use the Dashboard page frontend so that I can view a summary of bookings, inventory status, and recent activity at a glance. Implement the Dashboard page based on the existing JSX design (v2) with: a sticky TopBar with The Velvet Hanger branding and admin avatar, a left Sidebar with navigation links (Dashboard, Bookings, Inventory), and a main content area containing: summary stats cards (total bookings, active rentals, outfits in inventory), a recent bookings table preview, and quick action buttons. Styled in the luxury beige/ivory theme. Page reached from Login. Links to: Bookings, Inventory.

As a frontend developer, I want to integrate the Collection and Outfit Detail pages with the backend Outfits API so that users see real outfit data from the database. Wire up GET /outfits with filter parameters to the Collection page filter UI. Wire up GET /outfits/{id} to the Outfit Detail page. Implement loading skeletons in the luxury aesthetic, empty state handling, and error states. Ensure INR prices are correctly displayed. Implement React Query or useState/useEffect for data fetching.

As a frontend developer, I want to integrate the Booking page form with the backend Bookings API so that users can successfully submit appointment requests and receive confirmation. Wire up POST /bookings to the Booking page form submission. Implement form validation (required fields, phone number format +91, date picker with IST timezone). Display a success confirmation screen with booking summary after submission. Handle API error states gracefully with user-friendly messages in the luxury UI style.

As an admin, I want to use the Bookings page frontend so that I can view, manage, and update all appointment bookings from customers. Implement the Bookings page based on the existing JSX design (v2) with: a data table listing all appointments (customer name, outfit, date, status), filter/search controls, status badge chips (Confirmed, Pending, Cancelled) styled in the brand palette, action buttons to update or cancel appointments, and pagination. Sidebar navigation remains consistent with Dashboard layout. Page is reached from Dashboard.

As an admin, I want to use the Inventory page frontend so that I can view all outfits in the studio's collection, add new outfits, and edit existing ones. Implement the Inventory page based on the existing JSX design (v2) with: a grid/list view of all outfits (image thumbnail, outfit name, designer, category, rental price in INR, size availability, availability status), filter and search by category (Bridal Lehenga, Party Gown, Cocktail Dress, Pre-Wedding), an 'Add Outfit' button opening an add outfit form/modal, and edit/delete actions per outfit row. Sidebar navigation consistent with Dashboard layout. Page is reached from Dashboard.

As an admin, I want to use the Dashboard, Bookings, and Inventory pages integrated with backend APIs so that I can manage real data. Wire up: Dashboard stats cards to aggregated booking/inventory counts API, Bookings page table to GET /bookings with status filter and PUT /bookings/{id}/status for status updates, Inventory page grid to GET /outfits with Add (POST /outfits), Edit (PUT /outfits/{id}) and Delete (DELETE /outfits/{id}) actions. Implement optimistic UI updates and toast notifications for admin actions in the luxury theme.