update

app/(user)/(home)/home.client.tsx

@@ -1,18 +1,18 @@
 'use client'
 
 import clsx from 'clsx'
-import { Product } from '../products/products.client'
+import { ProductSkeleton } from '../products/products.client'
 import styles from './home.module.css'
 import Link from 'next/link'
 import { ArrowRightIcon, TicketIcon } from '@heroicons/react/24/outline'
 import Image from 'next/image'
 import IntroImg from '@/app/assets/icons/welcome.svg'
 import { useToast } from '@/components/user/toast/toast.index'
-import { ProductWithPriceAndStock } from '@/app/admin/(admin)/product/products/products.interface'
 import { Category } from '@prisma/client'
 import { useXScroll } from './home.utils'
 import { useEffect } from 'react'
 import { useIntersectionObserver } from '@/libs/intersection-observer'
+import { Slide, SlideItem, SlideSkeleton } from '@/components/user/slide/slide.client'
 
 export function SearchBar() {
     const { showToast } = useToast()
@@ -61,8 +61,9 @@ export function ProductSlide({ children }: { children: React.ReactNode }) {
     }, [])
 
     return (
-        <div className={styles.latestProducts}>
-            <div ref={elemRef} className={styles.slideContainer} onScroll={handleScroll}>
+        <Slide
+            id="home"
+            start={
                 <div className={clsx(styles.slideItem, styles.slideItemStart)}>
                     <div className={styles.introCard}>
                         <div className={styles.introMedia}>
@@ -72,15 +73,18 @@ export function ProductSlide({ children }: { children: React.ReactNode }) {
                             <span>Discover Joy </span>in Every Cart – Your One-Stop Shop for Style, Savings, and Smiles!
                         </div>
                     </div>
-                </div>
-                { children }
+               </div>
+            }
+            end={
                 <div className={clsx(styles.slideItem, styles.slideItemEnd)}>
                     <Link href="/products?order=latest" className={styles.goButton}>
                         <ArrowRightIcon />
                     </Link>
                 </div>
-            </div>
-        </div>
+            }
+        >
+            { children }
+        </Slide>
     )
 }
 
@@ -104,26 +108,28 @@ export function CategorySkeleton() {
 
 export function ProductSlideSkeleton() {
     return (
-        <div className={clsx(styles.latestProducts, "skeleton")}>
-            <div className={styles.slideContainer}>
-                <div className={clsx(styles.slideItem, styles.slideItemStart)}>
-                    <div className={styles.introCard}>
-                        <div className={styles.introMedia}>
-                            <Image src={IntroImg} width={200} height={150} alt='intro' />
-                        </div>
-                        <div className={styles.introMessage}>
-                            <span>Discover Joy </span>in Every Cart – Your One-Stop Shop for Style, Savings, and Smiles!
-                        </div>
+        <SlideSkeleton>
+            <div className={clsx(styles.slideItem, styles.slideItemStart)}>
+                <div className={styles.introCard}>
+                    <div className={styles.introMedia}>
+                        <Image src={IntroImg} width={200} height={150} alt='intro' />
+                    </div>
+                    <div className={styles.introMessage}>
+                        <span>Discover Joy </span>in Every Cart – Your One-Stop Shop for Style, Savings, and Smiles!
                     </div>
-                </div>
-                <div className={clsx(styles.slideItem, styles.itemSkeleton)}></div>
-                <div className={clsx(styles.slideItem, styles.itemSkeleton)}></div>
-                <div className={clsx(styles.slideItem, styles.slideItemEnd)}>
-                    <Link href="/products" className={styles.goButton}>
-                        <ArrowRightIcon />
-                    </Link>
                 </div>
             </div>
-        </div>
+            <SlideItem>
+                <ProductSkeleton />
+            </SlideItem>
+            <SlideItem>
+                <ProductSkeleton />
+            </SlideItem>
+            <div className={clsx(styles.slideItem, styles.slideItemEnd)}>
+                <Link href="/products" className={styles.goButton}>
+                    <ArrowRightIcon />
+                </Link>
+            </div>
+        </SlideSkeleton>
     )
 }

app/(user)/(home)/home.module.css

@@ -62,7 +62,7 @@
 .slideItem {
     min-width: 60%;
     padding: 0;
-    
+
     scroll-snap-align: center;
 }
 .itemSkeleton {

app/(user)/(noindex)/account/account.actions.ts

@@ -7,6 +7,7 @@ import prisma from "@/libs/prisma"
 import { getStockAndPrices } from "@/app/admin/(admin)/product/products/products.utils"
 import { ProductWithPriceAndStock } from "../../products/product.interface"
 import { PER_PAGE } from "@/libs/const"
+import { OrderWithPayemntAndStatus } from "./account.interface"
 
 
 export async function onLogout(prevProp: any, formData: FormData) {
@@ -88,7 +89,7 @@ export async function getOrders(customerId: number, page: number = 1) {
         skip: start,
         take: PER_PAGE,
         orderBy: { createDate: "desc" }
-    })
+    }) as OrderWithPayemntAndStatus[]
 
     return orders
 }

app/(user)/(noindex)/account/account.client.tsx

@@ -10,6 +10,9 @@ import { CustomerType } from '@/libs/prisma/definations'
 import clsx from 'clsx'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
+import { SlideItem, SlideSkeleton } from '@/components/user/slide/slide.client'
+import { ProductSkeleton } from '../../products/products.client'
+import { OrderWithPayemntAndStatus } from './account.interface'
 
 export function UserDetail({ user, children }: { user: CustomerType, children: React.ReactNode }) {
     return (
@@ -56,10 +59,26 @@ export function LogoutForm() {
     )
 }
 
-export function MoreButton({ id }: { id: number }) {
+export function OrderItem({ children }: { children: React.ReactNode }) {
+    return (
+        <div className={styles.orderItem}>
+            { children }
+        </div>
+    )
+}
+
+export function OrderItemDetail({ order }: { order: OrderWithPayemntAndStatus }) {
+    return (
+        <div className={styles.orderItem}>
+            { order.id } | { order.orderStatus.name }
+        </div>
+    )
+}
+
+export function MoreButton({ id, name }: { id: number, name: string; }) {
     return (
         <div className={clsx(styles.slideItem, styles.slideItemEnd)}>
-            <Link href={`/account/${id}/favourites`} className={styles.goButton}>
+            <Link href={`/account/${id}/${name}`} className={styles.goButton}>
                 <ArrowRightIcon />
             </Link>
         </div>
@@ -95,6 +114,19 @@ export function UserDetailSkeleton() {
     )
 }
 
+export function FavouriteSkeleton() {
+    return (
+        <SlideSkeleton>
+            <SlideItem>
+                <ProductSkeleton />
+            </SlideItem>
+            <SlideItem>
+                <ProductSkeleton />
+            </SlideItem>
+        </SlideSkeleton>
+    )
+}
+
 export function LogoutFormSkeleton() {
     return (
         <div className={styles.logoutFrom}>

app/(user)/(noindex)/account/account.interface.ts

@@ -1,7 +1,13 @@
-import { Customer, CustomerAddress, Status } from "@prisma/client";
+import { Customer, CustomerAddress, Order, OrderStatus, Status } from "@prisma/client";
+import { CustomerPaymentWithPayment } from '../cart/[orderId]/checkout.interface';
 
 
 export interface CustomerEdit extends Customer {
     status: Status;
     address: CustomerAddress[];
+}
+
+export interface OrderWithPayemntAndStatus extends Order {
+    customerPayment: CustomerPaymentWithPayment;
+    orderStatus: OrderStatus;
 }

app/(user)/(noindex)/account/account.module.css

@@ -43,6 +43,9 @@
     margin-top: var(--space-3);
 }
 
+.orderItem {
+    min-width: 80%;
+}
 
 .slideItemEnd {
     min-width: calc(36px + var(--space-5));

app/(user)/(noindex)/account/account.server.tsx

@@ -2,18 +2,16 @@
 
 import { redirect } from "next/navigation"
 import { getUser } from "../../user.actions"
-import { LogoutForm, MoreButton, UserDetail } from "./account.client"
+import { FavouriteSkeleton, LogoutForm, MoreButton, OrderItem, OrderItemDetail, UserDetail } from "./account.client"
 import { PageSubTitle, PageTitle, TextSkeleton } from "@/components/user/utils/utils.client"
-import { wait } from "@/libs/utils"
-import { getCustomerAddress, getFavouriteProducts } from "./account.actions"
+import { getCustomerAddress, getFavouriteProducts, getOrders } from "./account.actions"
 import { Suspense } from "react"
-import { RelatedProdcutSkeleton, RelatedProducts, SlideItem } from "../../products/[id]/related/related-products.client"
 import { RemoveFavouriteForm } from "./[id]/favourites/favourites.client"
 import { formatAddress } from "../../user/user.utils"
-import { FavouriteSkeleton, Product } from "../../products/products.client"
+import { Product } from "../../products/products.client"
+import { Slide, SlideItem } from "@/components/user/slide/slide.client"
 
 export async function ServerLogoutForm() {
-    // await wait(3000)
     const user = await getUser()
     if (!user) redirect('/')
 
@@ -28,11 +26,19 @@ export async function ServerLogoutForm() {
             <Suspense fallback={
                 <>
                     <PageSubTitle title="Favourites" />
-                    <RelatedProdcutSkeleton />
+                    <FavouriteSkeleton />
                 </>
             }>
                 <ServerFavourites customerId={user.id} />
             </Suspense>
+            <Suspense fallback={
+                <>
+                    <PageSubTitle title="Orders" />
+                    <FavouriteSkeleton />
+                </>
+            }>
+                <ServerOrders customerId={user.id} />
+            </Suspense>
             <LogoutForm />
         </>
     )
@@ -53,7 +59,7 @@ export async function ServerFavourites({ customerId }: { customerId: number }) {
     return (
         <>
             <PageSubTitle title="Favourites" />
-            <RelatedProducts id={customerId} more={<MoreButton id={customerId} />}>
+            <Slide id="favourites" end={<MoreButton id={customerId} name="favourites" />}>
                 {
                     products.map((item) => (
                         <SlideItem key={item.id}>
@@ -65,7 +71,27 @@ export async function ServerFavourites({ customerId }: { customerId: number }) {
                         </SlideItem>
                     ))
                 }
-            </RelatedProducts>
+            </Slide>
+        </>
+    )
+}
+
+export async function ServerOrders({ customerId }: { customerId: number }) {
+    const orders = await getOrders(customerId)
+    if (!orders.length) return <></>
+    console.log('ORDERS', orders)
+    return (
+        <>
+            <PageSubTitle title="Orders" />
+            <Slide id="orders" end={<MoreButton id={customerId} name="orders" />}>
+                {
+                    orders.map(order => (
+                        <OrderItem key={order.id}>
+                            <OrderItemDetail order={order} />
+                        </OrderItem>
+                    ))
+                }
+            </Slide>
         </>
     )
 }

app/(user)/products/[id]/product.server.tsx

@@ -6,10 +6,8 @@ import { ImageGallery } from "./gallery/gallery.client"
 import { redirect } from "next/navigation"
 import { ProductActions, ProductClassTable, ProductDetail, ProductTitle } from "./product.client"
 import { getStockAndPrices } from "@/app/admin/(admin)/product/products/products.utils"
-import { RelatedProdcutSkeleton, RelatedProducts } from './related/related-products.client'
+import { RelatedProdcutSkeleton } from './related/related-products.client'
 import { Suspense } from 'react'
-import { ServerFavourite } from '../products.server'
-import { getUser } from '../../user.actions'
 import { ServerRelatedProduct } from './related/related-product.server'
 
 export async function ServerProduct({ id }: { id: number }) {
@@ -30,8 +28,12 @@ export async function ServerProduct({ id }: { id: number }) {
                 )
             }
             <ProductActions productClass={product.productClasses} stock={stockTotal} />
-            <PageSubTitle title="Related Ptoducts" />
-            <Suspense fallback={<RelatedProdcutSkeleton />}>
+            <Suspense fallback={
+                <>
+                    <PageSubTitle title="Related Ptoducts" />
+                    <RelatedProdcutSkeleton />
+                </>
+            }>
                 <ServerRelatedProduct id={id} />
             </Suspense>
         </>

app/(user)/products/[id]/related/related-product.server.tsx

@@ -2,18 +2,22 @@
 
 import { getUser } from '@/app/(user)/user.actions'
 import { getRelativeProducts } from '../product.actions'
-import { RelatedProducts, SlideItem } from './related-products.client'
 import { FavouriteSkeleton, Product } from '../../products.client'
 import { Suspense } from 'react'
 import { ServerFavourite } from '../../products.server'
+import { Slide, SlideItem } from '@/components/user/slide/slide.client'
+import { PageSubTitle } from '@/components/user/utils/utils.client'
 
 export async function ServerRelatedProduct({ id }: { id: number }) {
     const user = await getUser()
     const products =  await getRelativeProducts(id)
 
+    if (!products.length) return <></>
+
     return (
         <>
-            <RelatedProducts id={id}>
+            <PageSubTitle title="Related Ptoducts" />
+            <Slide id={id}>
                 {
                     products.map((item) => (
                         <SlideItem key={item.id}>
@@ -25,7 +29,7 @@ export async function ServerRelatedProduct({ id }: { id: number }) {
                         </SlideItem>
                     ))
                 }
-            </RelatedProducts>
+            </Slide>
         </>
     )
 }

app/(user)/products/products.module.css

@@ -124,7 +124,7 @@
     text-align: left;
     align-items: center;
     gap: var(--space-3);
-    padding: 0 var(--space-3);
+    padding: 0 var(--space-2);
     font-size: 1em;
     border-radius: var(--space-3);
     cursor: pointer;

app/(user)/user.module.css

@@ -12,7 +12,7 @@
     overflow-y: auto;
 }
 .safeView {
-    padding: var(--space-4) 0;
+    padding: calc(var(--space-4) + var(--space-3)) 0;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
@@ -21,8 +21,8 @@
 @media (min-width: 540px) {
     .main {
         max-width: 360px;
-        height: calc(100vh - (var(--space-4) * 2));
-        max-height: 740px;
+        height: calc(100vh - (var(--space-3) * 2));
+        max-height: 760px;
         outline: 10px solid #000;
         border-radius: var(--space-5);
         overflow: hidden;