Changes in document manager.

src/components/Employee/DocumentForm.jsx

@@ -1,15 +1,14 @@
-// DocumentForm.js
 import React, { useState, useEffect } from "react";
 import { z } from "zod";
 
 // Helper function to format file size
-// const formatFileSize = (bytes) => {
+const formatFileSize = (bytes) => {
-//   if (bytes === 0) return "0 Bytes";
+  if (bytes === 0) return "0 Bytes";
-//   const k = 1024;
+  const k = 1024;
-//   const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
-//   const i = Math.floor(Math.log(bytes) / Math.log(k));
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
-//   return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
-// };
+};
 
 // Define the Zod schema for the form
 const DocumentSchema = z.object({
@@ -25,7 +24,7 @@ const DocumentSchema = z.object({
     .refine(
       (files) => files.every((file) => file.fileSize <= 5 * 1024 * 1024),
       {
-        message: "File size exceeds 5MB.",
+        message: "File size must be 5MB or less.",
       }
     ),
 });
@@ -89,10 +88,9 @@ const DocumentForm = ({ initialData, onSave, onCancel }) => {
       onSave({ ...formData, files });
     } else {
       const fieldErrors = result.error.flatten().fieldErrors;
-      const fileErrors = fieldErrors.files ? [{ message: fieldErrors.files.join(", ") }] : [];
       setErrors({
         ...fieldErrors,
-        billAttachments: fileErrors,
+        files: fieldErrors.files ? fieldErrors.files[0] : null,
       });
     }
   };
@@ -219,11 +217,9 @@ const DocumentForm = ({ initialData, onSave, onCancel }) => {
                     onClick={(e) => (e.target.value = null)}
                   />
                 </div>
-                {errors.billAttachments && (
+                {errors.files && (
                   <div className="text-danger small mt-1">
-                    {errors.billAttachments.map((err, idx) => (
+                    {errors.files}
-                      <div key={idx}>{err.message || err.fileSize?.message}</div>
-                    ))}
                   </div>
                 )}
                 {files.length > 0 && (
@@ -241,7 +237,7 @@ const DocumentForm = ({ initialData, onSave, onCancel }) => {
                             {file.fileName}
                           </span>
                           <span className="text-body-secondary small d-block">
-                            {/* {formatFileSize(file.fileSize)} */}
+                            {formatFileSize(file.fileSize)}
                           </span>
                         </div>
                         <i

src/components/Employee/EmpDocuments.jsx

@@ -1,4 +1,3 @@
-// DocumentManager.js
 import React, { useState } from "react";
 import DocumentForm from "./DocumentForm";
 import ConfirmModal from "../common/ConfirmModal";
@@ -8,6 +7,9 @@ const EmpDocuments = () => {
   const [documents, setDocuments] = useState([
     {
       name: "Adhar Card",
+      documentNumber: "1234-5678-9012",
+      category: "private",
+      documentType: "Aadhar Card",
       uploadedDate: "21 Aug, 2025",
       uploadedBy: "Alice Johnson",
       fileType: "PDF",
@@ -17,6 +19,9 @@ const EmpDocuments = () => {
     },
     {
       name: "Pan Card",
+      documentNumber: "ABCDE1234F",
+      category: "public",
+      documentType: "Pan Card",
       uploadedDate: "15 Jul, 2025",
       uploadedBy: "Bob Smith",
       fileType: "Excel",
@@ -26,6 +31,9 @@ const EmpDocuments = () => {
     },
     {
       name: "Driving Licence",
+      documentNumber: "DL-2025-12345",
+      category: "private",
+      documentType: "Driving License",
       uploadedDate: "10 Aug, 2025",
       uploadedBy: "Carol Lee",
       fileType: "Word",
@@ -33,30 +41,11 @@ const EmpDocuments = () => {
       initials: "DL",
       files: [],
     },
-    {
-      name: "",
-      uploadedDate: "05 Aug, 2025",
-      uploadedBy: "David Kim",
-      fileType: "PNG",
-      url: "#",
-      initials: "DM",
-      files: [],
-    },
-    {
-      name: "Client Presentation",
-      uploadedDate: "18 Aug, 2025",
-      uploadedBy: "Eve Brown",
-      fileType: "PPT",
-      url: "#",
-      initials: "CP",
-      files: [],
-    },
   ]);
 
   const [showForm, setShowForm] = useState(false);
   const [currentDocument, setCurrentDocument] = useState(null);
 
-  // New state for the delete modal
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [documentToDelete, setDocumentToDelete] = useState(null);
 
@@ -79,16 +68,33 @@ const EmpDocuments = () => {
   };
 
   const handleSave = (newDoc) => {
+    // Helper function to get the file type from the file name
+    const getFileType = (fileName) => {
+      const parts = fileName.split('.');
+      return parts.length > 1 ? parts.pop().toUpperCase() : 'N/A';
+    };
+
+    // Create a new document object with all required fields
+    const updatedDoc = {
+      ...newDoc,
+      uploadedDate: new Date().toLocaleDateString("en-US", { day: '2-digit', month: 'short', year: 'numeric' }),
+      uploadedBy: "Current User", // Replace with actual user name
+      initials: newDoc.name ? newDoc.name.slice(0, 2).toUpperCase() : "--",
+      // Infer fileType from the first file name if available
+      fileType: newDoc.files && newDoc.files.length > 0 ? getFileType(newDoc.files[0].fileName) : 'N/A',
+    };
+
     if (currentDocument) {
       // Edit an existing document
       setDocuments(
-        documents.map((doc) => (doc === currentDocument ? { ...newDoc, initials: doc.initials } : doc))
+        documents.map((doc) => (doc === currentDocument ? { ...updatedDoc, initials: doc.initials } : doc))
       );
     } else {
       // Create a new document
-      setDocuments([...documents, { ...newDoc, initials: newDoc.name ? newDoc.name.slice(0, 2).toUpperCase() : "--" }]);
+      setDocuments([updatedDoc, ...documents]); // Prepend new doc for better visibility
     }
     setShowForm(false);
+    setCurrentDocument(null);
   };
 
   const handleCancel = () => {
@@ -97,21 +103,18 @@ const EmpDocuments = () => {
   };
 
   const handleDelete = (doc) => {
-    // Set the document to be deleted and open the modal
     setDocumentToDelete(doc);
     setIsDeleteModalOpen(true);
   };
 
-  // New function to handle the confirmed deletion
   const handleConfirmDelete = () => {
     if (documentToDelete) {
       setDocuments(documents.filter((doc) => doc !== documentToDelete));
-      setIsDeleteModalOpen(false); // Close the modal
+      setIsDeleteModalOpen(false);
-      setDocumentToDelete(null); // Clear the document to delete
+      setDocumentToDelete(null);
     }
   };
 
-  // Function to close the delete modal
   const handleCloseDeleteModal = () => {
     setIsDeleteModalOpen(false);
     setDocumentToDelete(null);
@@ -145,10 +148,11 @@ const EmpDocuments = () => {
         <table className="table mb-0">
           <thead>
             <tr className="text-center">
-              <th colSpan={2}>Document Name</th>
+              <th>Document Name</th>
+              <th>Document Number</th>
+              <th>Document Type</th>
               <th>Uploaded Date</th>
-              <th>Uploaded By</th>
+              {/* <th>Uploaded By</th> */}
-              <th>File Type</th>
               <th>Action</th>
             </tr>
           </thead>
@@ -156,7 +160,7 @@ const EmpDocuments = () => {
             {filteredDocuments.length > 0 ? (
               filteredDocuments.map((doc, index) => (
                 <tr key={index} className="align-middle" style={{ height: "50px" }}>
-                  <td colSpan={2}>
+                  <td>
                     <div className="d-flex align-items-center">
                       <div
                         className="avatar bg-secondary text-white rounded-circle d-flex align-items-center justify-content-center"
@@ -174,9 +178,10 @@ const EmpDocuments = () => {
                       </div>
                     </div>
                   </td>
+                  <td>{doc.documentNumber}</td>
+                  <td>{doc.documentType}</td>
                   <td>{doc.uploadedDate}</td>
-                  <td>{doc.uploadedBy}</td>
+                  {/* <td>{doc.uploadedBy}</td> */}
-                  <td>{doc.fileType}</td>
                   <td className="text-center">
                     <i
                       className="bx bx-edit text-secondary cursor-pointer me-2"
@@ -229,8 +234,6 @@ const EmpDocuments = () => {
             message={`Are you sure you want to delete "${documentToDelete?.name || "Unnamed Document"}"?`}
             onSubmit={handleConfirmDelete}
             onClose={handleCloseDeleteModal}
-            // `loading` prop is not needed for this example but can be added
-            // `paramData` is also not needed since we're using a state variable
           />
         </div>
       )}