export default CustomDocumentTable;
`

`js
import React from "react";
import ReactDOM from "react-dom";

const CustomModal = ({ children, onClose }) => {
return ReactDOM.createPortal(


export default CustomModal;
`

`js
import React, { useState, useEffect } from "react";
import CreatableSelect from "react-select/creatable";
import {
addDocument,
updateDocument,
getCollectionDocuments,
} from "firebase-admin-panel";
import { uploadImage } from "firebase-admin-panel";
import { Timestamp } from "firebase/firestore";

const CustomDocumentForm = ({
collectionName,
docToEdit,
onSave,
schema,
formClassName = "",
inputClassName = "",
labelClassName = "",
buttonClassName = "",
}) => {
const [formData, setFormData] = useState({});
const [file, setFile] = useState(null);
const [docRefOptions, setDocRefOptions] = useState({});
const [errors, setErrors] = useState({});

useEffect(() => {
if (docToEdit) {
const initialData = { ...docToEdit };
Object.keys(initialData).forEach((key) => {
if (initialData[key] instanceof Timestamp) {
initialData[key] = initialData[key]
.toDate()
.toISOString()
.split("T")[0];
} else if (Array.isArray(initialData[key])) {
initialData[key] = initialData[key].map((value) => ({
label: value,
value: value,
}));
}
});
setFormData(initialData);
} else {
const initialData = {};
Object.keys(schema).forEach((key) => {
initialData[key] =
schema[key].type === "array" || schema[key].type === "docRef array"
? []
: "";
});
setFormData(initialData);
}
}, [docToEdit, schema]);

useEffect(() => {
const fetchDocRefOptions = async () => {
const options = {};
for (const key in schema) {
if (
schema[key].type === "docRef" ||
schema[key].type === "docRef array"
) {
const docs = await getCollectionDocuments(schema[key].collection);
options[key] = docs.map((doc) => ({ label: doc.id, value: doc.id }));
}
}
setDocRefOptions(options);
};

fetchDocRefOptions();
}, [schema]);

const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value,
});
};

const handleSelectChange = (selectedOptions, key) => {
setFormData({
...formData,
[key]: selectedOptions,
});
};

const handleFileChange = (e) => {
setFile(e.target.files[0]);
};

const validateForm = () => {
const newErrors = {};
Object.keys(schema).forEach((key) => {
if (
(!formData[key] || formData[key].length === 0) &&
schema[key] !== "image"
) {
newErrors[key] = "This field is required";
} else if (schema[key] === "image" && !file && !docToEdit?.[key]) {
newErrors[key] = "This field is required";
}
});
if (Object.keys(newErrors).length > 0) {
setErrors(newErrors);
return false;
}
return true;
};

function getKeyByValue(object, value) {
let result = [];
for (let prop in object) {
if (object.hasOwnProperty(prop)) {
if (object[prop] === value) result.push(prop);
}
}
return result;
}

const handleSubmit = async (e) => {
e.preventDefault();
if (!validateForm()) {
return;
}

let tempDataToSave = { ...formData };
let dataToSave = tempDataToSave;
let arrayTypes = getKeyByValue(schema, "array");
arrayTypes.forEach((arrayType) => {
if (
tempDataToSave &&
arrayType &&
tempDataToSave[arrayType] &&
tempDataToSave[arrayType].length > 0
) {
tempDataToSave[arrayType]?.forEach((e, index) => {
dataToSave[arrayType][index] = e.value;
});
}
});

if (file) {
const imageUrl = await uploadImage(
file,
${collectionName}/${file.name}
);
dataToSave[getKeyByValue(schema, "image")] = imageUrl;
}

Object.keys(dataToSave).forEach((key) => {
if (schema[key] && schema[key] === "date" && dataToSave[key]) {
dataToSave[key] = Timestamp.fromDate(new Date(dataToSave[key]));
} else if (
(schema[key] && schema[key] === "array") ||
(schema[key] && schema[key].type === "docRef array")
) {
dataToSave[key] = dataToSave[key].map((option) => {
if (schema[key].type === "docRef array") return option.value;
return option;
});
} else if (schema[key] && schema[key] === "number") {
dataToSave[key] = parseFloat(dataToSave[key]);
}
});

if (docToEdit) {
await updateDocument(collectionName, docToEdit.id, dataToSave);
} else {
await addDocument(collectionName, dataToSave);
}
onSave();
};

const getInputType = (type) => {
switch (type) {
case "string":
return "text";
case "number":
return "number";
case "date":
return "date";
case "image":
return "file";
case "docRef":
case "docRef array":
return "select";
default:
return "text";
}
};

return (
onSubmit={handleSubmit}
className={mt-4 p-4 border border-gray-300 bg-white ${formClassName}}
>
{Object.keys(schema).map((key) => (