From f33a945384173a44c9367e38c20b504a399ea9e2 Mon Sep 17 00:00:00 2001
From: "CHIEFSOFT\\ameye" <ameye@chiefsfot.com>
Date: Sun, 21 Sep 2025 09:08:27 -0400
Subject: [PATCH] Product and custom templates pages

---
 src/components/products/CustomTemplates.jsx  | 141 +++++++++++++++++++
 src/components/products/ProductTemplates.jsx | 141 +++++++++++++++++++
 src/pages/CustomTemplatePage.jsx             |   4 +-
 src/pages/ProductTemplatePage.jsx            |   4 +-
 4 files changed, 286 insertions(+), 4 deletions(-)
 create mode 100644 src/components/products/CustomTemplates.jsx
 create mode 100644 src/components/products/ProductTemplates.jsx

diff --git a/src/components/products/CustomTemplates.jsx b/src/components/products/CustomTemplates.jsx
new file mode 100644
index 0000000..6e53d97
--- /dev/null
+++ b/src/components/products/CustomTemplates.jsx
@@ -0,0 +1,141 @@
+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 getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString'
+
+export default function CustomTemplates() {
+
+    const [page, setPage] = useState(1)
+    const [filter, setFilter] = useState({type: '', id: ''})
+    const [willFilter, setWillFilter] = useState(false)
+
+    const handleFilter = ({target:{name, value}}) => {
+        setFilter(prev => ({...prev, [name]:value}))
+    }
+
+    const handleFilterByParams = () => {
+        if(filter.type && !filter.id){
+            return
+        }else if(!filter.type){
+            setPage(1)
+            setWillFilter(prev => !prev)
+            setFilter({type: '', id: ''})
+        }else{
+            setPage(1)
+            setWillFilter(prev => !prev)
+        }
+    }
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: [...queryKeys.products, page, willFilter],
+        queryFn: () => {
+            const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
+            const reqData = {
+                page,
+                ...filterData
+            }
+            return getProducts(reqData)
+        },
+        staleTime: 0 //0 mins
+    })
+    const productsData = data?.data?.products // PRODUCTS LIST
+    const pagination = data?.data?.pagination
+    // console.log('DATA', data?.data)
+
+    return (
+        <div className='w-full flex flex-col gap-8'>
+            <BreadcrumbCom title='Custom Templates' paths={['Dashboard', 'Custom Templates']} />
+
+            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+                { 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>
+                            </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 */}
+
+                        <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>
+                                        </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>
+                                                </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>
+    )
+}
\ No newline at end of file
diff --git a/src/components/products/ProductTemplates.jsx b/src/components/products/ProductTemplates.jsx
new file mode 100644
index 0000000..56312f1
--- /dev/null
+++ b/src/components/products/ProductTemplates.jsx
@@ -0,0 +1,141 @@
+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 getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString'
+
+export default function ProductTemplates() {
+
+    const [page, setPage] = useState(1)
+    const [filter, setFilter] = useState({type: '', id: ''})
+    const [willFilter, setWillFilter] = useState(false)
+
+    const handleFilter = ({target:{name, value}}) => {
+        setFilter(prev => ({...prev, [name]:value}))
+    }
+
+    const handleFilterByParams = () => {
+        if(filter.type && !filter.id){
+            return
+        }else if(!filter.type){
+            setPage(1)
+            setWillFilter(prev => !prev)
+            setFilter({type: '', id: ''})
+        }else{
+            setPage(1)
+            setWillFilter(prev => !prev)
+        }
+    }
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: [...queryKeys.products, page, willFilter],
+        queryFn: () => {
+            const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
+            const reqData = {
+                page,
+                ...filterData
+            }
+            return getProducts(reqData)
+        },
+        staleTime: 0 //0 mins
+    })
+    const productsData = data?.data?.products // PRODUCTS LIST
+    const pagination = data?.data?.pagination
+    // console.log('DATA', data?.data)
+
+    return (
+        <div className='w-full flex flex-col gap-8'>
+            <BreadcrumbCom title='Product Templates' paths={['Dashboard', 'Product Templates']} />
+
+            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+                { 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>
+                            </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 */}
+
+                        <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>
+                                        </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>
+                                                </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>
+    )
+}
\ No newline at end of file
diff --git a/src/pages/CustomTemplatePage.jsx b/src/pages/CustomTemplatePage.jsx
index 6c7dfd2..aa08b4d 100644
--- a/src/pages/CustomTemplatePage.jsx
+++ b/src/pages/CustomTemplatePage.jsx
@@ -1,8 +1,8 @@
 import React from 'react'
-import ProductsCom from '../components/products/ProductsCom'
+import CustomTemplates from "../components/products/CustomTemplates";
 
 export default function CustomTemplatePage() {
     return (
-        <ProductsCom />
+        <CustomTemplates />
     )
 }
diff --git a/src/pages/ProductTemplatePage.jsx b/src/pages/ProductTemplatePage.jsx
index a3b7039..a5dfa9c 100644
--- a/src/pages/ProductTemplatePage.jsx
+++ b/src/pages/ProductTemplatePage.jsx
@@ -1,8 +1,8 @@
 import React from 'react'
-import ProductsCom from '../components/products/ProductsCom'
+import ProductTemplates from "../components/products/ProductTemplates";
 
 export default function ProductTemplatePage() {
     return (
-        <ProductsCom />
+        <ProductTemplates />
     )
 }