kyc updated

src/views/pages/Kyc/MessageList.js

@@ -2,6 +2,16 @@
 import React from 'react'
 
 const MessageList = ({ messages }) => {
+  const formatAMPM = (date) => {
+    var hours = new Date(date).getHours()
+    var minutes = new Date(date).getMinutes()
+    var ampm = hours >= 12 ? 'PM' : 'AM'
+    hours = hours % 12
+    hours = hours ? hours : 12 // the hour '0' should be '12'
+    minutes = minutes < 10 ? '0' + minutes : minutes
+    var strTime = hours + ':' + minutes + ' ' + ampm
+    return strTime
+  }
   return (
     <>
       {messages.map((msg, index) => (
@@ -17,7 +27,8 @@ const MessageList = ({ messages }) => {
         >
           <div style={{ fontWeight: 'bold', marginBottom: '5px', color: 'white' }}>{msg.user}</div>
           <div style={{ fontWeight: 'bold', marginBottom: '5px', color: 'white' }}>
-            {msg.replyDate}
+            {new Date(`${msg.replyDate}`).toDateString()}
+            <span> , {`${formatAMPM(msg?.replyDate)}`}</span>
           </div>
           <div style={{ color: 'white' }}>{msg.message}</div>
         </div>

src/views/pages/Kyc/imgModal.js

@@ -0,0 +1,55 @@
+/* eslint-disable react/prop-types */
+import React from 'react'
+import { Box, Modal, Typography, IconButton, Button } from '@mui/material'
+import CloseIcon from '@mui/icons-material/Close'
+
+const ImgModal = ({ open, handleClose, imageUrl }) => {
+  const handleDownload = () => {
+    const link = document.createElement('a')
+    link.href = imageUrl
+    link.download = imageUrl.split('/').pop()
+    link.click()
+  }
+
+  return (
+    <Modal
+      open={open}
+      onClose={handleClose}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+    >
+      <Box sx={{ ...modalStyle, width: '90%', height: '90%' }}>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+          <Typography id="modal-modal-title" variant="h6" component="h2">
+            Document Image
+          </Typography>
+          <IconButton onClick={handleClose}>
+            <CloseIcon />
+          </IconButton>
+        </Box>
+        <Box sx={{ display: 'flex', justifyContent: 'center', mb: 2 }}>
+          <img
+            src={imageUrl}
+            alt="Document"
+            style={{ maxWidth: '100%', maxHeight: '600px', objectFit: 'contain' }}
+          />
+        </Box>
+        <Button variant="contained" onClick={handleDownload} sx={{ textTransform: 'unset' }}>
+          Download
+        </Button>
+      </Box>
+    </Modal>
+  )
+}
+
+const modalStyle = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  bgcolor: 'background.paper',
+  boxShadow: 24,
+  p: 4,
+}
+
+export default ImgModal

src/views/pages/Kyc/kyc.js

@@ -195,55 +195,59 @@ const Kyc = () => {
               </TableRow>
             </TableHead>
             <TableBody>
-              {filteredRows
-                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-                .map((row) => (
-                  <TableRow key={row._id}>
-                    <TableCell>{row._id}</TableCell>
-                    <TableCell>{row.trade_name}</TableCell>
-                    <TableCell>
-                      {new Date(`${row?.createdAt}`).toDateString()}
-                      <span> , {`${formatAMPM(row?.createdAt)}`}</span>
-                    </TableCell>
-                    <TableCell>{row.status}</TableCell>
-                    <TableCell>
-                      <Tooltip title="View">
-                        <Button
-                          sx={{ mr: '1rem', textTransform: 'unset' }}
-                          color="primary"
-                          variant="contained"
-                          onClick={() => handleViewClick(row._id)}
-                        >
-                          View
-                        </Button>
-                      </Tooltip>
-                      {tabIndex === 0 && (
-                        <>
-                          <Tooltip title="Approve">
-                            <Button
-                              sx={{ mr: '1rem', textTransform: 'unset' }}
-                              color="success"
-                              variant="contained"
-                              onClick={() => handleApproveClick(row._id)}
-                            >
-                              Approve
-                            </Button>
-                          </Tooltip>
-                          <Tooltip title="Reject">
-                            <Button
-                              sx={{ mr: '1rem', textTransform: 'unset' }}
-                              color="error"
-                              variant="contained"
-                              onClick={() => handleRejectClick(row._id)}
-                            >
-                              Reject
-                            </Button>
-                          </Tooltip>
-                        </>
-                      )}
-                    </TableCell>
-                  </TableRow>
-                ))}
+              {filteredRows.length !== 0 &&
+                filteredRows
+                  .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                  .map((row) => (
+                    <TableRow key={row._id}>
+                      <TableCell>{row._id}</TableCell>
+                      <TableCell>{row.trade_name}</TableCell>
+                      <TableCell>
+                        {new Date(`${row?.createdAt}`).toDateString()}
+                        <span> , {`${formatAMPM(row?.createdAt)}`}</span>
+                      </TableCell>
+                      <TableCell>{row.status}</TableCell>
+                      <TableCell>
+                        <Tooltip title="View">
+                          <Button
+                            sx={{ mr: '1rem', textTransform: 'unset' }}
+                            color="primary"
+                            variant="contained"
+                            onClick={() => handleViewClick(row._id)}
+                          >
+                            View
+                          </Button>
+                        </Tooltip>
+                        {tabIndex === 0 && (
+                          <>
+                            <Tooltip title="Approve">
+                              <Button
+                                sx={{ mr: '1rem', textTransform: 'unset' }}
+                                color="success"
+                                variant="contained"
+                                onClick={() => handleApproveClick(row._id)}
+                              >
+                                Approve
+                              </Button>
+                            </Tooltip>
+                            <Tooltip title="Reject">
+                              <Button
+                                sx={{ mr: '1rem', textTransform: 'unset' }}
+                                color="error"
+                                variant="contained"
+                                onClick={() => handleRejectClick(row._id)}
+                              >
+                                Reject
+                              </Button>
+                            </Tooltip>
+                          </>
+                        )}
+                      </TableCell>
+                    </TableRow>
+                  ))}
+              {filteredRows.length === 0 && (
+                <h5 style={{ textAlign: 'center' }}>No kyc available</h5>
+              )}
             </TableBody>
           </Table>
         </TableContainer>

src/views/pages/Kyc/kycDetails.js

@@ -17,6 +17,7 @@ import Axios from '../../../axios'
 import { isAutheticated } from '../../../auth'
 import MessageList from './MessageList'
 import Swal from 'sweetalert2'
+import ImgModal from './imgModal'
 
 const KycDetails = () => {
   const { id } = useParams()
@@ -25,6 +26,8 @@ const KycDetails = () => {
   const [rejectionReason, setRejectionReason] = useState('')
   const [selectedRowId, setSelectedRowId] = useState(null)
   const [retailerDetails, setRetailerDetails] = useState(null)
+  const [openImageModal, setOpenImageModal] = useState(false)
+  const [selectedImageUrl, setSelectedImageUrl] = useState('')
   const token = isAutheticated()
 
   const navigate = useNavigate()
@@ -118,7 +121,7 @@ const KycDetails = () => {
         `/api/kyc/update/${id}`,
         {
           status: 'approved',
-          user: 'Principal Distributer', // Replace with actual user type
+          // user: 'Principal Distributer', // Replace with actual user type
         },
         {
           headers: {
@@ -156,6 +159,12 @@ const KycDetails = () => {
     setOpenApproveModal(true)
   }
 
+  const handleImageClick = (url) => {
+    setSelectedImageUrl(url)
+    console.log(selectedImageUrl)
+    setOpenImageModal(true)
+  }
+
   if (!retailerDetails) {
     return <Typography>Loading...</Typography>
   }
@@ -229,6 +238,7 @@ const KycDetails = () => {
               variant="square"
               src={retailerDetails.pan_img.url}
               sx={{ width: 100, height: 100, mb: 2 }}
+              onClick={() => handleImageClick(retailerDetails.pan_img.url)}
             />
             <Typography>
               <strong>Aadhar Number:</strong> {retailerDetails.aadhar_number}
@@ -237,6 +247,7 @@ const KycDetails = () => {
               variant="square"
               src={retailerDetails.aadhar_img.url}
               sx={{ width: 100, height: 100, mb: 2 }}
+              onClick={() => handleImageClick(retailerDetails.aadhar_img.url)}
             />
             <Typography>
               <strong>GST Number:</strong> {retailerDetails.gst_number}
@@ -245,6 +256,7 @@ const KycDetails = () => {
               variant="square"
               src={retailerDetails.gst_img.url}
               sx={{ width: 100, height: 100, mb: 2 }}
+              onClick={() => handleImageClick(retailerDetails.gst_img.url)}
             />
           </Grid>
           <Grid item xs={6}>
@@ -255,6 +267,7 @@ const KycDetails = () => {
               variant="square"
               src={retailerDetails.pesticide_license_img.url}
               sx={{ width: 100, height: 100, mb: 2 }}
+              onClick={() => handleImageClick(retailerDetails.pesticide_license_img.url)}
             />
             <Typography>
               <strong>Fertilizer License (optional):</strong>
@@ -264,6 +277,7 @@ const KycDetails = () => {
                 variant="square"
                 src={retailerDetails.fertilizer_license_img.url}
                 sx={{ width: 100, height: 100, mb: 2 }}
+                onClick={() => handleImageClick(retailerDetails.fertilizer_license_img.url)}
               />
             ) : (
               <Typography>Img not available</Typography>
@@ -275,6 +289,7 @@ const KycDetails = () => {
               variant="square"
               src={retailerDetails.selfie_entrance_img.url}
               sx={{ width: 100, height: 100, mb: 2 }}
+              onClick={() => handleImageClick(retailerDetails.selfie_entrance_img.url)}
             />
           </Grid>
         </Grid>
@@ -307,7 +322,7 @@ const KycDetails = () => {
             </Typography>
             <Typography>
               <strong>Resubmitted on:</strong>{' '}
-              {new Date(`${retailerDetails?.createdAt}`).toDateString()}
+              {new Date(`${retailerDetails?.updatedAt}`).toDateString()}
               <span> , {`${formatAMPM(retailerDetails?.createdAt)}`}</span>
             </Typography>
           </Grid>
@@ -422,6 +437,11 @@ const KycDetails = () => {
           </Paper>
         </>
       )}
+      <ImgModal
+        open={openImageModal}
+        handleClose={() => setOpenImageModal(false)}
+        imageUrl={selectedImageUrl}
+      />
     </Box>
   )
 }