jade-bot

As a frontend developer, implement the Navbar section for the Login page. This component includes a responsive navigation bar with links to Home, Categories, Orders, Profile, and Cart. It features a brand logo and a 'Sign In' call-to-action. The Navbar changes style when scrolled and includes a mobile menu toggle. Ensure the component is consistent with the existing Navbar from the Home page.

As a frontend developer, implement the AddressForm section which allows users to add or edit an address. Implement form validation for fields like street, city, postal code, and state. Use useState to manage form state and errors, and provide save and cancel functionality.

As a frontend developer, implement the LoginForm section for the Login page. This form includes fields for email and password, with validation for both. It features a 'Remember Me' checkbox, a toggle to show/hide the password, and a loading state during form submission. The form simulates an API call and displays validation errors.

As a frontend developer, implement the LoginSocialDivider section for the Login page. This component displays a simple divider with the text 'Or continue with' to separate the login form from social login options.

As a frontend developer, implement the LoginSocialButtons section for the Login page. This component includes buttons for Google and Apple login, each with a loading state and an icon. The buttons simulate an OAuth flow and display a success message upon completion.

As a frontend developer, implement the LoginFooterLinks section for the Login page. This component provides a link for users to sign up if they don't have an account, enhancing the user flow from login to registration.

As a frontend developer, implement the Footer section for the Login page. This component includes brand information, quick links, account management links, and support contact details. Ensure consistency with the existing Footer from the Home page.

As a frontend developer, implement the CategoriesHeader section for the Categories page. This section includes a breadcrumb navigation, a title, and a subtitle describing the categories available. Ensure the breadcrumb navigation is functional and visually consistent with the design.

As a frontend developer, implement the CategoriesFilters section for the Categories page. This section includes a search input, a sort dropdown, and filter chips for various categories. It also features a mobile filter drawer that can be toggled open and closed. Ensure the search and sort functionalities are interactive and the filter chips toggle correctly.

As a frontend developer, implement the CategoriesCardGrid section for the Categories page. This section displays a grid of category cards, each with an emoji, name, product count, and description. Ensure the grid is responsive and that clicking a card triggers the onCategoryClick function.

As a frontend developer, implement the CategoriesFeaturedBand section for the Categories page. This section highlights featured categories with a badge and displays them in a grid format. Ensure the grid is responsive and that clicking a featured category triggers the onCategoryClick function.

As a frontend developer, implement the CategoriesPagination section for the Categories page. This component provides pagination controls for navigating through multiple pages of categories. Ensure the pagination buttons are functional and update the current page correctly.

As a frontend developer, implement the OrdersHeader section which includes a title, subtitle, total order count, and interactive status badges. Each badge should display the count of orders per status and trigger an onBadgeClick event when clicked. The component uses BADGE_META for styling badges based on order status.

As a frontend developer, implement the DashboardSidebar section which includes a toggleable sidebar with navigation items such as Overview, Orders, Products, Delivery Partners, Customers, and Reports. The sidebar should be collapsible and include a mobile toggle button. Ensure the active state is visually distinct and the sidebar can be opened or closed using the toggleSidebar function.

As a frontend developer, implement the Breadcrumb section for the Product Details page. This section should display the navigation path from Home to the current product, using the Breadcrumb component. Ensure the links are correctly encoded and accessible, with proper aria-labels for navigation. This component may already exist from a previous page.

As a frontend developer, implement the OrdersSearch section which includes a search input field with a debounce effect using useState and useEffect hooks. The input allows users to search by Order ID, Customer Name, or Phone Number, and includes a clear button to reset the search term.

As a frontend developer, implement the OrdersFilterBar section which includes date range inputs, a status dropdown with checkboxes, and a sort dropdown. The component manages filter state using useState and allows users to filter orders by status, date, and sort order.

As a frontend developer, implement the OrdersList section which displays a list of orders with actions based on their status. The component includes interactive buttons for accepting, rejecting, viewing, and assigning orders, and uses STATUS_CLASS for styling. It also handles pagination and displays the total result count.

As a frontend developer, implement the OrderStats section which displays an overview of order statistics using cards. Each card shows an icon, value, and label, and triggers an onStatClick event when clicked. The cards are styled based on their status using color classes.

As a frontend developer, implement the DashboardHeader section which displays the current date and time, a welcome message, and action buttons for adding a product and assigning delivery. The header should dynamically update the date and time using JavaScript's Date object.

As a frontend developer, implement the DashboardStats section which displays various statistics such as Today's Orders, Total Revenue, and more. Each stat card should show an icon, value, and trend with color coding based on the trend value. Ensure the layout is responsive and visually appealing.

As a frontend developer, implement the DashboardOrdersTable section which displays a table of today's orders with columns for Order ID, Customer, Items, Amount, Status, Time, and Actions. Include a filter dropdown for order statuses and integrate the DashboardOrdersActions component for each order.

As a frontend developer, implement the DashboardInventoryTable section which displays a table of products with columns for Product Name, Category, Stock, Price, Status, Updated, and Actions. Include search and filter controls and integrate the DashboardInventoryActions component for each product.

As a frontend developer, implement the DashboardDeliveryPartners section which displays a table of delivery partners with columns for Partner, Phone, Assigned Orders, In Transit, Availability, and Actions. Integrate the DashboardDeliveryAssignment component for each partner.

As a frontend developer, implement the TrackingHeader section which displays the order ID, current status with dynamic styling based on the status, and estimated delivery time. It includes buttons for navigating back to orders and canceling the order. The status is managed using a useState hook and styles are applied conditionally based on the status.

As a frontend developer, implement the ProductsHeader section which includes a breadcrumb navigation and a dynamic product count display. The breadcrumb should highlight the current category and provide links to 'Home' and 'Products'. The product count should display the number of products found if provided. Ensure accessibility by using appropriate ARIA labels.

As a frontend developer, implement the DeliveryPageHeader section which includes displaying the partner's avatar, name, and online status. Implement the toggle functionality for online/offline status using the onToggleStatus prop. Include action buttons for filtering, sorting, and refreshing orders with SVG icons.

As a frontend developer, implement the CustomersHeader section which includes a header with a title, description, and action buttons for exporting data and adding a new customer. It also displays metric cards showing total customers, active customers, and open tickets using the MetricCard component. This section depends on the Dashboard page for layout consistency.

As a frontend developer, implement the OrderDetailsHeader section which includes breadcrumb navigation, order title, order date, and a back button. The breadcrumb allows navigation back to the home and orders pages, and the back button uses window.history.back() to return to the previous page.

As a Tech Lead, verify the end-to-end integration between the authentication frontend implementation and the authentication 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 ProductImageGallery section for the Product Details page. This section should allow users to view and interact with product images. Implement features such as thumbnail navigation, image zoom on click, and keyboard navigation for image cycling. Ensure accessibility with appropriate aria-labels and roles.

As a frontend developer, implement the ProductHeader section for the Product Details page. This section should display the product name, rating, review count, and stock status using the ProductHeader component. Ensure the star rating is accurately rendered and the stock status is visually distinct.

As a frontend developer, implement the ProductPricing section for the Product Details page. This section should display the product's sale price, original price, discount, specifications, and any available offers. Ensure the pricing details are formatted correctly and visually appealing.

As a frontend developer, implement the ProductActions section for the Product Details page. This section should allow users to adjust product quantity, add the product to the cart, and toggle wishlist status. Implement loading states and feedback for cart actions, simulating API calls.

As a frontend developer, implement the ProductReviews section for the Product Details page. This section should display customer reviews, allow filtering by star rating, and load more reviews on demand. Ensure the review breakdown is accurate and interactive.

As a frontend developer, implement the RelatedProducts section for the Product Details page. This section should display a carousel of related products, allowing users to scroll through and view additional product details. Implement smooth scrolling and ensure accessibility.

As a frontend developer, implement the DashboardOrdersActions component which provides action buttons for each order in the DashboardOrdersTable. The actions include Accept, Reject, Assign Partner, and View Details. Ensure each button is styled appropriately and includes a tooltip.

As a frontend developer, implement the DashboardInventoryActions component which provides action buttons for each product in the DashboardInventoryTable. The actions include Edit, Delete, and Add Stock. Ensure each button is styled appropriately and includes a tooltip.

As a frontend developer, implement the DashboardDeliveryAssignment component which provides action buttons for each delivery partner in the DashboardDeliveryPartners table. The actions include Assign Order, View Details, and Edit Partner. Ensure each button is styled appropriately and includes a tooltip.

As a frontend developer, implement the CartHeader section which includes a breadcrumb navigation with a link to continue shopping, a title 'Your Cart', and a badge displaying the number of items in the cart. This section should dynamically show the item count badge only when there are items in the cart. Ensure the layout is responsive and matches the design specifications.

As a frontend developer, implement the WishlistHeader section which includes a title, item count display, sort functionality, and a 'Clear All' button with confirmation dialog. The component uses state hooks to manage the confirmation dialog visibility and handles sort order changes via a dropdown. Ensure the 'Clear All' button is disabled when there are no items.

As a frontend developer, implement the ProductsPriceFilter section which allows users to filter products by price range. This includes a dual-range slider and numeric input fields for minimum and maximum prices. Ensure the slider updates dynamically as inputs change and vice versa. The component should call the onFilter callback with updated price values.

As a frontend developer, implement the ProductsStockFilter section which allows users to filter products based on stock availability. This includes checkboxes for 'In Stock', 'Low Stock', and 'Out of Stock'. The component should update its state and call the onFilter callback with the new filter state when any checkbox is toggled.

As a frontend developer, implement the ProductsSortBar section which provides sorting options for products. This includes a dropdown for selecting sort criteria and buttons to toggle between grid and list view modes. The component should handle sort changes and view mode toggles, and provide a button to clear all filters.

As a frontend developer, implement the ProductsGrid section which displays products in either a grid or list view. Each product is represented by a ProductCard component that includes product image, name, rating, price, and stock status. The card should also provide actions to add to cart or wishlist. Ensure the grid adapts to the selected view mode.

As a frontend developer, implement the ProductsPagination section which provides pagination controls for navigating through product pages. This includes buttons for previous/next page navigation and direct page number selection. Ensure the component handles edge cases like the first and last page correctly.

As a frontend developer, implement the DeliveryTabs section which includes tabs for 'Active', 'Pending Pickup', and 'Completed' orders. Each tab should display the count of orders and allow switching between tabs using the onTabChange prop.

As a frontend developer, implement the DeliveryOrderList section which displays a list of orders or a message indicating no orders are found when the list is empty. The component should render children elements representing individual orders.

As a frontend developer, implement the DeliveryOrderCard section which displays order details including customer name, shop name, delivery address, items, ETA, and distance. Implement actions for calling the customer and showing the route. The card should visually indicate the order status with a colored border.

As a frontend developer, implement the DeliveryMapSection which displays a static placeholder for an interactive map. Include location data for pickup and destination, and display stats for pickup distance, destination distance, and ETA.

As a frontend developer, implement the DeliveryStatsGrid section which displays statistics such as total deliveries, completed on time, pending count, and average rating. Each stat should be visually distinct with color coding.

As a frontend developer, implement the DeliveryOrderTimeline section which displays the timeline of an order's status changes. Each step should show the status, time, and optional message, with visual indicators for completed and pending steps.

As a frontend developer, implement the DeliveryOrderDetails section which displays detailed information about an order including customer details, pickup shop, delivery address, items, and special instructions.

As a frontend developer, implement the DeliveryActionPanel section which provides action buttons based on the order status. Implement actions for arriving at pickup, marking as delivered, calling the shop or customer, and reporting issues.

As a frontend developer, implement the OrderStatusBadge section which displays the current status of the order with a label, icon, and color-coded background. The status can be 'Delivered', 'In Transit', 'Pending', or 'Cancelled', each with specific styling defined in STATUS_CONFIG.

As a frontend developer, implement the OrderPricingSummary section which displays a breakdown of the order's pricing including subtotal, delivery fee, discount, taxes, and total. The section uses a formatCurrency function to format the currency values.

As a frontend developer, implement the OrderDeliveryAddress section which displays the delivery address, phone number, and optional instructions. It includes a copy button to copy the address to the clipboard and an edit button if the address is editable.

As a frontend developer, implement the OrderTimeline section which displays the progress of the order through various stages. Each stage is represented with a node and includes a status indicator and timestamp.

As a frontend developer, implement the OrderItemsList section which lists all items in the order with their images, names, quantities, unit prices, and line totals. It also displays the subtotal at the bottom.

As a frontend developer, implement the OrderDeliveryPartner section which displays information about the delivery partner including their photo, name, rating, and phone number. It includes a call button to contact the partner.

As a frontend developer, implement the OrderTrackingMap section which provides a live tracking map for the order. It includes an animated marker representing the delivery partner's location and an ETA display.

As a frontend developer, implement the OrderActionButtons section which provides various actions for the order such as reorder, download invoice, print receipt, report issue, and cancel order. The cancel button is conditionally rendered based on the order status.

As a frontend developer, implement the NotificationsHeader section which displays the title 'Notifications' and a badge showing the count of unread notifications. It includes a button to mark all notifications as read, which triggers the onMarkAllRead callback. Ensure the layout is responsive and matches the design specifications.

As a frontend developer, implement the HistoryHeader section to display the delivery history header with total deliveries and average rating. This section includes a title, subtitle, and statistics for total deliveries and average rating with a star icon. Ensure the component is styled according to the provided CSS and integrates with the existing delivery data.

As a frontend developer, implement the CartItemsList section which serves as a container for cart items. This section should be styled to accommodate dynamic content and ensure that it is responsive. The section will render children components representing individual cart items.

As a frontend developer, implement the CartEmpty section which is displayed when the cart has no items. This section includes an icon, a heading, a subtext, and a call-to-action link to start shopping. Ensure that the section is styled to be visually appealing and matches the design specifications.

As a frontend developer, implement the WishlistItems section which displays a grid of wishlist items using the WishlistCard component. Each card includes item details, stock status, and actions to add to cart or remove the item. Implement state management for showing a toast notification when an item is added to the cart. Ensure navigation to product details on card click.

As a frontend developer, implement the WishlistEmpty section which displays a message and actions when the wishlist is empty. Include a decorative icon, heading, and text encouraging users to browse categories or return to the home page. Ensure the layout is visually appealing and consistent with the overall design.

As a frontend developer, implement the CheckoutHeader section which includes a breadcrumb navigation linking back to the Cart page, a title for the Checkout page, and a step indicator showing the current step in the checkout process. Ensure the progress bar reflects the current step accurately. This component may already exist from a previous page.

As a frontend developer, implement the NotificationsFilters section which allows users to filter notifications by category using tabs. The active tab is highlighted with a moving indicator animated using GSAP. Ensure the tabs are responsive and the indicator adjusts on window resize. Implement the tab selection logic using useState and useCallback hooks.

As a frontend developer, implement the NotificationsCardList section which displays a list of notification cards. Each card shows an icon, subject, preview, and timestamp formatted using the formatTimestamp function. Use GSAP for entry animations of the cards. Ensure the list is responsive and matches the design specifications.

As a frontend developer, implement the NotificationsCardActions section which includes interactive notification cards with actions like 'View Order' or 'Claim Offer'. Use GSAP for animations and @react-three/fiber for 3D elements like the spinning gift. Ensure the section is responsive and matches the design specifications.

As a frontend developer, implement the NotificationsEmptyState section which displays a 3D animated 'empty bell' using @react-three/fiber when there are no notifications. Ensure the animation is smooth and the section is responsive. Provide appropriate messages and call-to-action links based on the active filter.

As a frontend developer, implement the NotificationsPagination section which provides pagination controls for navigating through multiple pages of notifications. Ensure the pagination is responsive and includes ellipsis for large numbers of pages. Implement logic to handle page changes and update the displayed notifications accordingly.

As a frontend developer, implement the HistoryDateRangeFilter section to allow users to filter delivery history by date range. This section includes date input fields for 'From' and 'To' dates, and 'Apply' and 'Reset' buttons. Ensure the component manages local state for date inputs and triggers the onApply callback with the selected date range.

As a frontend developer, implement the HistoryStatusAndSort section to provide filtering by delivery status and sorting options. This section includes dropdowns for status ('All', 'Completed', 'Cancelled') and sort order ('Newest First', 'Oldest First', 'Highest Amount'). Ensure the component triggers onStatusChange and onSortChange callbacks with the selected values.

As a frontend developer, implement the HistorySearchInput section to allow users to search delivery history by Order ID or Customer Name. This section includes a text input with a search icon and a clear button. Ensure the component manages the input value and triggers the onChange callback with the updated search term.

As a frontend developer, implement the HistoryCardList section to display a list of delivery cards in a table format. This section includes columns for Order ID, Customer, Date & Time, Amount, Status, and Actions. Ensure the component formats dates, applies styles for different statuses, and renders actions using the renderActions prop.

As a frontend developer, implement the ProfileHeader section which includes a user avatar with hover effects to display an overlay for uploading a photo, user information such as name, email, and membership date, and an 'Edit Profile' button. Ensure the avatar hover state is managed using useState.

As a frontend developer, implement the CartItemQuantity component which allows users to adjust the quantity of a cart item. This component includes decrement and increment buttons, and an input field for manual quantity entry. Ensure that the input validation prevents non-numeric and negative values, and that the component is accessible with appropriate ARIA labels.

As a frontend developer, implement the CartItemActions component which provides buttons for removing an item from the cart and saving it for later. Ensure that the buttons are styled according to the design and include icons for visual clarity. The component should handle click events to trigger the appropriate actions.

As a frontend developer, implement the CartPriceBreakdown section which displays a detailed price summary including subtotal, delivery fee, taxes, discounts, and grand total. Ensure that the discount line is only shown when applicable. The section should be responsive and formatted to match the design specifications.

As a frontend developer, implement the CheckoutDeliveryAddress section which allows users to select from saved addresses or add a new address. Implement state management for selected address and form visibility using useState. Ensure the form for adding a new address is functional and styled correctly.

As a frontend developer, implement the CheckoutDeliveryMethod section which allows users to select a delivery method from available options. Use useState to manage the selected delivery method and ensure the UI reflects the selection with appropriate styling.

As a frontend developer, implement the CheckoutPaymentMethodSelect section which allows users to select a payment method. Ensure the component uses props to manage the active method and triggers the onSelect callback when a method is selected.

As a frontend developer, implement the CheckoutPromoCode section which allows users to apply a promo code. Use useState to manage the input code, applied state, and error messages. Ensure the component correctly validates and applies discounts based on valid promo codes.

As a frontend developer, implement the HistoryListActions section to provide action buttons for each delivery card. This section includes 'View Details' and 'Invoice' buttons, and displays a rating if available. Ensure the component triggers onViewDetails and onDownloadInvoice callbacks with the orderId.

As a frontend developer, implement the HistoryPagination section to manage pagination of the delivery history list. This section includes controls for navigating pages, displaying current page info, and selecting items per page. Ensure the component triggers onPageChange and onItemsPerPageChange callbacks with the appropriate values.

As a frontend developer, implement the CartCheckoutActions section which includes links for proceeding to checkout and continuing shopping. Ensure that the primary action is visually distinct and that the layout is responsive. The links should navigate to the appropriate pages when clicked.

As a frontend developer, implement the CheckoutPaymentForm section which dynamically renders different forms based on the selected payment method. Ensure the form fields are correctly displayed for card, UPI, wallet, and net banking options, and handle user input appropriately.

As a frontend developer, implement the CheckoutOrderSummary section which displays a summary of the cart items, subtotal, delivery fee, tax, and total amount. Ensure the component updates the total based on any applied discounts and allows users to toggle the summary view.