382 lines
16 KiB
JavaScript
382 lines
16 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import { studentFormFeilds, facultyFormFeilds } from "./FormFeilds";
|
|
import { useParams, useRouteLoaderData } from "react-router-dom";
|
|
import ExpenseForm from "./components/ExpenseForm";
|
|
import ExpenseTable from "./components/ExpenseTable";
|
|
import PdfViewer from "../../components/PdfViewer";
|
|
import PdfActions from "../ApplicationView/PdfActions";
|
|
|
|
function Input({
|
|
values,
|
|
errors,
|
|
touched,
|
|
handleChange,
|
|
handleBlur,
|
|
setFieldValue,
|
|
formFeilds,
|
|
}) {
|
|
const applicationId = useParams().applicationId;
|
|
|
|
const [showMiniFrom, setShowMiniForm] = useState(false);
|
|
const [expensesEditValues, setExpensesEditValues] = useState(null);
|
|
const [pdfIsVisible, setPdfIsVisible] = useState(false);
|
|
const [fileUrl, setFileUrl] = useState(null);
|
|
|
|
return formFeilds.map((section, sectionIndex) => {
|
|
if (
|
|
section?.parent?.name &&
|
|
!section?.parent?.values?.includes(values[section?.parent?.name])
|
|
) {
|
|
section.fields.forEach((formFeild) => {
|
|
if (typeof values[formFeild?.name] === "boolean") {
|
|
values[formFeild.name] = false;
|
|
} else {
|
|
values[formFeild.name] = "";
|
|
}
|
|
});
|
|
return null;
|
|
}
|
|
return (
|
|
<div
|
|
key={sectionIndex}
|
|
className="space-y-4 bg-white dark:bg-google-gray p-6 rounded-lg shadow-md min-w-fit border-t-4 border-red-700 mb-4 transition-colors duration-200"
|
|
>
|
|
<h3 className="text-xl font-semibold mt-2 mb-4 dark:text-google-text">
|
|
{section.label}
|
|
</h3>
|
|
<div
|
|
className={`${
|
|
section.label === "Expense Details"
|
|
? "grid grid-cols-1" // Apply single column grid when the label is "Expense Details"
|
|
: section.label === "Travel Polciy Report"
|
|
? "grid grid-cols-2" // Apply two-column grid when the label is "Travel Polciy Report"
|
|
: "grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3" // Apply multi-column grid for other labels
|
|
} gap-4`}
|
|
>
|
|
{section.fields.map((formFeild) => {
|
|
if (formFeild?.parent?.name) {
|
|
if (values[formFeild?.parent?.name] === false) {
|
|
typeof values[formFeild?.name] === "boolean"
|
|
? (values[formFeild?.name] = false)
|
|
: (values[formFeild?.name] = "");
|
|
return null;
|
|
} else if (
|
|
typeof values[formFeild?.parent?.name] === "string" &&
|
|
!formFeild?.parent?.values.includes(
|
|
values[formFeild?.parent?.name]
|
|
)
|
|
) {
|
|
typeof values[formFeild?.name] === "boolean"
|
|
? (values[formFeild?.name] = false)
|
|
: (values[formFeild?.name] = "");
|
|
return null;
|
|
}
|
|
}
|
|
|
|
switch (formFeild.type) {
|
|
case "dropdown":
|
|
return (
|
|
<div
|
|
key={formFeild.name}
|
|
className="space-y-1 bg-slate-50 dark:bg-[#3c4043] p-3 rounded-md transition-colors duration-200"
|
|
>
|
|
<label
|
|
htmlFor={formFeild.name}
|
|
className="block font-medium dark:text-google-text"
|
|
>
|
|
{formFeild.label}
|
|
</label>
|
|
<select
|
|
name={formFeild.name}
|
|
id={formFeild.name}
|
|
onChange={handleChange}
|
|
onBlur={handleBlur}
|
|
value={values[formFeild.name] || ""}
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-red-700 transition duration-300 ease-in-out dark:bg-[#303134] dark:text-white"
|
|
disabled={formFeild?.disabled}
|
|
>
|
|
<option value="" label="Select option" />
|
|
{formFeild.options[values[formFeild.depend] || ""].map(
|
|
(option) => (
|
|
<option
|
|
key={option.value}
|
|
value={option.value}
|
|
label={option.label}
|
|
className="text-black"
|
|
>
|
|
{option.label}
|
|
</option>
|
|
)
|
|
)}
|
|
</select>
|
|
<p className="text-red-500 text-sm">
|
|
{errors[formFeild.name] &&
|
|
touched[formFeild.name] &&
|
|
errors[formFeild.name]}
|
|
</p>
|
|
</div>
|
|
);
|
|
|
|
case "checkbox":
|
|
return (
|
|
<div
|
|
key={formFeild.name}
|
|
className="space-y-1 bg-slate-50 dark:bg-[#3c4043] p-3 rounded-md transition-colors duration-200"
|
|
>
|
|
<label
|
|
htmlFor={formFeild.name}
|
|
className="inline-flex items-center space-x-2 dark:text-google-text"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
name={formFeild.name}
|
|
id={formFeild.name}
|
|
onChange={handleChange}
|
|
onBlur={handleBlur}
|
|
checked={values[formFeild.name] || false}
|
|
className="h-4 w-4 border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-red-700"
|
|
disabled={formFeild?.disabled}
|
|
/>
|
|
<span className="text-sm">{formFeild.label}</span>
|
|
</label>
|
|
<p className="text-red-500 text-sm">
|
|
{errors[formFeild.name] &&
|
|
touched[formFeild.name] &&
|
|
errors[formFeild.name]}
|
|
</p>
|
|
</div>
|
|
);
|
|
|
|
case "textarea":
|
|
return (
|
|
<div
|
|
key={formFeild.name}
|
|
className="space-y-1 bg-slate-50 dark:bg-[#3c4043] p-3 rounded-md transition-colors duration-200"
|
|
>
|
|
<label
|
|
htmlFor={formFeild.name}
|
|
className="block font-medium dark:text-google-text"
|
|
>
|
|
{formFeild.label}
|
|
</label>
|
|
<textarea
|
|
name={formFeild.name}
|
|
id={formFeild.name}
|
|
onChange={handleChange}
|
|
onBlur={handleBlur}
|
|
value={values[formFeild.name] || ""}
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md max-h-32 min-h-20 focus:outline-none focus:ring-2 focus:ring-red-700 transition duration-300 ease-in-out dark:bg-[#303134] dark:text-white"
|
|
disabled={formFeild?.disabled}
|
|
/>
|
|
<p className="text-red-500 text-sm">
|
|
{errors[formFeild.name] &&
|
|
touched[formFeild.name] &&
|
|
errors[formFeild.name]}
|
|
</p>
|
|
</div>
|
|
);
|
|
|
|
case "file":
|
|
return (
|
|
<div
|
|
key={formFeild.name}
|
|
className="space-y-1 bg-slate-50 dark:bg-[#3c4043] p-3 rounded-md transition-colors duration-200"
|
|
>
|
|
<label
|
|
htmlFor={formFeild.name}
|
|
className="block font-medium dark:text-google-text"
|
|
>
|
|
{formFeild.label}
|
|
</label>
|
|
|
|
{formFeild?.disabled ? (
|
|
values[formFeild.name] === "" ? (
|
|
<p className="pt-2">No File Submitted</p>
|
|
) : (
|
|
<PdfActions
|
|
applicationId={applicationId}
|
|
fileName={formFeild.name}
|
|
/>
|
|
)
|
|
) : (
|
|
<>
|
|
<input
|
|
type="file"
|
|
name={formFeild.name}
|
|
id={formFeild.name}
|
|
onChange={(e) => {
|
|
setFieldValue(formFeild.name, e.target.files[0]);
|
|
}}
|
|
onBlur={handleBlur}
|
|
className="w-full bg-white dark:bg-[#303134] dark:text-white px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-red-700 transition duration-300 ease-in-out"
|
|
/>
|
|
<p className="text-red-500 text-sm">
|
|
{errors[formFeild.name] &&
|
|
touched[formFeild.name] &&
|
|
errors[formFeild.name]}
|
|
</p>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
case "miniForm":
|
|
return (
|
|
<div
|
|
key={formFeild.name}
|
|
className="space-y-4 bg-slate-50 dark:bg-[#3c4043] p-6 rounded-md w-full transition-colors duration-200"
|
|
>
|
|
{pdfIsVisible && (
|
|
<PdfViewer
|
|
fileUrl={fileUrl}
|
|
setIsModalOpen={setPdfIsVisible}
|
|
/>
|
|
)}
|
|
|
|
{/* Label and Add Expense Button */}
|
|
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-4">
|
|
<label
|
|
htmlFor={formFeild.name}
|
|
className="block text-lg font-medium text-gray-800 dark:text-google-text mb-3 sm:mb-0 sm:w-1/2"
|
|
>
|
|
{`${formFeild.label}: ₹${values[formFeild.name]
|
|
?.reduce(
|
|
(total, rec) =>
|
|
total + parseFloat(rec.expenseAmount || 0),
|
|
0
|
|
)
|
|
.toFixed(2)}`}
|
|
{/* {values[formFeild.name]
|
|
?.reduce(
|
|
(total, rec) =>
|
|
total + parseFloat(rec.expenseAmount || 0),
|
|
0
|
|
)
|
|
.toFixed(2) > 10000 && (
|
|
<p className="text-red-600">Warning: Limit Exceded</p>
|
|
)} */}
|
|
</label>
|
|
|
|
{!formFeild?.disabled &&
|
|
(values[formFeild.name]?.length < 10 ? (
|
|
<div className="flex-shrink-0 mt-4 sm:mt-0 sm:w-auto">
|
|
<button
|
|
className="bg-red-700 text-white font-semibold py-3 px-8 rounded-lg shadow-md transform transition duration-300 hover:bg-red-800 hover:scale-105 active:scale-95"
|
|
type="button"
|
|
onClick={() => {setShowMiniForm(true); setExpensesEditValues(null)}}
|
|
>
|
|
Add Expense
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<h3 className="block text-lg font-medium text-gray-800 mb-3 sm:mb-0 sm:w-1/2">
|
|
Cannot add more than 10 expenses
|
|
</h3>
|
|
))}
|
|
</div>
|
|
|
|
{/* Expense Form */}
|
|
{showMiniFrom && !formFeild?.disabled && (
|
|
<ExpenseForm
|
|
onClose={() => setShowMiniForm(false)}
|
|
setExpenses={(newExpenses) =>
|
|
setFieldValue(formFeild.name, [
|
|
...values[formFeild.name],
|
|
newExpenses,
|
|
])
|
|
}
|
|
editExpense={(editedExpense) => {
|
|
setFieldValue(
|
|
formFeild.name,
|
|
values[formFeild.name].map((expense) =>
|
|
expense === expensesEditValues
|
|
? editedExpense
|
|
: expense
|
|
)
|
|
);
|
|
}}
|
|
expenses={expensesEditValues}
|
|
/>
|
|
)}
|
|
|
|
{/* Error Message */}
|
|
<p className="text-red-500 text-sm mt-2">
|
|
{errors[formFeild.name] &&
|
|
touched[formFeild.name] &&
|
|
errors[formFeild.name]}
|
|
</p>
|
|
|
|
{/* Display Expense Table */}
|
|
{values[formFeild.name]?.length > 0 && (
|
|
<div className="mt-6 w-full overflow-x-auto">
|
|
<ExpenseTable
|
|
expenses={values[formFeild.name]}
|
|
setPdfIsVisible={setPdfIsVisible}
|
|
setFileUrl={setFileUrl}
|
|
deleteExpense={(expense) =>
|
|
setFieldValue(
|
|
formFeild.name,
|
|
values[formFeild.name]?.filter(
|
|
(toDel) => toDel !== expense
|
|
)
|
|
)
|
|
}
|
|
editStatus={(expense, status) =>{
|
|
setFieldValue(
|
|
formFeild.name,
|
|
values[formFeild.name]?.map((toEdit) =>
|
|
toEdit === expense
|
|
? { ...toEdit, proofStatus: status }
|
|
: toEdit
|
|
)
|
|
)}
|
|
}
|
|
editExpense={(expenseValues) => {setShowMiniForm(true); setExpensesEditValues(expenseValues)}}
|
|
disabled={formFeild?.disabled}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
default:
|
|
return (
|
|
<div
|
|
key={formFeild.name}
|
|
className="space-y-1 bg-slate-50 dark:bg-[#3c4043] p-3 rounded-md transition-colors duration-200"
|
|
>
|
|
<label
|
|
htmlFor={formFeild.name}
|
|
className="block font-medium dark:text-google-text"
|
|
>
|
|
{formFeild.label}
|
|
</label>
|
|
<input
|
|
type={formFeild.type}
|
|
name={formFeild.name}
|
|
id={formFeild.name}
|
|
onChange={handleChange}
|
|
onBlur={handleBlur}
|
|
value={values[formFeild.name] || ""}
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-red-700 transition duration-300 ease-in-out dark:bg-[#303134] dark:text-white"
|
|
disabled={formFeild?.disabled}
|
|
max={formFeild?.max}
|
|
min={formFeild?.min}
|
|
/>
|
|
<p className="text-red-500 text-sm">
|
|
{errors[formFeild.name] &&
|
|
touched[formFeild.name] &&
|
|
errors[formFeild.name]}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
}
|
|
|
|
export default Input;
|