From bd4cdb1ae91bd1215d4733fe574a1438c5257fb0 Mon Sep 17 00:00:00 2001
From: "CHIEFSOFT\\ameye" <ameye@chiefsfot.com>
Date: Mon, 6 Oct 2025 16:29:54 -0400
Subject: [PATCH] Reformat cod e

---
 src/components/products/ProductsCom.jsx | 199 +++++++++++++-----------
 1 file changed, 104 insertions(+), 95 deletions(-)

diff --git a/src/components/products/ProductsCom.jsx b/src/components/products/ProductsCom.jsx
index a049d17..7a88f00 100644
--- a/src/components/products/ProductsCom.jsx
+++ b/src/components/products/ProductsCom.jsx
@@ -1,11 +1,11 @@
-import { useState } from 'react'
-import { useQuery } from '@tanstack/react-query'
+import {useState} from 'react'
+import {useQuery} from '@tanstack/react-query'
 import queryKeys from '../../services/queryKeys'
 
 import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
 import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
 import Icons from '../Icons'
-import { getProducts } from '../../services/siteServices'
+import {getProducts} from '../../services/siteServices'
 import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString'
 // import formatNumber from '../../helpers/formatNumber'
 // import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString';
@@ -19,18 +19,18 @@ export default function ProductsCom() {
     const [filter, setFilter] = useState({type: '', id: ''})
     const [willFilter, setWillFilter] = useState(false)
 
-    const handleFilter = ({target:{name, value}}) => {
-        setFilter(prev => ({...prev, [name]:value}))
+    const handleFilter = ({target: {name, value}}) => {
+        setFilter(prev => ({...prev, [name]: value}))
     }
 
     const handleFilterByParams = () => {
-        if(filter.type && !filter.id){
+        if (filter.type && !filter.id) {
             return
-        }else if(!filter.type){
+        } else if (!filter.type) {
             setPage(1)
             setWillFilter(prev => !prev)
             setFilter({type: '', id: ''})
-        }else{
+        } else {
             setPage(1)
             setWillFilter(prev => !prev)
         }
@@ -54,99 +54,108 @@ export default function ProductsCom() {
 
     return (
         <div className='w-full flex flex-col gap-8'>
-            <BreadcrumbCom title='Products' paths={['Dashboard', 'Products']} />
+            <BreadcrumbCom title='Products' paths={['Dashboard', 'Products']}/>
 
             <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
-                { isError ?
+                {isError ?
                     <p className='text-red-500'>{error?.message}</p>
-                :
-                <>
-                    {/* filter section */}
-                    <div className='px-2 py-2 mb-4 flex flex-col sm:flex-row flex-wrap sm:items-center gap-2'>
-                        <Icons name='filter' className='text-3xl' />
-                        <div className='w-full sm:max-w-48'>
-                            <select name='type' value={filter?.type} className='h-10 w-full p-2 rounded-md' onChange={handleFilter}>
-                                <option value=''>All</option>
-                                <option value='name'>Name</option>
-                            </select>
+                    :
+                    <>
+                        {/* filter section */}
+                        <div className='px-2 py-2 mb-4 flex flex-col sm:flex-row flex-wrap sm:items-center gap-2'>
+                            <Icons name='filter' className='text-3xl'/>
+                            <div className='w-full sm:max-w-48'>
+                                <select name='type' value={filter?.type} className='h-10 w-full p-2 rounded-md'
+                                        onChange={handleFilter}>
+                                    <option value=''>All</option>
+                                    <option value='name'>Name</option>
+                                </select>
+                            </div>
+                            <div className='w-full sm:max-w-48'>
+                                <input name='id' value={filter?.id} disabled={!filter.type}
+                                       className={`h-10 w-full p-2 rounded-md outline-none border border-black-aside ${!filter.type && 'opacity-30'}`}
+                                       onChange={handleFilter}/>
+                            </div>
+                            <button onClick={handleFilterByParams} disabled={filter.type && !filter.id}
+                                    className={`h-10 bg-primary px-2 py-1 rounded-md text-white font-medium sm:self-end ${(filter.type && !filter.id) && 'opacity-50'}`}>Submit
+                            </button>
                         </div>
-                        <div className='w-full sm:max-w-48'>
-                            <input name='id' value={filter?.id} disabled={!filter.type} className={`h-10 w-full p-2 rounded-md outline-none border border-black-aside ${!filter.type && 'opacity-30'}`} onChange={handleFilter} />
-                        </div>
-                        <button onClick={handleFilterByParams} disabled={filter.type && !filter.id} className={`h-10 bg-primary px-2 py-1 rounded-md text-white font-medium sm:self-end ${(filter.type && !filter.id) && 'opacity-50'}`}>Submit</button>
-                    </div>
-                     {/* end of filter section */}
+                        {/* end of filter section */}
 
-                    <TablePaginatedWrapper data={productsData} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
-                    {({ data }) => (
-                        <>
-                            <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">
-                                            Added
-                                        </th>
-                                        <th scope="col" className="px-2">
-                                            Name
-                                        </th>
-                                        <th scope="col" className="px-2">
-                                            Product ID
-                                        </th>
-                                        <th scope="col" className="px-2 text-right">
-                                            Status
-                                        </th>
-                                        <th scope="col" className="px-2 text-right">
-                                            Action
-                                        </th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    {(data && data.length > 0) ? data?.map((item, index) => (
-                                        <tr key={index} 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">
-                                                    <div className="text-base font-semibold">{getDateTimeFromDateString(item?.added)}</div>
-                                                </div>  
-                                                </div>
-                                            </td>
-                                            <td className="px-2">
-                                                <div className="text-left">
-                                                    <div className="text-base font-semibold">{item?.name}</div>
-                                                </div> 
-                                            </td>
-                                            <td className="px-2">
-                                                <div className="text-left">
-                                                    <div className="text-base font-semibold">{item?.product_id}</div>
-                                                </div> 
-                                            </td>
-                                            <td className="px-2">
-                                                <div className="text-right">
-                                                    <div className="text-base font-semibold">{item?.status}</div>
-                                                </div> 
-                                            </td>
-                                            <td className="px-2">
-                                                <div className="text-right">
-                                                    <div className="text-base font-semibold">[---]</div>
-                                                </div>
-                                            </td>
+                        <TablePaginatedWrapper data={productsData} isFetching={isFetching} setPage={setPage}
+                                               itemsPerPage={pagination?.limit} pagination={pagination}>
+                            {({data}) => (
+                                <>
+                                    <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">
+                                                Added
+                                            </th>
+                                            <th scope="col" className="px-2">
+                                                Name
+                                            </th>
+                                            <th scope="col" className="px-2">
+                                                Product ID
+                                            </th>
+                                            <th scope="col" className="px-2 text-right">
+                                                Status
+                                            </th>
+                                            <th scope="col" className="px-2 text-right">
+                                                Action
+                                            </th>
                                         </tr>
-                                    ))
-                                    :
-                                    <tr className="py-2 border-t border-dashed border-slate-300">
-                                        <td className="px-3 py-2" colSpan={4}>
-                                            <div className="flex justify-center items-center">
-                                                No Record Found
-                                            </div>
-                                        </td>
-                                    </tr>
-                                    }
-                                </tbody>
-                            </table>
-                        </>
-                    )}
-                    </TablePaginatedWrapper>
-                </>
+                                        </thead>
+                                        <tbody>
+                                        {(data && data.length > 0) ? data?.map((item, index) => (
+                                                <tr key={index} 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">
+                                                                <div
+                                                                    className="text-base font-semibold">{getDateTimeFromDateString(item?.added)}</div>
+                                                            </div>
+                                                        </div>
+                                                    </td>
+                                                    <td className="px-2">
+                                                        <div className="text-left">
+                                                            <div className="text-base font-semibold">{item?.name}</div>
+                                                        </div>
+                                                    </td>
+                                                    <td className="px-2">
+                                                        <div className="text-left">
+                                                            <div
+                                                                className="text-base font-semibold">{item?.product_id}</div>
+                                                        </div>
+                                                    </td>
+                                                    <td className="px-2">
+                                                        <div className="text-right">
+                                                            <div className="text-base font-semibold">{item?.status}</div>
+                                                        </div>
+                                                    </td>
+                                                    <td className="px-2">
+                                                        <div className="text-right">
+                                                            <div className="text-base font-semibold">[---]</div>
+                                                        </div>
+                                                    </td>
+                                                </tr>
+                                            ))
+                                            :
+                                            <tr className="py-2 border-t border-dashed border-slate-300">
+                                                <td className="px-3 py-2" colSpan={4}>
+                                                    <div className="flex justify-center items-center">
+                                                        No Record Found
+                                                    </div>
+                                                </td>
+                                            </tr>
+                                        }
+                                        </tbody>
+                                    </table>
+                                </>
+                            )}
+                        </TablePaginatedWrapper>
+                    </>
                 }
             </div>
         </div>