Implement checkout and payment flow with new components

- Added Checkout and Payment pages to handle user authentication and order processing.
- Introduced MockPayPalButton for simulating payment during development.
- Updated CartSheet and CartSidebar components to navigate to the new checkout page.
- Enhanced Cart UI with responsive design for mobile and desktop views.
- Implemented order confirmation and success pages to provide feedback after payment completion.

These changes complete the checkout and payment functionality, improving the overall user experience and ensuring a seamless transition from cart to order confirmation.

server/utils/cart-helpers.ts

@@ -1,5 +1,5 @@
 import type { H3Event } from 'h3'
-import { and, eq, inArray } from 'drizzle-orm'
+import { and, eq, inArray, asc } from 'drizzle-orm'
 import { carts, cartItems, products } from '../database/schema'
 
 // Re-export shared types
@@ -89,6 +89,7 @@ export async function getCartWithItems(cartId: string): Promise<CartSummary> {
     with: {
       product: true,
     },
+    orderBy: asc(cartItems.addedAt), // Sort by addedAt to maintain stable order
   })
 
   // Separate available and unavailable items