MermsFirstOffice/src/components/products/ProductView.jsx

import {useEffect, useState} from 'react';
import {useLocation, useNavigate} from 'react-router-dom'
import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
import { useQuery, useQueryClient, useMutation } from '@tanstack/react-query'
import queryKeys from '../../services/queryKeys'
import { getProductView } from "../../services/siteServices";
import ProductDetails from './ProductDetails';
import RouteLinks from './../../RouteLinks'
import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString';

export default function ProductView() {

    const {state} = useLocation()
    const navigate = useNavigate()

    useEffect(() => {
        if (!state?.productID) {
            navigate(RouteLinks.homePage, {replace: true})
        }
    }, [])

    const {data, isFetching, status, isError, error} = useQuery({
        queryKey: queryKeys.product_view,
        queryFn: () => {
            const reqData = {
                // page,
                // ...filterData
                product_id : state?.productID
            }
            return getProductView(reqData)
        },
        staleTime: 0 // 0 mins
    })
    const productConfig = data?.data?.product_configuration // PRODUCT CONFIG
    const productDetails = data?.data?.product_details // PRODUCT DETAILS

    return (
        <div className='w-full flex flex-col gap-8'>
            <BreadcrumbCom title={`Product View [${state?.productID}]`} paths={['Dashboard', 'Product View']}/>
            {isFetching ? 
            <>
                <p className='text-slate-800'>Loading...</p>
            </>
            : isError ?
                <p className='text-red-500'>{error.message}</p>
            :
                <div className='flex flex-col gap-4'>
                    <div className='flex flex-col gap-2'>
                        <p className='text-lg dark:text-white-light'>Product Configuration</p>
                        <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>

                            <table className="py-2 w-full text-sm">
                                <thead className="py-2 text-sm text-slate-500 text-left">
                                    <tr>
                                        <th scope="col" className="px-2 py-2" style={{width: '150px'}}>
                                            Item
                                        </th>
                                        <th scope="col" className="px-2">
                                            Value
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                <tr className="py-2 border-t border-dashed border-slate-300">
                                    <td className="px-2 py-2">
                                        <div
                                            className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
                                            <div className="text-left">
                                                ProductID
                                            </div>
                                        </div>
                                    </td>
                                    <td className="px-2">
                                        <div className="text-left">
                                            {productConfig?.product_id}
                                        </div>
                                    </td>
                                </tr>

                                <tr className="py-2 border-t border-dashed border-slate-300">
                                    <td className="px-2 py-2">
                                        <div
                                            className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
                                            <div className="text-left">
                                                Description
                                            </div>
                                        </div>
                                    </td>
                                    <td className="px-2">
                                        <div className="text-left">
                                            {productConfig?.description}
                                        </div>
                                    </td>
                                </tr>
                                <tr className="py-2 border-t border-dashed border-slate-300">
                                    <td className="px-2 py-2">
                                        <div
                                            className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
                                            <div className="text-left">
                                                Status
                                            </div>
                                        </div>
                                    </td>
                                    <td className="px-2">
                                        <div className="text-left">
                                            {productConfig?.status}
                                        </div>
                                    </td>
                                </tr>
                                <tr className="py-2 border-t border-dashed border-slate-300">
                                    <td className="px-2 py-2">
                                        <div
                                            className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
                                            <div className="text-left">
                                                Added
                                            </div>
                                        </div>
                                    </td>
                                    <td className="px-2">
                                        <div className="text-left">
                                            {getDateTimeFromDateString(productConfig?.added)}
                                        </div>
                                    </td>
                                </tr>
                                <tr className="py-2 border-t border-dashed border-slate-300">
                                    <td className="px-2 py-2">
                                        <div
                                            className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
                                            <div className="text-left">
                                                Banner
                                            </div>
                                        </div>
                                    </td>
                                    <td className="px-2">
                                        <div className="text-left">
                                            {productConfig?.banner}
                                        </div>
                                    </td>
                                </tr>
                                <tr className="py-2 border-t border-dashed border-slate-300">
                                    <td className="px-2 py-2">
                                        <div
                                            className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
                                            <div className="text-left">
                                                UID
                                            </div>
                                        </div>
                                    </td>
                                    <td className="px-2">
                                        <div className="text-left">
                                            {productConfig?.uid}
                                        </div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>

                        </div>
                    </div>
                    <p className='text-lg'>Product Details</p>
                    <ProductDetails productDetails={productDetails} />

                    <div className='box bg-[aliceblue] dark:bg-black-box text-black-body dark:text-white-body'>
                        <div className='flex flex-col gap-2'>


                        </div>
                    </div>
                </div>
            }
        </div>
    )
}