added pading in check-in check-out form

This commit is contained in:
pramod.mahajan 2025-10-10 19:54:20 +05:30
parent c921dbff09
commit bb2d7b8923
3 changed files with 137 additions and 96 deletions

View File

@ -132,9 +132,12 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
}, [showPending]); }, [showPending]);
useEffect(() => { useEffect(() => {
if (data?.length) {
filtering(data); filtering(data);
}, [data, showPending]); }
}, [data, showPending]);
// New useEffect to handle search filtering // New useEffect to handle search filtering
const filteredSearchData = useMemo(() => { const filteredSearchData = useMemo(() => {
@ -148,31 +151,6 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
}); });
}, [processedData, searchTerm]); }, [processedData, searchTerm]);
// const filteredSearchData = useMemo(() => {
// let tempData = processedData;
// if (searchTerm) {
// const lowercasedSearchTerm = searchTerm.toLowerCase();
// tempData = tempData.filter((item) => {
// const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
// return fullName.includes(lowercasedSearchTerm);
// });
// }
// if (filters?.selectedOrganization) {
// tempData = tempData.filter(
// (item) => item.organization?.name === filters.selectedOrganization
// );
// }
// if (filters?.selectedServices?.length > 0) {
// tempData = tempData.filter((item) =>
// filters.selectedServices.includes(item.service?.name)
// );
// }
// return tempData;
// }, [processedData, searchTerm, filters]);
const { const {

View File

@ -110,8 +110,8 @@ const CheckInCheckOut = ({ modeldata, closeModal, handleSubmitForm }) => {
}, [projectNames, projectId, loading]); }, [projectNames, projectId, loading]);
return ( return (
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}> <form className="row p-2" onSubmit={handleSubmit(onSubmit)}>
<div className="col-12 d-flex justify-content-center"> <div className="col-12 d-flex justify-content-center mt-2">
<label className="fs-5 text-dark text-center"> <label className="fs-5 text-dark text-center">
{modeldata?.checkInTime && !modeldata?.checkOutTime {modeldata?.checkInTime && !modeldata?.checkOutTime
? `Check out for ${currentProject?.name}` ? `Check out for ${currentProject?.name}`
@ -220,7 +220,7 @@ export const Regularization = ({ modeldata, closeModal, handleSubmitForm }) => {
}; };
return ( return (
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}> <form className="row " onSubmit={handleSubmit(onSubmit)}>
<div className="col-12 col-md-12"> <div className="col-12 col-md-12">
<p>Regularize Attendance</p> <p>Regularize Attendance</p>
<label className="form-label" htmlFor="description"> <label className="form-label" htmlFor="description">

View File

@ -1,4 +1,3 @@
import { import {
useState, useState,
Suspense, Suspense,
@ -22,7 +21,13 @@ import ContactProfile from "../../components/Directory/ContactProfile";
import GlobalModel from "../../components/common/GlobalModel"; import GlobalModel from "../../components/common/GlobalModel";
import ConfirmModal from "../../components/common/ConfirmModal"; import ConfirmModal from "../../components/common/ConfirmModal";
import { useSelectedProject } from "../../slices/apiDataManager"; import { useSelectedProject } from "../../slices/apiDataManager";
import { exportToCSV, exportToExcel, exportToPDF, exportToPDF1, printTable } from "../../utils/tableExportUtils"; import {
exportToCSV,
exportToExcel,
exportToPDF,
exportToPDF1,
printTable,
} from "../../utils/tableExportUtils";
const NotesPage = lazy(() => import("./NotesPage")); const NotesPage = lazy(() => import("./NotesPage"));
const ContactsPage = lazy(() => import("./ContactsPage")); const ContactsPage = lazy(() => import("./ContactsPage"));
@ -65,46 +70,51 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
const [ContactData, setContactData] = useState([]); const [ContactData, setContactData] = useState([]);
const handleExport = (type) => { const handleExport = (type) => {
let exportData = activeTab === "notes" ? notesData : ContactData; let exportData = activeTab === "notes" ? notesData : ContactData;
if (!exportData?.length) return; if (!exportData?.length) return;
switch (type) { switch (type) {
case "csv": case "csv":
exportToCSV(exportData, activeTab === "notes" ? "Notes" : "Contacts"); exportToCSV(exportData, activeTab === "notes" ? "Notes" : "Contacts");
break; break;
case "excel": case "excel":
exportToExcel(exportData, activeTab === "notes" ? "Notes" : "Contacts"); exportToExcel(exportData, activeTab === "notes" ? "Notes" : "Contacts");
break; break;
case "pdf": case "pdf":
if (activeTab === "notes") { if (activeTab === "notes") {
exportToPDF1(exportData, "Notes"); exportToPDF1(exportData, "Notes");
} else { } else {
// Columns for Contacts PDF // Columns for Contacts PDF
const columns = ["Email", "Phone", "Organization", "Category", "Tags"]; const columns = [
"Email",
"Phone",
"Organization",
"Category",
"Tags",
];
// Sanitize and trim long text to avoid PDF overflow // Sanitize and trim long text to avoid PDF overflow
const sanitizedData = exportData.map(item => ({ const sanitizedData = exportData.map((item) => ({
Email: (item.Email || "").slice(0, 40), Email: (item.Email || "").slice(0, 40),
Phone: (item.Phone || "").slice(0, 20), Phone: (item.Phone || "").slice(0, 20),
Organization: (item.Organization || "").slice(0, 30), Organization: (item.Organization || "").slice(0, 30),
Category: (item.Category || "").slice(0, 20), Category: (item.Category || "").slice(0, 20),
Tags: (item.Tags || "").slice(0, 40), Tags: (item.Tags || "").slice(0, 40),
})); }));
// Export with proper spacing
exportToPDF(sanitizedData, "Contacts", columns, {
columnWidths: [200, 120, 180, 120, 200], // Adjust widths per column
fontSizeHeader: 12,
fontSizeRow: 10,
rowHeight: 25,
});
}
break;
default:
console.warn("Unsupported export type");
}
};
// Export with proper spacing
exportToPDF(sanitizedData, "Contacts", columns, {
columnWidths: [200, 120, 180, 120, 200], // Adjust widths per column
fontSizeHeader: 12,
fontSizeRow: 10,
rowHeight: 25,
});
}
break;
default:
console.warn("Unsupported export type");
}
};
const { data, isLoading, isError, error } = useBucketList(); const { data, isLoading, isError, error } = useBucketList();
@ -173,8 +183,9 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
<ul className="nav nav-tabs"> <ul className="nav nav-tabs">
<li className="nav-item cursor-pointer"> <li className="nav-item cursor-pointer">
<a <a
className={`nav-link ${activeTab === "notes" ? "active" : "" className={`nav-link ${
} fs-6`} activeTab === "notes" ? "active" : ""
} fs-6`}
onClick={(e) => handleTabClick("notes", e)} onClick={(e) => handleTabClick("notes", e)}
> >
<i className="bx bx-notepad bx-sm me-1_5"></i> <i className="bx bx-notepad bx-sm me-1_5"></i>
@ -183,8 +194,9 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
</li> </li>
<li className="nav-item cursor-pointer"> <li className="nav-item cursor-pointer">
<a <a
className={`nav-link ${activeTab === "contacts" ? "active" : "" className={`nav-link ${
} fs-6`} activeTab === "contacts" ? "active" : ""
} fs-6`}
onClick={(e) => handleTabClick("contacts", e)} onClick={(e) => handleTabClick("contacts", e)}
> >
<i className="bx bxs-contact bx-sm me-1_5"></i> <i className="bx bxs-contact bx-sm me-1_5"></i>
@ -216,21 +228,29 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
value={searchContact} value={searchContact}
onChange={(e) => setsearchContact(e.target.value)} onChange={(e) => setsearchContact(e.target.value)}
/> />
<button <div className="d-none d-md-flex gap-2">
className={`btn btn-sm p-1 ${gridView ? " btn-primary" : " btn-outline-primary" {" "}
<button
className={`btn btn-sm p-1 ${
gridView
? " btn-primary"
: " btn-outline-primary"
}`} }`}
onClick={() => setGridView(true)} onClick={() => setGridView(true)}
> >
<i className="bx bx-grid-alt"></i> <i className="bx bx-grid-alt"></i>
</button> </button>
<button
<button className={`btn btn-sm p-1 ${
className={`btn btn-sm p-1 ${!gridView ? "btn-primary" : "btn-outline-primary" !gridView
? "btn-primary"
: "btn-outline-primary"
}`} }`}
onClick={() => setGridView(false)} onClick={() => setGridView(false)}
> >
<i className="bx bx-list-ul"></i> <i className="bx bx-list-ul"></i>
</button> </button>
</div>
</div> </div>
</div> </div>
)} )}
@ -246,7 +266,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
<i className="bx bx-dots-vertical-rounded text-muted bx-md"></i> <i className="bx bx-dots-vertical-rounded text-muted bx-md"></i>
</button> </button>
<ul className="dropdown-menu dropdown-menu-end shadow-sm p-2" style={{ minWidth: "220px" }}> <ul className="dropdown-menu dropdown-menu-end shadow-sm ">
{activeTab === "contacts" && ( {activeTab === "contacts" && (
<li className="dropdown-item d-flex align-items-center"> <li className="dropdown-item d-flex align-items-center">
<div className="form-check form-switch mb-0"> <div className="form-check form-switch mb-0">
@ -256,30 +276,73 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
role="switch" role="switch"
id="inactiveContactsSwitch" id="inactiveContactsSwitch"
checked={showActive} checked={showActive}
onChange={(e) => setShowActive(e.target.checked)} onChange={(e) =>
setShowActive(e.target.checked)
}
/> />
</div> </div>
<span>{showActive ? "Active Contacts" : "Inactive Contacts"}</span> <span>
{showActive
? "Active Contacts"
: "Inactive Contacts"}
</span>
</li> </li>
)} )}
<li> <li>
<button className="dropdown-item d-flex align-items-center gap-2" onClick={() => handleExport("csv")}> <button
<i className="bx bx-file"></i><span>Export to CSV</span> className="dropdown-item d-flex align-items-center gap-2"
onClick={() => handleExport("csv")}
>
<i className="bx bx-file"></i>
<span>Export to CSV</span>
</button> </button>
</li> </li>
<li> <li>
<button className="dropdown-item d-flex align-items-center gap-2" onClick={() => handleExport("excel")}> <button
<i className="bx bx-spreadsheet"></i><span>Export to Excel</span> className="dropdown-item d-flex align-items-center gap-2"
onClick={() => handleExport("excel")}
>
<i className="bx bx-spreadsheet"></i>
<span>Export to Excel</span>
</button> </button>
</li> </li>
<li> <li>
<button className="dropdown-item d-flex align-items-center gap-2" onClick={() => handleExport("pdf")}> <button
<i className="bx bxs-file-pdf"></i><span>Export to PDF</span> className="dropdown-item d-flex align-items-center gap-2"
onClick={() => handleExport("pdf")}
>
<i className="bx bxs-file-pdf"></i>
<span>Export to PDF</span>
</button> </button>
</li> </li>
<li className={`d-block d-md-none ${activeTab === "contacts" ? "d-block":"d-none"}`}>
<span
className={`dropdown-item ${
gridView ? " text-primary" : ""
}`}
onClick={() => setGridView(true)}
>
<i className="bx bx-grid-alt"></i> Card View
</span>
</li>
<li className={` d-block d-md-none ${activeTab === "contacts" ? "d-block":"d-none"}`}>
<span
className={`dropdown-item ${
!gridView ? "text-primary" : ""
}`}
onClick={() => setGridView(false)}
>
<i className="bx bx-list-ul"></i> List View
</span>
</li>
{/* Divider */} {/* Divider */}
{activeTab === "contacts" && <li><hr className="dropdown-divider" /></li>} {activeTab === "contacts" && (
<li>
<hr className="dropdown-divider" />
</li>
)}
</ul> </ul>
</div> </div>
</div> </div>