diff --git a/src/_nav.js b/src/_nav.js index 5badec6..88cd6bc 100644 --- a/src/_nav.js +++ b/src/_nav.js @@ -89,13 +89,13 @@ const _nav = [ to: "/territorymanagers", group: "TerritoryManager", }, - // { - // component: CNavItem, - // name: "retail Distributor", - // icon: , - // to: "/retail-distributor", - // group: "RetailDistributor", - // }, + { + component: CNavItem, + name: "retail Distributor", + icon: , + to: "/retail-distributor", + group: "RetailDistributor", + }, { component: CNavItem, name: "Attendance", diff --git a/src/routes.js b/src/routes.js index 3e6c931..98c55f8 100644 --- a/src/routes.js +++ b/src/routes.js @@ -304,7 +304,7 @@ const routes = [ navName: "RetailDistributor", }, { - path: "/single/retail-distributor", + path: "/retaildistributor/view/:id", name: "Single Retail Distributor", element: SingleRetailDistributor, navName: "RetailDistributor", diff --git a/src/views/RetailDistributors/RetailDistributor.js b/src/views/RetailDistributors/RetailDistributor.js index 24cb03f..cb8e276 100644 --- a/src/views/RetailDistributors/RetailDistributor.js +++ b/src/views/RetailDistributors/RetailDistributor.js @@ -1,44 +1,36 @@ -import React, { useState, useEffect, useRef, useCallback } from "react"; +import React, { useState, useEffect, useCallback } from "react"; import { Link } from "react-router-dom"; import axios from "axios"; import Button from "@material-ui/core/Button"; -import { useNavigate } from "react-router-dom"; import { isAutheticated } from "src/auth"; import swal from "sweetalert"; -import debounce from 'lodash.debounce'; +import debounce from "lodash.debounce"; const RetailDistributor = () => { const token = isAutheticated(); - const navigate = useNavigate(); const [loading, setLoading] = useState(false); - const [success, setSuccess] = useState(true); - const [retailDistributorsData, setRetailDistributorsData] = useState([]); - - const nameRef = useRef(); - const mobileRef = useRef(); - const VerifyRetailDistributorRef = useRef(); + const [allRetailDistributorsData, setAllRetailDistributorsData] = useState( + [] + ); + const [filteredRetailDistributorsData, setFilteredRetailDistributorsData] = + useState([]); + const [searchTerm, setSearchTerm] = useState(""); + const [searchPrincipalDistributor, setSearchPrincipalDistributor] = + useState(""); const [currentPage, setCurrentPage] = useState(1); const [itemPerPage, setItemPerPage] = useState(10); - const [totalData, setTotalData] = useState(0); const getRetailDistributorsData = async () => { setLoading(true); try { - const res = await axios.get(`/api/retaildistributor/getAll/`, { + const res = await axios.get(`/api/kyc/getAllapproved/`, { headers: { Authorization: `Bearer ${token}`, }, - params: { - page: currentPage, - show: itemPerPage, - name: nameRef.current.value, - mobileNumber: mobileRef.current.value, - isVerified: VerifyRetailDistributorRef.current.value, - }, }); - setRetailDistributorsData(res.data?.retailDistributors); - setTotalData(res.data?.total_data); + setAllRetailDistributorsData(res.data || []); + setFilteredRetailDistributorsData(res.data || []); // Initialize filtered data } catch (err) { const msg = err?.response?.data?.message || "Something went wrong!"; swal({ @@ -55,18 +47,64 @@ const RetailDistributor = () => { useEffect(() => { getRetailDistributorsData(); - }, [success, itemPerPage, currentPage]); + }, []); - const debouncedSearch = useCallback(debounce(() => { - setCurrentPage(1); - getRetailDistributorsData(); - }, 500), []); + useEffect(() => { + filterData(); + }, [searchTerm, searchPrincipalDistributor, allRetailDistributorsData]); - const handleSearchChange = () => { + const filterData = () => { + let filteredData = allRetailDistributorsData; + + if (searchTerm) { + filteredData = filteredData.filter((item) => + item.trade_name.toLowerCase().includes(searchTerm.toLowerCase()) + ); + } + + if (searchPrincipalDistributor) { + filteredData = filteredData.filter((item) => + item.principal_distributer?.name + ?.toLowerCase() + .includes(searchPrincipalDistributor.toLowerCase()) + ); + } + + setFilteredRetailDistributorsData(filteredData); + setCurrentPage(1); // Reset to first page when filtering + }; + + const debouncedSearch = useCallback( + debounce(() => { + filterData(); + }, 500), + [searchTerm, searchPrincipalDistributor] + ); + + const handleSearchChange = (e) => { + const { name, value } = e.target; + if (name === "searchTerm") { + setSearchTerm(value); + } else if (name === "searchPrincipalDistributor") { + setSearchPrincipalDistributor(value); + } debouncedSearch(); }; - const totalPages = Math.ceil(totalData / itemPerPage); + const totalPages = Math.ceil( + filteredRetailDistributorsData.length / itemPerPage + ); + const paginatedData = filteredRetailDistributorsData.slice( + (currentPage - 1) * itemPerPage, + currentPage * itemPerPage + ); + + const handleResetSearch = () => { + setSearchTerm(""); + setSearchPrincipalDistributor(""); + setFilteredRetailDistributorsData(allRetailDistributorsData); // Reset filtered data + setCurrentPage(1); // Reset to first page + }; return (
@@ -93,8 +131,8 @@ const RetailDistributor = () => { Show
- +
- - + Reset Search +
@@ -155,9 +191,9 @@ const RetailDistributor = () => { ID Trade Name Created On - PrincipleDistributor - TerritoryManager - SalesCoOrdinator + Principal Distributor + Territory Manager + Sales Coordinator Action @@ -165,61 +201,62 @@ const RetailDistributor = () => { {loading ? ( - + Loading... - ) : retailDistributorsData?.length > 0 ? ( - retailDistributorsData?.map((retailDistributor, i) => { - return ( - - - {retailDistributor?.id} - - - {retailDistributor?.tradeName} - - - {new Date( - retailDistributor.createdAt - ).toLocaleString("en-IN", { - weekday: "short", - month: "short", - day: "numeric", - year: "numeric", - hour: "numeric", - minute: "numeric", - hour12: true, - })} - - -
-
Principal Distributor: {retailDistributor.principalDistributor || 'N/A'}
-
Territory Manager: {retailDistributor.territoryManager || 'N/A'}
-
Sales Coordinator: {retailDistributor.salesCoordinator || 'N/A'}
-
- - - - - - - - ); - }) + ) : paginatedData.length > 0 ? ( + paginatedData.map((retailDistributor) => ( + + + {retailDistributor._id} + + + {retailDistributor.trade_name} + + + {new Date( + retailDistributor.updatedAt + ).toLocaleString("en-IN", { + weekday: "short", + month: "short", + day: "numeric", + year: "numeric", + hour: "numeric", + minute: "numeric", + hour12: true, + })} + + + {retailDistributor.principal_distributer + ?.name || "N/A"} + + + {retailDistributor.userType === + "TerritoryManager" + ? retailDistributor.addedBy?.name || "N/A" + : "N/A"} + + + {retailDistributor.userType === + "SalesCoOrdinator" + ? retailDistributor.addedBy?.name || "N/A" + : "N/A"} + + + + + + + + )) ) : ( - + No Retail Distributor found! @@ -236,49 +273,64 @@ const RetailDistributor = () => { aria-live="polite" > Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "} - {Math.min(currentPage * itemPerPage, totalData)} of{" "} - {totalData} entries + {Math.min( + currentPage * itemPerPage, + filteredRetailDistributorsData.length + )}{" "} + of {filteredRetailDistributorsData.length} entries
-
-
    +
    +
    • - - setCurrentPage((prev) => - prev > 1 ? prev - 1 : prev - ) + setCurrentPage((prev) => Math.max(prev - 1, 1)) } + aria-controls="datatable" > Previous - +
      • + {Array.from({ length: totalPages }, (_, index) => ( +
    • + setCurrentPage(index + 1)} + aria-controls="datatable" + > + {index + 1} + +
      • + ))}
    • - setCurrentPage((prev) => - prev < totalPages ? prev + 1 : prev + Math.min(prev + 1, totalPages) ) } + aria-controls="datatable" > Next - +
    diff --git a/src/views/RetailDistributors/SingleRetailDistributor.js b/src/views/RetailDistributors/SingleRetailDistributor.js index 2473425..2396306 100644 --- a/src/views/RetailDistributors/SingleRetailDistributor.js +++ b/src/views/RetailDistributors/SingleRetailDistributor.js @@ -18,43 +18,43 @@ const SingleRetailDistributor = () => { const fetchData = async () => { try { // Commented out the API call and using dummy data - // const response = await axios.get(`/api/kyc/get-single-kyc/${id}`, { - // headers: { - // 'Access-Control-Allow-Origin': '*', - // Authorization: `Bearer ${token}`, - // 'Content-Type': 'multipart/form-data', - // }, - // }); - // setRetailerDetails(response.data); + const response = await axios.get(`api/kyc/get-single-kyc/${id}`, { + headers: { + 'Access-Control-Allow-Origin': '*', + Authorization: `Bearer ${token}`, + 'Content-Type': 'multipart/form-data', + }, + }); + setRetailerDetails(response.data); - // Dummy data - const dummyData = { - _id: '66a8bb8392d90216331b1f73', - name: 'roshan garg', - trade_name: 'abc', - address: 'abc btm', - state: 'KA', - city: 'Bengaluru', - district: 'benga', - pincode: '124515', - mobile_number: '8516913819', - principal_distributer: { name: 'Distributor Name' }, - pan_number: '123456454', - pan_img: { url: 'https://res.cloudinary.com/dslvetard/image/upload/v1722334072/KYC/pan/u3a08xjvrpovfzruedeq.png' }, - aadhar_number: '123123123123', - aadhar_img: { url: 'https://res.cloudinary.com/dslvetard/image/upload/v1722334074/KYC/aadhar/ep64tuufileifysol4dx.png' }, - gst_number: '121212', - gst_img: { url: 'https://res.cloudinary.com/dslvetard/image/upload/v1722334076/KYC/gst/jqy8uqa6ejntwhc7mq86.png' }, - pesticide_license_img: { url: 'https://res.cloudinary.com/dslvetard/image/upload/v1722334077/KYC/pesticide_license/iyznci3iibp50pug8e8p.png' }, - fertilizer_license_img: { url: 'https://res.cloudinary.com/dslvetard/image/upload/v1722334080/KYC/fertilizer_license/jnj1r8rzwsbkclarbbch.png' }, - selfie_entrance_img: { url: 'https://res.cloudinary.com/dslvetard/image/upload/v1722334082/KYC/selfie_entrance/weri7zhyioi7lqwv3dvg.png' }, - status: 'new', - addedBy: { name: 'Added By', uniqueId: 'E123' }, - notes: [], - createdAt: '2024-01-01T00:00:00Z', - updatedAt: '2024-01-01T00:00:00Z', - }; - setRetailerDetails(dummyData); + // // Dummy data + // const dummyData = { + // _id: '66a8bb8392d90216331b1f73', + // name: 'roshan garg', + // trade_name: 'abc', + // address: 'abc btm', + // state: 'KA', + // city: 'Bengaluru', + // district: 'benga', + // pincode: '124515', + // mobile_number: '8516913819', + // principal_distributer: { name: 'Distributor Name' }, + // pan_number: '123456454', + // pan_img: { url: 'https://res.cloudinary.com/dslvetard/image/upload/v1722334072/KYC/pan/u3a08xjvrpovfzruedeq.png' }, + // aadhar_number: '123123123123', + // aadhar_img: { url: 'https://res.cloudinary.com/dslvetard/image/upload/v1722334074/KYC/aadhar/ep64tuufileifysol4dx.png' }, + // gst_number: '121212', + // gst_img: { url: 'https://res.cloudinary.com/dslvetard/image/upload/v1722334076/KYC/gst/jqy8uqa6ejntwhc7mq86.png' }, + // pesticide_license_img: { url: 'https://res.cloudinary.com/dslvetard/image/upload/v1722334077/KYC/pesticide_license/iyznci3iibp50pug8e8p.png' }, + // fertilizer_license_img: { url: 'https://res.cloudinary.com/dslvetard/image/upload/v1722334080/KYC/fertilizer_license/jnj1r8rzwsbkclarbbch.png' }, + // selfie_entrance_img: { url: 'https://res.cloudinary.com/dslvetard/image/upload/v1722334082/KYC/selfie_entrance/weri7zhyioi7lqwv3dvg.png' }, + // status: 'new', + // addedBy: { name: 'Added By', uniqueId: 'E123' }, + // notes: [], + // createdAt: '2024-01-01T00:00:00Z', + // updatedAt: '2024-01-01T00:00:00Z', + // }; + // setRetailerDetails(dummyData); } catch (error) { console.error('Error fetching data: ', error); }