From e4c54ab2397120095014fce89a33508114ab0b29 Mon Sep 17 00:00:00 2001 From: Kartik Sharma Date: Fri, 22 Aug 2025 10:23:12 +0530 Subject: [PATCH] Changes in document manager. --- src/components/Employee/DocumentForm.jsx | 28 ++++----- src/components/Employee/EmpDocuments.jsx | 75 ++++++++++++------------ 2 files changed, 51 insertions(+), 52 deletions(-) diff --git a/src/components/Employee/DocumentForm.jsx b/src/components/Employee/DocumentForm.jsx index fbbba23c..70c72a4e 100644 --- a/src/components/Employee/DocumentForm.jsx +++ b/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) => { -// if (bytes === 0) return "0 Bytes"; -// const k = 1024; -// const sizes = ["Bytes", "KB", "MB", "GB", "TB"]; -// const i = Math.floor(Math.log(bytes) / Math.log(k)); -// return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]; -// }; +const formatFileSize = (bytes) => { + if (bytes === 0) return "0 Bytes"; + const k = 1024; + const sizes = ["Bytes", "KB", "MB", "GB", "TB"]; + const i = Math.floor(Math.log(bytes) / Math.log(k)); + 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)} /> - {errors.billAttachments && ( + {errors.files && (
- {errors.billAttachments.map((err, idx) => ( -
{err.message || err.fileSize?.message}
- ))} + {errors.files}
)} {files.length > 0 && ( @@ -241,7 +237,7 @@ const DocumentForm = ({ initialData, onSave, onCancel }) => { {file.fileName} - {/* {formatFileSize(file.fileSize)} */} + {formatFileSize(file.fileSize)} { 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 - setDocumentToDelete(null); // Clear the document to delete + setIsDeleteModalOpen(false); + setDocumentToDelete(null); } }; - // Function to close the delete modal const handleCloseDeleteModal = () => { setIsDeleteModalOpen(false); setDocumentToDelete(null); @@ -145,10 +148,11 @@ const EmpDocuments = () => { - + + + - - + {/* */} @@ -156,7 +160,7 @@ const EmpDocuments = () => { {filteredDocuments.length > 0 ? ( filteredDocuments.map((doc, index) => ( - + + - - + {/* */}
Document NameDocument NameDocument NumberDocument Type Uploaded DateUploaded ByFile TypeUploaded ByAction
+
{
{doc.documentNumber}{doc.documentType} {doc.uploadedDate}{doc.uploadedBy}{doc.fileType}{doc.uploadedBy} { 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 /> )} @@ -238,4 +241,4 @@ const EmpDocuments = () => { ); }; -export default EmpDocuments; +export default EmpDocuments; \ No newline at end of file