vendor and courier completed

package.json

@@ -52,7 +52,8 @@
     "react-router-dom": "^5.3.0",
     "redux": "4.1.2",
     "serve": "^13.0.2",
-    "simplebar-react": "^2.3.6"
+    "simplebar-react": "^2.3.6",
+    "sweetalert2": "^11.4.0"
   },
   "devDependencies": {
     "auto-changelog": "~2.3.0",

src/components/AppHeader.js

@@ -70,7 +70,7 @@ const AppHeader = () => {
       </CContainer>
       <CHeaderDivider />
       <CContainer fluid>
-        <AppBreadcrumb />
+        {/* <AppBreadcrumb /> */}
       </CContainer>
     </CHeader>
   )

src/components/header/AppHeaderDropdown.js

@@ -25,6 +25,7 @@ import CIcon from '@coreui/icons-react'
 
 import avatar8 from './../../assets/images/avatars/8.jpg'
 import { Link } from 'react-router-dom'
+import { signout } from 'src/auth'
 
 const AppHeaderDropdown = () => {
   return (
@@ -93,7 +94,7 @@ const AppHeaderDropdown = () => {
           </CDropdownItem>
         </Link>
         <CDropdownItem href="#">
-          <CIcon icon={cilLockLocked} className="me-2" />
+          <CIcon icon={cilLockLocked} onClick={() => signout()} className="me-2" />
           Log Out
         </CDropdownItem>
       </CDropdownMenu>

src/routes.js

@@ -1,11 +1,14 @@
 import React from 'react'
 
+
 const AirwaysBill = React.lazy(() => import('./views/AirwaysBill/AirwaysBill'))
 const AddAirwaysBill = React.lazy(() => import('./views/AirwaysBill/AddAirwaysBill'))
 const Courier = React.lazy(() => import('./views/Courier/Courier'))
+const EditCourier = React.lazy(() => import('./views/Courier/EditCourier'))
 const AddCourier = React.lazy(() => import('./views/Courier/AddCourier'))
 const Register = React.lazy(() => import('./views/pages/register/Register'))
 const Vendor = React.lazy(() => import('./views/Vendor/Vendor'))
+const EditVendor = React.lazy(() => import('./views/Vendor/EditVendor'))
 const AddVendor = React.lazy(() => import('./views/Vendor/AddVendor'))
 
 const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard'))
@@ -62,10 +65,12 @@ const routes = [
   { path: '/', exact: true, name: 'Home' },
   { path: '/register', name: 'Change Password', component: Register },
   { path: '/courier', name: 'Courier', component: Courier },
+  { path: '/editcourier/:id', name: ' Edit Courier', component: EditCourier },
   { path: '/addcourier', name: 'Courier / Add Courier', component: AddCourier },
   { path: '/airwaysbill', name: 'Airways Bill', component: AirwaysBill },
   { path: '/addairwaysbill', name: 'Airways Bill / Add New Entry', component: AddAirwaysBill },
   { path: '/vendors', name: 'Vendors', component: Vendor },
+  { path: '/editvendor/:id', name: 'Edit Vendor', component: EditVendor },
   { path: '/addvendor', name: 'Vendors / Add New Vendor', component: AddVendor },
   { path: '/dashboard', name: 'Dashboard', component: Dashboard },
   { path: '/theme', name: 'Theme', component: Colors, exact: true },

src/views/Courier/AddCourier.js

@@ -13,17 +13,19 @@ import {
     CRow,
 } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
+import Swal from 'sweetalert2';
 import { cil3d } from '@coreui/icons'
 import { useState } from 'react';
 import axios from 'axios';
 import { isAutheticated } from 'src/auth';
+import { useHistory } from 'react-router-dom';
 
 const AddCourier = () => {
     const [id, setId] = useState(0);
     const [date, setDate] = useState('')
     const [courier, setCourier] = useState('')
     const { token } = isAutheticated();
-
+    const history = useHistory()
     useEffect(() => {
         const getDate = () => {
             let today = new Date();
@@ -31,7 +33,7 @@ const AddCourier = () => {
             let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
             let yyyy = today.getFullYear();
 
-            today = mm + '/' + dd + '/' + yyyy;
+            today = dd + '/' + mm + '/' + yyyy;
             return today
         }
 
@@ -52,8 +54,19 @@ const AddCourier = () => {
                 "Authorization": `Bearer ${token}`
             }
         })
-        if (res) {
-            console.log(res.data);
+        if ((res.data.message === "Success")) {
+            Swal.fire({
+                title: 'Done',
+                text: 'Courier Added',
+                icon: 'success',
+                confirmButtonText: 'Cool',
+                confirmButtonColor: '#303c54',
+                iconColor: '#303c54'
+            }).then(() => {
+                history.push('/courier');
+            });
+        } else {
+            Swal("Oops!", "Something went wrong!", "error");
         }
     }
 
@@ -68,12 +81,12 @@ const AddCourier = () => {
                         <CRow className=' flex-row align-items-center'>
                             <CCol md={2} ><h5>Unique ID:</h5></CCol>
                             <CCol><h6>{id}</h6></CCol>
-                            <p className="text-medium-emphasis">(auto-generated)</p>
+                            {/* <p className="text-medium-emphasis">(auto-generated)</p> */}
                         </CRow>
                         <CRow className=' flex-row align-items-center'>
                             <CCol md={2} ><h5>Added On:</h5></CCol>
                             <CCol><h6>{date}</h6></CCol>
-                            <p className="text-medium-emphasis">(auto-generated)</p>
+                            {/* <p className="text-medium-emphasis">(auto-generated)</p> */}
                         </CRow>
 
                         <CInputGroup className="mb-3">

src/views/Courier/Courier.js

@@ -1,16 +1,8 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
     CAvatar,
     CButton,
     CButtonGroup,
-    CCard,
-    CCardBody,
-    CCardFooter,
-    CCardHeader,
-    CCol,
-    CContainer,
-    CProgress,
-    CRow,
     CTable,
     CTableBody,
     CTableDataCell,
@@ -21,25 +13,64 @@ import {
 import { Link } from 'react-router-dom';
 import { isAutheticated } from 'src/auth';
 import axios from 'axios';
+import Swal from 'sweetalert2';
+import { useHistory } from 'react-router-dom';
+
 
 const Courier = () => {
     const { token } = isAutheticated();
-    console.log(token);
+    const [data, setData] = useState([])
+    const history = useHistory()
 
     useEffect(() => {
         const getData = async () => {
-            const res = await axios.get('/api/vendor/view', {
+            const res = await axios.get('/api/courier', {
                 headers: {
                     "Access-Control-Allow-Origin": "*",
                     "Content-type": "Application/json",
                     "Authorization": `Bearer ${token}`
                 }
             });
-            console.log(res);
+            console.log(res.data);
+            setData(res.data.Pincode)
+            console.log(data);
         }
         getData();
 
     }, []);
+    const handleDelete = async (id) => {
+        const res = await axios.delete(`/api/courier/${id}`, {
+            headers: {
+                "Access-Control-Allow-Origin": "*",
+                "Content-type": "Application/json",
+                "Authorization": `Bearer ${token}`
+            }
+        })
+        if ((res.data.message === "Success")) {
+            Swal.fire({
+                title: 'Updated',
+                text: 'Courier Deleted',
+                icon: 'success',
+                confirmButtonText: 'Cool',
+                confirmButtonColor: '#303c54',
+                iconColor: '#303c54'
+            }).then(() => {
+                history.push('/courier');
+            });
+        } else {
+            Swal("Oops!", "Something went wrong!", "error");
+        }
+
+    }
+    const formatDate = (date) => {
+        let today = new Date(date);
+        let dd = String(today.getDate()).padStart(2, '0');
+        let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
+        let yyyy = today.getFullYear();
+
+        today = dd + '/' + mm + '/' + yyyy;
+        return today
+    }
     return <div>
         <Link to='/addcourier'>
             <CButton color="dark">+Add New</CButton>
@@ -54,19 +85,22 @@ const Courier = () => {
                     <CTableHeaderCell scope="col">Actions</CTableHeaderCell>
                 </CTableRow>
             </CTableHead>
-            <CTableBody>
-                <CTableRow>
-                    <CTableHeaderCell scope="row">FedEx</CTableHeaderCell>
-                    <CTableDataCell>123</CTableDataCell>
-                    <CTableDataCell>123-1234-123</CTableDataCell>
-                    <CTableDataCell>
-                        <CButtonGroup role="group" aria-label="Basic mixed styles example">
-                            <CButton color="warning">Edit</CButton>
-                            <CButton color="danger">Delete</CButton>
-                        </CButtonGroup>
-                    </CTableDataCell>
-                </CTableRow>
-            </CTableBody>
+            <tbody>
+                {data.map(item =>
+                    <tr>
+                        <td scope="row">{item.name}</td>
+                        <td>{item._id}</td>
+                        <td>{formatDate(item.createdAt)}</td>
+                        <td>
+                            <CButtonGroup role="group" aria-label="Basic mixed styles example">
+                                <Link to={`/editcourier/${item._id}`}> <CButton color="warning">Edit</CButton></Link>
+                                <CButton color="danger" onClick={() => handleDelete(item._id)}>Delete</CButton>
+                            </CButtonGroup>
+                        </td>
+                    </tr>
+                )}
+
+            </tbody>
         </CTable>
     </div>;
 };

src/views/Courier/EditCourier.js

@@ -0,0 +1,146 @@
+import React, { useEffect } from 'react';
+import {
+    CButton,
+    CCard,
+    CCardBody,
+    CCardGroup,
+    CCol,
+    CContainer,
+    CForm,
+    CFormInput,
+    CInputGroup,
+    CInputGroupText,
+    CRow,
+} from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+import { cil3d } from '@coreui/icons'
+import { useState } from 'react';
+import axios from 'axios';
+import { isAutheticated } from 'src/auth';
+import { useParams } from 'react-router-dom';
+import Swal from 'sweetalert2';
+import { useHistory } from 'react-router-dom';
+
+const EditCourier = () => {
+    // const [id, setId] = useState(0);
+    const [date, setDate] = useState('')
+    const [courier, setCourier] = useState()
+    const { token } = isAutheticated();
+    const { id } = useParams();
+    const [data, setData] = useState([])
+    const history = useHistory();
+    useEffect(() => {
+        const getData = async () => {
+            const res = await axios.get(`/api/courier/${id}`, {
+                headers: {
+                    "Access-Control-Allow-Origin": "*",
+                    "Content-type": "Application/json",
+                    "Authorization": `Bearer ${token}`
+                }
+            });
+            console.log(res.data);
+            setData(res.data?.Pincode[0])
+            setCourier(res.data?.Pincode[0].name)
+            console.log(data);
+        }
+        getData();
+
+    }, []);
+
+    useEffect(() => {
+        const getDate = () => {
+            let today = new Date();
+            let dd = String(today.getDate()).padStart(2, '0');
+            let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
+            let yyyy = today.getFullYear();
+
+            today = dd + '/' + mm + '/' + yyyy;
+            return today
+        }
+
+
+        const generateCode = () => {
+            // setId(Math.round(Math.random() * 1000000000))
+        }
+        generateCode()
+        setDate(getDate())
+    }, [])
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setCourier(value)
+    }
+    const handleClick = async () => {
+        let res = await axios.put(`/api/courier/${id}`, { name: courier }, {
+            headers: {
+                "Authorization": `Bearer ${token}`
+            }
+        })
+        if ((res.data.message === "Success")) {
+            Swal.fire({
+                title: 'Updated',
+                text: 'Courier Updated',
+                icon: 'success',
+                confirmButtonText: 'Cool',
+                confirmButtonColor: '#303c54',
+                iconColor: '#303c54'
+            }).then(() => {
+                history.push('/courier');
+            });
+        } else {
+            Swal("Oops!", "Something went wrong!", "error");
+        }
+    }
+    const formatDate = (date) => {
+        let today = new Date(date);
+        let dd = String(today.getDate()).padStart(2, '0');
+        let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
+        let yyyy = today.getFullYear();
+
+        today = dd + '/' + mm + '/' + yyyy;
+        return today
+    }
+
+
+    return <div className="bg-light min-vh-100 d-flex flex-row align-items-start">
+        <CContainer>
+            <CRow className="justify-content-start">
+                <CCol md={8}>
+                    <CForm>
+                        <h1>Edit Courier</h1>
+                        <p className="text-medium-emphasis">Fill the fields and submit to add a new vendor</p>
+                        <CRow className=' flex-row align-items-center'>
+                            <CCol md={2} ><h5>Unique ID:</h5></CCol>
+                            <CCol><h6>{id}</h6></CCol>
+                            {/* <p className="text-medium-emphasis">(auto-generated)</p> */}
+                        </CRow>
+                        <CRow className=' flex-row align-items-center'>
+                            <CCol md={2} ><h5>Added On:</h5></CCol>
+                            <CCol><h6>{formatDate(data.createdAt)}</h6></CCol>
+                            {/* <p className="text-medium-emphasis">(auto-generated)</p> */}
+                        </CRow>
+
+                        <CInputGroup className="mb-3">
+                            <CInputGroupText>
+                                <CIcon icon={cil3d} />
+                            </CInputGroupText>
+                            <CFormInput
+                                type="text"
+                                placeholder="Courier Name"
+                                name="courier"
+                                value={courier}
+                                onChange={handleChange}
+                            />
+                        </CInputGroup>
+                        <CButton color="dark" className="px-4" onClick={handleClick}>
+                            Submit
+                        </CButton>
+
+                    </CForm>
+
+                </CCol>
+            </CRow>
+        </CContainer>
+    </div>;
+};
+
+export default EditCourier;

src/views/Vendor/AddVendor.js

@@ -13,6 +13,7 @@ import {
     CInputGroupText,
     CRow,
 } from '@coreui/react'
+import Swal from 'sweetalert2';
 import CIcon from '@coreui/icons-react'
 import { Country, State, City } from 'country-state-city';
 import { cilGlobeAlt, cilLocationPin, cilLockLocked, cilUser } from '@coreui/icons'
@@ -22,6 +23,7 @@ import { useEffect } from 'react';
 import axios from 'axios';
 import { getAllStates, getStatesOfCountry, getCitiesOfCountry } from 'country-state-city/dist/lib/state';
 import { isAutheticated } from 'src/auth';
+import { useHistory } from 'react-router-dom';
 
 
 const AddVendor = () => {
@@ -32,7 +34,9 @@ const AddVendor = () => {
         country: 'India',
         address_1: '',
         address_2: '',
+
     })
+    const history = useHistory()
     const { token } = isAutheticated();
     const [states, setStates] = useState([]);
     const [cities, setCities] = useState([]);
@@ -64,13 +68,24 @@ const AddVendor = () => {
     }, [vendor.country, vendor.state, countryCode, stateCode]);
 
     const handleClick = async () => {
-        let res = await axios.post('/api/vendor/add', vendor, {
+        let res = await axios.post('/api/vendor/add', { ...vendor, code }, {
             headers: {
                 "Authorization": `Bearer ${token}`
             }
         })
-        if (res) {
-            console.log(res.data);
+        if ((res.data.message === "Success")) {
+            Swal.fire({
+                title: 'Done',
+                text: 'Vendor Added',
+                icon: 'success',
+                confirmButtonText: 'ok',
+                confirmButtonColor: '#303c54',
+                iconColor: '#303c54'
+            }).then(() => {
+                history.push('/courier');
+            });
+        } else {
+            Swal("Oops!", "Something went wrong!", "error");
         }
     }
 

src/views/Vendor/EditVendor.js

@@ -0,0 +1,192 @@
+import React from 'react';
+import {
+    CButton,
+    CCard,
+    CCardBody,
+    CCardGroup,
+    CCol,
+    CContainer,
+    CForm,
+    CFormInput,
+    CFormSelect,
+    CInputGroup,
+    CInputGroupText,
+    CRow,
+} from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+import { Country, State, City } from 'country-state-city';
+import { cilGlobeAlt, cilLocationPin, cilLockLocked, cilUser } from '@coreui/icons'
+import { Link } from 'react-router-dom';
+import { useState } from 'react';
+import { useEffect } from 'react';
+import axios from 'axios';
+import { getAllStates, getStatesOfCountry, getCitiesOfCountry } from 'country-state-city/dist/lib/state';
+import { isAutheticated } from 'src/auth';
+import { useParams } from 'react-router-dom';
+import Swal from 'sweetalert2';
+import { useHistory } from 'react-router-dom';
+
+
+const AddVendor = () => {
+    const [vendor, setVendor] = useState({
+        vendor_name: '',
+        city: '',
+        state: 'Andhra Pradesh',
+        country: 'India',
+        address_1: '',
+        address_2: '',
+    })
+    const history = useHistory()
+    const { id } = useParams();
+    const { token } = isAutheticated();
+    const [states, setStates] = useState([]);
+    const [cities, setCities] = useState([]);
+    const [countryCode, setCountryCode] = useState('IN')
+    const [stateCode, setStateCode] = useState('AP')
+    const countries = Country.getAllCountries();
+    const allStates = State.getAllStates();
+    const [data, setData] = useState([]);
+    // const Code = Math.round(Math.random() * 1000000000);
+    const handleChange = (e) => (event) => {
+        setVendor({ ...vendor, [e]: event.target.value });
+    };
+    useEffect(() => {
+        const getData = async () => {
+            const res = await axios.get(`api/vendor/view/${id}`, {
+                headers: {
+                    "Access-Control-Allow-Origin": "*",
+                    "Content-type": "Application/json",
+                    "Authorization": `Bearer ${token}`
+                }
+            });
+            if (res) {
+                setData(res?.data?.Store)
+                setVendor(res?.data?.Store)
+            }
+
+
+            console.log(res.data);
+        }
+        getData();
+
+
+    }, []);
+    // console.log(vendor);
+    useEffect(() => {
+        const ccode = countries.find(item => item.name === vendor.country)
+        const scode = allStates.find(item => item.name === vendor.state)
+        console.log(ccode.isoCode + ":" + scode.isoCode);
+        console.log(vendor.country, vendor.state);
+        setCountryCode(ccode.isoCode)
+        setStateCode(scode.isoCode)
+        setStates(prev => State.getStatesOfCountry(countryCode))
+        setCities(prev => City.getCitiesOfState(countryCode, stateCode))
+    }, [vendor.country, vendor.state, countryCode, stateCode]);
+    console.log(data);
+    const handleClick = async () => {
+        let res = await axios.put(`/api/vendor/${id}`, vendor, {
+            headers: {
+                "Authorization": `Bearer ${token}`
+            }
+        })
+        if ((res.data.message === "Success")) {
+            Swal.fire({
+                title: 'Done',
+                text: 'vendor Updated',
+                icon: 'success',
+                confirmButtonText: 'Cool',
+                confirmButtonColor: '#303c54',
+                iconColor: '#303c54'
+            }).then(() => {
+                history.push('/vendors');
+            });
+        } else {
+            Swal("Oops!", "Something went wrong!", "error");
+        }
+    }
+
+    return <div className="bg-light min-vh-100 d-flex flex-row align-items-start">
+        <CContainer>
+            <CRow className="justify-content-start">
+                <CCol md={8}>
+                    <CForm>
+                        <h1>Edit Vendor</h1>
+                        {/* <p className="text-medium-emphasis">Fill the fields and submit to add a new vendor</p> */}
+                        <CRow className=' flex-row align-items-center'>
+                            <CCol md={2} ><h4>Code:</h4></CCol>
+                            <CCol><h6>{data?.code}</h6></CCol>
+                            {/* <p className="text-medium-emphasis">(auto-generated)</p> */}
+                        </CRow>
+                        <CInputGroup className="mb-3">
+                            <CInputGroupText>
+                                <CIcon icon={cilUser} />
+                            </CInputGroupText>
+                            <CFormInput placeholder="Vendor Name" autoComplete="vendorname" value={vendor.vendor_name} onChange={handleChange("vendor_name")} />
+                        </CInputGroup>
+                        <CInputGroup className="mb-3">
+                            <CInputGroupText>
+                                <CIcon icon={cilLocationPin} />
+                            </CInputGroupText>
+                            <CFormInput
+                                type="text"
+                                placeholder="Address Line 1"
+                                value={vendor.address_1}
+                                onChange={handleChange("address_1")}
+                            />
+                            <CFormInput
+                                type="text"
+                                placeholder="Address Line 2(area)"
+                                autoComplete="address2"
+                                value={vendor.address_2}
+                                onChange={handleChange("address_2")}
+                            />
+                        </CInputGroup>
+                        <CInputGroup className="mb-3">
+                            <CInputGroupText>
+                                <CIcon icon={cilGlobeAlt} />
+                            </CInputGroupText>
+                            <CFormSelect
+                                aria-label="Default select example"
+                                onChange={handleChange("country")}
+                            >
+                                <option value='India'>{data.country}</option>{
+                                    countries.map((item) =>
+                                        <option value={item.name}>{item.name}</option>
+                                    )
+                                }
+                            </CFormSelect>
+                            <CFormSelect
+                                aria-label="Default select example"
+                                onChange={handleChange("state")}
+                            >
+                                <option value='Chandigarh'>{data.state}</option>{
+                                    states.map((item) =>
+                                        <option value={item.name}>{item.name}</option>
+                                    )
+                                }
+                            </CFormSelect>
+                            <CFormSelect
+                                aria-label="Default select example"
+                                onChange={handleChange("city")}
+                                placeholder='Select City'
+                            >
+                                <option value='Mumbai'>{data.city}</option>{
+                                    cities.map((item) =>
+                                        <option value={item.name}>{item.name}</option>
+                                    )
+                                }
+                            </CFormSelect>
+                        </CInputGroup>
+                        <CButton color="dark" className="px-4" onClick={handleClick}>
+                            Submit
+                        </CButton>
+
+                    </CForm>
+
+                </CCol>
+            </CRow>
+        </CContainer>
+    </div>;
+};
+
+export default AddVendor;

src/views/Vendor/Vendor.js

@@ -3,14 +3,6 @@ import {
     CAvatar,
     CButton,
     CButtonGroup,
-    CCard,
-    CCardBody,
-    CCardFooter,
-    CCardHeader,
-    CCol,
-    CContainer,
-    CProgress,
-    CRow,
     CTable,
     CTableBody,
     CTableDataCell,
@@ -21,10 +13,14 @@ import {
 import { Link } from 'react-router-dom';
 import axios from 'axios';
 import { isAutheticated } from '../../auth';
+import { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import Swal from 'sweetalert2';
 
 const Vendor = () => {
     const { token } = isAutheticated();
-    console.log(token);
+    const history = useHistory();
+    const [data, setData] = useState([]);
 
     useEffect(() => {
         const getData = async () => {
@@ -35,12 +31,42 @@ const Vendor = () => {
                     "Authorization": `Bearer ${token}`
                 }
             });
-            console.log(res);
+            if (res) {
+                setData(res?.data?.Stores)
+            }
+
+
+            console.log(res.data);
         }
         getData();
+        data.map(item => console.log(item.city))
 
     }, []);
+    console.log(data);
 
+    const handleDelete = async (id) => {
+        const res = await axios.delete(`/api/vendor/${id}`, {
+            headers: {
+                "Access-Control-Allow-Origin": "*",
+                "Content-type": "Application/json",
+                "Authorization": `Bearer ${token}`
+            }
+        })
+        if ((res.data.message === 'Deleted Successfully')) {
+            Swal.fire({
+                title: 'Done',
+                text: 'Vendor Deleted',
+                icon: 'success',
+                confirmButtonText: 'Cool',
+                confirmButtonColor: '#303c54',
+                iconColor: '#303c54'
+            }).then(() => {
+                history.push('/vendors');
+            });
+        } else {
+            Swal("Oops!", "Something went wrong!", "error");
+        }
+    }
 
 
     return <div>
@@ -57,20 +83,37 @@ const Vendor = () => {
                     <CTableHeaderCell scope="col">Actions</CTableHeaderCell>
                 </CTableRow>
             </CTableHead>
-            <CTableBody>
-                <CTableRow>
-                    <CTableHeaderCell scope="row">Mark</CTableHeaderCell>
-                    <CTableDataCell>123</CTableDataCell>
-                    <CTableDataCell>Otto</CTableDataCell>
-                    <CTableDataCell>
-                        <CButtonGroup role="group" aria-label="Basic mixed styles example">
-                            <CButton color="warning">Edit</CButton>
-                            <CButton color="success">View</CButton>
-                            <CButton color="danger">Delete</CButton>
-                        </CButtonGroup>
-                    </CTableDataCell>
-                </CTableRow>
-            </CTableBody>
+            <tbody>{data.map(item => <tr><td>{item.vendor_name}</td>
+                <td>{item.code}</td>
+                <td>{item.city}</td>
+                <td><CButtonGroup role="group" aria-label="Basic mixed styles example">
+                    <Link to={`/editvendor/${item._id}`}>
+                        <CButton color="warning">Edit</CButton>
+                    </Link>
+                    <CButton color="success" >View</CButton>
+                    <CButton color="danger" onClick={() => handleDelete(item._id)}>Delete</CButton>
+                </CButtonGroup></td>
+            </tr>)}</tbody>
+            {/* <CTableBody>
+                {data?.map(item => {
+
+                    <CTableRow>
+                        <h1>{item.city}</h1>
+                        <CTableHeaderCell scope="row">{item.vendor_name}</CTableHeaderCell>
+                        <CTableDataCell>{item.code}</CTableDataCell>
+                        <CTableDataCell>{item.city}</CTableDataCell>
+                        <CTableDataCell>
+                            <CButtonGroup role="group" aria-label="Basic mixed styles example">
+                                <CButton color="warning">Edit</CButton>
+                                <CButton color="success">View</CButton>
+                                <CButton color="danger">Delete</CButton>
+                            </CButtonGroup>
+                        </CTableDataCell>
+                    </CTableRow>
+                })}
+
+
+            </CTableBody> */}
         </CTable>
     </div>;
 };