import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { addStuff } from '../../../redux/userRelated/userHandle';
import { underControl } from '../../../redux/userRelated/userSlice';
import { CircularProgress } from '@mui/material';
import Popup from '../../../components/Popup';

const AddSubmission = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const { status, response, error } = useSelector(state => state.user);
  const { currentUser } = useSelector(state => state.user);

  const [title, setTitle] = useState('');
  const [details, setDetails] = useState('');
  const [date, setDate] = useState('');
  const adminID = currentUser._id

  const [loader, setLoader] = useState(false);
  const [showPopup, setShowPopup] = useState(false);
  const [message, setMessage] = useState("");

  const fields = { title, details, date, adminID };
  const address = "Submission"

  const submitHandler = (event) => {
    event.preventDefault();
    setLoader(true);
    dispatch(addStuff(fields, address));
  };

  useEffect(() => {
    if (status === 'added') {
      navigate('/Admin/Submissions');
      dispatch(underControl())
    } else if (status === 'error') {
      setMessage("Network Error")
      setShowPopup(true)
      setLoader(false)
    }
  }, [status, navigate, error, response, dispatch]);

  return (
    <>
      <div className="register">
        <form className="registerForm" onSubmit={submitHandler}>
          <span className="registerTitle">Submission</span>
          <label>Name</label>
          <input className="registerInput" type="text" placeholder="Enter your name here..."
            value={title}
            onChange={(event) => setTitle(event.target.value)}
            required />

          <label>Details</label>
          <input className="registerInput" type="text" placeholder="Enter Submission details(From Type)..."
            value={details}
            onChange={(event) => setDetails(event.target.value)}
            required />

          <label>Date</label>
          <input className="registerInput" type="date" placeholder="Enter Submission date..."
            value={date}
            onChange={(event) => setDate(event.target.value)}
            required />

          <button className="registerButton" type="submit" disabled={loader}>
            {loader ? (
              <CircularProgress size={24} color="inherit" />
            ) : (
              'Add'
            )}
          </button>
        </form>
      </div>
      <Popup message={message} setShowPopup={setShowPopup} showPopup={showPopup} />
    </>
  );
};

export default AddSubmission;     this is the add submssion page ..here i want to add one more option in form ...upload pdf where we can uplaod pdfs from our device and  import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from "react-router-dom";
import {
    Paper, Box, IconButton
} from '@mui/material';
import NoteAddIcon from '@mui/icons-material/NoteAdd';
import DeleteIcon from "@mui/icons-material/Delete";
import { getAllSubmissions } from '../../../redux/submissionRelated/submissionHandle';
import { deleteUser } from '../../../redux/userRelated/userHandle';
import TableTemplate from '../../../components/TableTemplate';
import { GreenButton } from '../../../components/buttonStyles';
import SpeedDialTemplate from '../../../components/SpeedDialTemplate';

const ShowSubmissions = () => {

    const navigate = useNavigate()
    const dispatch = useDispatch();
    const { submissionsList, loading, error, response } = useSelector((state) => state.submission);
    const { currentUser } = useSelector(state => state.user)

    useEffect(() => {
        dispatch(getAllSubmissions(currentUser._id, "Submission"));
    }, [currentUser._id, dispatch]);

    if (error) {
        console.log(error);
    }

    const deleteHandler = (deleteID, address) => {
        dispatch(deleteUser(deleteID, address))
            .then(() => {
                dispatch(getAllSubmissions(currentUser._id, "Submission"));
            })
    }

    const submissionColumns = [
        { id: 'title', label: 'Title', minWidth: 170 },
        { id: 'details', label: 'Details', minWidth: 100 },
        { id: 'date', label: 'Date', minWidth: 170 },
    ];

    const submissionRows = submissionsList && submissionsList.length > 0 && submissionsList.map((submission) => {
        const date = new Date(submission.date);
        const dateString = date.toString() !== "Invalid Date" ? date.toISOString().substring(0, 10) : "Invalid Date";
        return {
            title: submission.title,
            details: submission.details,
            date: dateString,
            id: submission._id,
        };
    });

    const SubmissionButtonHaver = ({ row }) => {
        return (
            <>
                <IconButton onClick={() => deleteHandler(row.id, "Submission")}>
                    <DeleteIcon color="error" />
                </IconButton>
            </>
        );
    };

    const actions = [
        {
            icon: <NoteAddIcon color="primary" />, name: 'Add New Submission',
            action: () => navigate("/Admin/addsubmission")
        },
        {
            icon: <DeleteIcon color="error" />, name: 'Delete All submissions',
            action: () => deleteHandler(currentUser._id, "Submissions")
        }
    ];

    return (
        <>
            {loading ?
                <div>Loading...</div>
                :
                <>
                    {response ?
                        <Box sx={{ display: 'flex', justifyContent: 'flex-end', marginTop: '16px' }}>
                            <GreenButton variant="contained"
                                onClick={() => navigate("/Admin/addsubmission")}>
                                Add Submission
                            </GreenButton>
                        </Box>
                        :
                        <Paper sx={{ width: '100%', overflow: 'hidden' }}>
                            {Array.isArray(submissionsList) && submissionsList.length > 0 &&
                                <TableTemplate buttonHaver={SubmissionButtonHaver} columns={submissionColumns} rows={submissionRows} />
                            }
                            <SpeedDialTemplate actions={actions} />
                        </Paper>
                    }
                </>
            }
        </>
    );
};

export default ShowSubmissions;  and in show submisions in place of delete button i wanted accept or reject buttons ....its implementation also
const mongoose = require("mongoose")

const submissionSchema = new mongoose.Schema({
    title: {
        type: String,
        required: true
    },
    details: {
        type: String,
        required: true
    },
    date: {
        type: Date,
        required: true
    },
    school: {
        type: mongoose.Schema.Types.ObjectId,
        ref: 'admin'
    },
}, { timestamps: true });

module.exports = mongoose.model("submission", submissionSchema)  this is moongoses schmea ...complete upadted code for them also tell me do we need to make any other chnges also