CommerceHub

As a frontend developer, implement the Navbar section for the Login page. This includes a responsive navigation bar with a logo, links to Categories, Products, and Dashboard, a theme toggle button for light/dark mode, and a cart icon. The Navbar should be collapsible with a hamburger menu for mobile views. Ensure the theme toggle updates the UI theme state. Note: This component may already exist from the Landing Page.

As a Backend Developer, implement business rules for product availability, order processing, and coupon validation. Ensure rules are enforced consistently across the platform.

As a Backend Developer, integrate Stripe and Razorpay for secure payment processing. Ensure payment flows are seamless and handle success and failure scenarios.

As a Backend Developer, implement JWT authentication middleware to secure API endpoints. Ensure user roles are correctly validated for access control.

As a Data Engineer, create database migrations for initial schema setup and future updates. Ensure migrations are reversible and tested.

As a QA Engineer, develop end-to-end tests for critical user flows such as product search, checkout, and order tracking. Ensure tests cover both frontend and backend interactions.

As a Tech Lead, verify the end-to-end integration between the Checkout frontend implementation and the Checkout backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.

As a frontend developer, implement the LoginFormContainer section for the Login page. This form includes fields for email and password, with validation for both. Implement a 'Remember Me' checkbox and a 'Show Password' toggle. The form should handle submission with a simulated login request and display loading states. Ensure error messages are shown for invalid inputs.

As a frontend developer, implement the LoginSocialAuth section for the Login page. This section includes buttons for social login with Google and GitHub. Each button should trigger a demo alert for OAuth flow initiation. Ensure the layout is responsive and matches the design specifications.

As a frontend developer, implement the Footer section for the Login page. This includes a brand logo, a description of CommerceHub, and social media links. Ensure the layout is consistent with the rest of the site and responsive. Note: This component may already exist from the Landing Page.

As a frontend developer, implement the SignupHero section for the Signup page. This section includes a title and subtitle encouraging users to create an account on CommerceHub. The section should be styled to be visually appealing and responsive, using the provided CSS.

As a frontend developer, implement the SignupFormPanel section for the Signup page. This section includes a form with fields for email, password, confirm password, and role selection. It uses useState for form state management and includes validation logic for email format, password length, and terms acceptance. The form should handle submission with a simulated API call and display loading states and error messages appropriately.

As a frontend developer, implement the SignupSocialLogin section for the Signup page. This section provides buttons for social login options like Google and GitHub. It uses useState to manage loading states for each provider and simulates an OAuth flow with a timeout. Ensure buttons are styled according to the design and handle disabled states during loading.

As a frontend developer, implement the SignupBenefits section for the Signup page. This section displays a grid of benefit cards, each with an icon, title, and description. The benefits include features like secure checkout, fast delivery, and 24/7 support. Ensure the grid is responsive and visually aligned with the overall page design.

As a frontend developer, implement the CategoriesHero section for the Categories page. This section includes a title, subtitle, and a badge displaying the number of categories. It also features a search input for products, brands, and categories, and a button to open filters. Ensure the layout is responsive and visually appealing.

As a frontend developer, implement the CategoryGrid section for the Categories page. This section displays a grid of categories with icons, names, and product counts. It supports sorting by popularity, newest, and sales, and filtering by trending categories. Ensure the grid is responsive and the sorting/filtering logic is correctly implemented.

As a frontend developer, implement the CategoriesFilter section for the Categories page. This component allows users to filter categories by 'All' or 'Trending' and sort them by popularity, newest, or sales. Ensure the filter and sort options update the displayed categories correctly.

As a frontend developer, implement the PopularCategories section for the Categories page. This section features a carousel of trending categories with images, icons, and labels such as 'Trending Now' and 'Best Seller'. Ensure the carousel is responsive and images are lazy-loaded for performance.

As a frontend developer, implement the CategoriesCTA section for the Categories page. This section includes a headline, text, and actions for exploring all categories or signing up for email alerts. It features a primary button and a newsletter subscription form with email input and subscribe button.

As a frontend developer, implement the AdminSidebar section which includes a profile area with an avatar and role display, and a navigation menu with items such as Dashboard Overview, User Management, Seller Management, and more. Each menu item should have an icon and be clickable to change the active section. The sidebar should support mobile view with a toggle for opening and closing.

As a frontend developer, implement the SellerPageHeader section which includes a toggleable sidebar menu button, breadcrumb navigation, and notification button with unread count. Ensure the header reflects the active status and integrates with the sidebar toggle functionality. This section depends on the Login page's Navbar implementation.

As a frontend developer, implement the AdminHeader section which dynamically displays the title and breadcrumb based on the active section. It includes an action button that changes its label and function according to the section, such as 'Generate Report' or 'Add User'.

As a frontend developer, implement the AdminOverviewMetrics section which displays various metrics such as Total Users, Active Sellers, and Monthly Revenue. Each metric card should include an icon, value, label, and a trend indicator showing percentage change with an up or down arrow.

As a frontend developer, implement the AdminUsersTable section which displays a paginated table of users with columns for name, email, status, join date, and last active date. Implement sorting functionality for each column and filtering based on search term and status.

As a frontend developer, implement the AdminSellersTable section which displays a paginated table of sellers with columns for shop name, email, product count, revenue, rating, and verification status. Implement sorting functionality for each column and filtering based on search term and verification status.

As a frontend developer, implement the AdminCategoriesList section which displays a list of categories with options to edit commission rates and toggle featured status. Implement search functionality to filter categories by name.

As a frontend developer, implement the ProductsHeader section which includes breadcrumb navigation, a filter toggle button, a dynamic product count display, and a search input field. The search input should update the searchQuery state on change. Ensure the filter toggle button updates the isFilterOpen state. This section depends on the Categories page to ensure proper navigation.

As a frontend developer, implement the AdminUsersActions section which provides search and filter controls for the users table. Include a search input for filtering by name, email, or ID, and a dropdown for filtering by user status. Add bulk action buttons for approving or suspending selected users.

As a frontend developer, implement the AdminSellersActions section which provides search and filter controls for the sellers table. Include a search input for filtering by shop name, email, or ID, and a dropdown for filtering by verification status. Add bulk action buttons for verifying or suspending selected sellers.

As a frontend developer, implement the AdminCategoriesActions section which provides a search input for filtering categories by name and a button to add new categories.

As a frontend developer, implement the CartHeader section which displays the breadcrumb navigation and the cart title with the item count badge. Ensure the breadcrumb links are functional and the item count dynamically updates based on the 'itemCount' prop. This component may already exist from a previous page.

As a frontend developer, implement the CartItemsList section which displays a list of cart items or a message if the cart is empty. Each item should include an image, name, seller, price, and optional controls rendered by 'renderControls'. Ensure the 'Continue Shopping' button navigates correctly.

As a frontend developer, implement the CartPricingSummary section which displays the order summary including subtotal, tax, shipping, and total. Handle conditional rendering for coupon discounts and free shipping incentives. Ensure all monetary values are formatted correctly.

As a frontend developer, implement the CheckoutBreadcrumb section to display the user's progress through the checkout process. This section uses the `framer-motion` library to animate the progress bar and allows users to navigate back to completed steps. The component manages state with `useState` to track the current step and calculates the progress percentage dynamically.

As a frontend developer, implement the CartItemControls section which provides controls for each cart item, including quantity adjustment, save for later, and remove item functionality. Implement state management for confirmation dialogs and ensure all buttons are accessible.

As a frontend developer, implement the CartCouponSection which allows users to apply and remove coupon codes. Handle input changes, apply actions on 'Enter' key press, and display messages for coupon application status. Ensure the UI updates based on the 'appliedCoupon' state.

As a frontend developer, implement the ShippingAddressForm section to allow users to enter or select a saved shipping address. This form includes validation for fields like email and ZIP code, and manages form state using `useState`. It also provides options for users to toggle between saved addresses and a new address form.

As a frontend developer, implement the ShippingMethodSelector section to allow users to choose a shipping method. This component uses `useState` to manage the selected shipping option and displays options with details like delivery estimates and costs. It includes radio buttons for selection and visual indicators for the chosen method.

As a frontend developer, implement the PaymentMethodSelector section to allow users to select a payment gateway and method. This component uses `framer-motion` for animations and `useState` to manage the selected gateway and method. It includes a toggle for gateways and displays saved payment methods with icons and details.

As a frontend developer, implement the DashboardHeader section which includes a breadcrumb navigation and a title. This section should establish the page-level dependency with the Checkout page by including task IDs from the Checkout page. The breadcrumb should link to the home page and display the current page as 'Dashboard'.

As a frontend developer, implement the CartCheckoutCTA section which provides a button to proceed to checkout. Handle button states for 'isCheckingOut' and 'cartEmpty', and display the total amount or an empty cart message accordingly.

As a frontend developer, implement the PaymentCardForm section to allow users to enter credit card details. This component includes card type detection, number formatting, and a 3D shield animation using `@react-three/fiber`. It manages form state with `useState` and provides visual feedback for card type and validity.

As a frontend developer, implement the DashboardProfileDropdown section which includes a profile avatar, name, status badge, and a dropdown menu with options to view profile, settings, and logout. The dropdown should toggle open/close on button click and close on mouse leave.

As a frontend developer, implement the DashboardNotificationBell section which includes a bell icon with a badge showing the number of notifications. Clicking the bell toggles a dropdown showing a list of notifications with timestamps and a link to view all notifications. Unread notifications should be styled differently.

As a frontend developer, implement the DashboardSidebar section which includes navigation items with icons for Overview, Orders, Wishlist, Profile, and Settings. The sidebar should be toggleable on mobile devices and include a logout button.

As a frontend developer, implement the DashboardWelcome section which displays a personalized greeting based on the time of day and a message about the user's account status. It should also display a badge indicating the user's membership level.

As a frontend developer, implement the DashboardStatsGrid section which displays a grid of statistical cards. Each card shows an icon, label, value, and trend indicator with positive or negative styling.

As a frontend developer, implement the DashboardOrdersSection which includes a header with a title 'Recent Orders' and a link to view all orders. This section serves as a header for the orders display.

As a frontend developer, implement the DashboardWishlistSection which displays a grid of wishlist items. Each item includes an image, name, price, rating, and a button to add the item to the cart.

As a frontend developer, implement the CartActions section which includes buttons for saving and sharing the cart, and a link to continue shopping. Display success messages for save and share actions, and include trust indicators for secure checkout and free shipping.

As a frontend developer, implement the BillingAddressForm section to allow users to enter billing address details. This form includes validation for required fields and manages state with `useState`. It provides an option to use a different billing address and validates fields like postal code and phone number.

As a frontend developer, implement the DashboardOrderCards section which displays a list of order cards. Each card includes order ID, status, product image, name, order date, total, and action buttons for tracking, canceling, and reordering.

As a frontend developer, implement the OrderConfirmationAction section to handle the final order confirmation. This component includes a 3D security badge animation using `@react-three/fiber` and manages state for order status and agreement checkbox. It provides feedback on order placement and displays applied discounts.

As a frontend developer, implement the CheckoutOrderSummary section to display a summary of the order including items, discounts, and total cost. This component uses `useMemo` for calculating totals and discounts, and `framer-motion` for animations. It allows users to apply coupons and view detailed order breakdowns.