src/components/country/CountrySettings.jsx

@@ -1,7 +1,50 @@
+import { useState } from "react";
+import { useQuery } from '@tanstack/react-query'
+import queryKeys from '../../services/queryKeys'
 import BreadcrumbCom from "../breadcrumb/BreadcrumbCom";
+import { getCountry } from "../../services/siteServices";
+import TablePaginatedWrapper from "../tableWrapper/TablePaginatedWrapper";
 
 export default function CountrySettings(){
 
+    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.country_list, page, willFilter],
+        queryKey: queryKeys.country_list,
+        queryFn: () => {
+            // const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
+            const reqData = {
+                // page,
+                // ...filterData
+            }
+            return getCountry(reqData)
+        },
+        staleTime: 0 //0 mins
+    })
+    const countryData = data?.data?.templates // PRODUCTS TEMPLATE LIST
+    const pagination = data?.data?.pagination
+    console.log('DATA', data?.data)
+
     return (
         <div className='w-full flex flex-col gap-8'>
             <BreadcrumbCom title='Country Settings' paths={['Dashboard', 'Country']} />
@@ -9,7 +52,7 @@ export default function CountrySettings(){
             <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
 
                 <>
-                    <table className="py-2 w-full text-sm">
+                    {/* <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">
@@ -76,8 +119,69 @@ export default function CountrySettings(){
                             </td>
                         </tr>
                         </tbody>
-                    </table>
+                    </table> */}
-                    </>
+                    <TablePaginatedWrapper data={countryData} 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">
+                                                Code
+                                            </th>
+                                            <th scope="col" className="px-8">
+                                                Country
+                                            </th>
+                                            <th scope="col" className="px-2 text-right">
+                                                Status
+                                            </th>
+                                            <th scope="col" className="px-2 text-right">
+                                                Signup
+                                            </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">US</div>
+                                                    </div>
+                                                </div>
+                                            </td>
+                                            <td className="px-8">
+                                                <div className="text-left">
+                                                    <div className="text-base font-semibold">United States</div>
+                                                </div>
+                                            </td>
+                                            <td className="px-8">
+                                                <div className="text-left">
+                                                    <div className="text-base font-semibold">[chkbox]</div>
+                                                </div>
+                                            </td>
+                                            <td className="px-8">
+                                                <div className="text-left">
+                                                    <div className="text-base font-semibold">[chkbox]</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>

src/services/queryKeys.js

@@ -22,6 +22,7 @@ const queryKeys = {
     account_view: ['account_view'],
     subscriptions_view: ['subscriptions_view'],
     users_admin: ['users_admin'],
+    country_list: ['country_list'],
 }
 
 export default queryKeys

src/services/siteServices.js

@@ -62,6 +62,12 @@ export const getCustomers = (reqData) => {
     return getAuxEnd(`/customers`, postData)
 }
 
+// FUNCTION TO GET COUNTRY
+export const getCountry = (reqData) => {
+    const postData = { ...reqData }
+    return getAuxEnd(`/country`, postData)
+}
+
 // FUNCTION TO GET BILLINGS
 export const getBillings = (reqData) => {
     const postData = { ...reqData }