diff --git a/assets/src/components/TermCard.js b/assets/src/components/TermCard.js
index a2c35466..c14ac543 100644
--- a/assets/src/components/TermCard.js
+++ b/assets/src/components/TermCard.js
@@ -1,276 +1,276 @@
 import React, {useState, useContext, useEffect} from "react"
 import {Context} from "../ContextProvider"
 import { makeStyles } from '@material-ui/core/styles';
 import "./termcard.css"
 import Chip from '@material-ui/core/Chip';
 import DoneIcon from '@material-ui/icons/Done';
 import HighlightOffIcon from '@material-ui/icons/HighlightOff';
 import Typography from '@material-ui/core/Typography';
 import DateRangeIcon from '@material-ui/icons/DateRange';
 import { FaCoins, FaRegHandshake, FaUserGraduate } from 'react-icons/fa';
 import { RiFilePaper2Line } from 'react-icons/ri';
 import Button from '@material-ui/core/Button';
 import { HiLink } from "react-icons/hi";
 import { GrInfo } from "react-icons/gr";
 import Container from '@material-ui/core/Container'
 import Grid from '@material-ui/core/Grid'
 import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
 import Tooltip from '@material-ui/core/Tooltip';
 import { BsNewspaper } from 'react-icons/bs';
 import { FiFlag } from 'react-icons/fi';
 const useStyles = makeStyles((theme) =>({
   
   card: {
       width: '100%',
       marginTop: "1rem",
       textAlign:'left'
       
       
   },
   root: {
     flexGrow: 1,
     textAlign:'left',
   },
 
   chip: {
     margin: 0.5,
     
   },
   
   heading: {
     fontSize: theme.typography.pxToRem(15),
     fontWeight: theme.typography.fontWeightRegular,
   },
 
 }))
 
 
 
 export default function TermCard({term}) {
 
     const classes = useStyles();
   //call the custom hook to share the state between different level componant 
   const {url} = useContext(Context)
   const [ref, setRef] = useState("")
 
   
 
 
  function handleClick () {
-  
-  window.open(`mailto:publishsupport@epfl.ch?subject= OACCT Modification request for ${url} Term Card ref:${ref} &body=Request Description:`)
+  // ## Create mail template to report a modification, contain the actual Url and the reference Term Card
+  window.open(`mailto:publishsupport@epfl.ch?subject= OACCT Modification request for ${url} Term Card Reference:${ref} &body=Request Description:`)
   }
   
   useEffect(() => {
-    // Update ref term 
+    // ## Update ref term by creating a specific Reference based on the Condition set ID = C and Term.id = T
     setRef(
       term.map( j=> (
         j[0] &&
         `C${j[0]}/T${term[0].id}`
         
       ))
     )
   });
   
 
     console.log(`cost factor data: ${term[0].cost_factor[0].cost_factor_type.name}`)
     
     
     const licenceIcon =
     
     term[0].licence?.map(i=>(
       <>
       <Tooltip disableFocusListener title="To learn more about licence" arrow>
         <Button href={i.website} target="blank" rel="noopener noreferrer" size="small">
             <Chip
                   size="small"
                   avatar={ <RiFilePaper2Line />}
                   label={i.name_or_abbrev}
                   // clickable={handleClick}
                   // color="secondary"
                   // onDelete={handleDelete}
                   className={classes.chip}
                   style={{ background: "#FFFFFF", textAlign: "left"}}
                   // title="Licence Information"
               />
           </Button>
       </Tooltip>
       </>
     ))
   
 
     
         const  cost = term[0].cost_factor?.map( i => (
 
             
               <>
               <Tooltip disableFocusListener title={i.comment} arrow>
                 <Button>
                   <Chip
                     key={i.cost_factor_type.id}
                     size="small"
                     avatar={  <FaCoins />}
                     label={i.cost_factor_type.name + " : " + i.amount +  " " + i.symbol}
                     // clickable={handleClick}
                     // color="secondary"
                     // onDelete={handleDelete}
                     className={classes.chip}
                     style={{ background: "#FFFFFF"}}
                     // title={i.comment}
                   />
                 </Button>
               </Tooltip>
               
               </>
             
           ))
 
         const termArchive = term[0].ir_archiving && term[0].ir_archiving ? (
         
           <Chip
                 size="small"
                 avatar={<DoneIcon />}
                 label={"IR Archiving"}
                 // variant="outlined"
                 // clickable={handleClick}
                 // color="secondary"
                 // onDelete={handleDelete}
                 style={{ background: "#DAF7A6"}}
                 // title="This is more information"
             />
            
             
             ): (
        
             <Chip
                 size="small"
                 avatar={<HighlightOffIcon />}
                 label="IR Archiving"
                 // clickable={handleClick}
                 // color="secondary"
                 // onDelete={handleDelete}
                 style={{ background: "#f50057"}}
                 // title="This is more information"
             />
             )
             const embargo = term[0].ir_archiving && term[0].ir_archiving ? (
             
             <Chip
                 size="small"
                 avatar={<DateRangeIcon />}
                 label={"Embargo: " + term[0].embargo_months + " Month(s)"}
                 // variant="outlined"
                 // clickable={handleClick}
                 // color="secondary"
                 // onDelete={handleDelete}
                 style={{ background: "#FFFFFF"}}
                 // title="This is more information"
             />
             ):
             (<a />)
         
 
     return (
       <div>
     
       <Card key={term.id} className="term-Card"
       style={{ textAlign: "left"}}
       >
       <CardContent>
         <Typography className={classes.title} color="textSecondary" gutterBottom>
         {term.map( j=> (
              j[0] &&
              <>
               <p>{j[2].condition_issuer === "Journal-only" &&
               <BsNewspaper />}
               {j[2].condition_issuer === "Journal-organization agreement" &&
               <FaRegHandshake />}
               {j[2].condition_issuer === "Organization-only" &&
               <FaUserGraduate />} {j[2].condition_issuer}
               {j[1] ? ': ' + j[1] : ''}</p>
               </>
         ))
         }
         
         </Typography>
         <Typography variant="h5" component="h2">
        
           
         </Typography>
         <Typography className={classes.pos} color="textSecondary">
         
      
         
         </Typography>
         <Typography variant="body2" component="p">
         <Container maxWidth="xs" >
          <Grid container>
   
       
           <Grid item xs={6} sm={2}>
           {/* filter Unknow cost factor type to not display */}
          
           {cost}
           
 
           {licenceIcon}
           {termArchive}
           {embargo}
          
           </Grid>
           </Grid>
           </Container>
         
           <div 
           style={{ marginTop: "1rem"}}
           >
           {term[0].comment ?
           <div style={{ textAlign: "left"}}>
          
           <p>
           <small>
           <GrInfo 
           style={{ 
             padding: "0.05rem"
           }}
           />
           {term[0].comment}
           </small>
           </p>
           
          
           </div>
           :null}
          </div>
         <div style={{textAlign: 'right'}}>
          {term.map( j=> (
              j[0] &&
              <small><small>C{j[0]}/T{term[0].id}</small></small>
         ))
         }
         </div>
       </Typography>
       </CardContent>
       <CardActions>
           {term[0].source ?
             <Button href={term[0].source} target="blank" rel="noopener noreferrer" size="small">
                <i style={{fontSize: "70%"}}>
               <HiLink/> More Information
               </i>
               </Button>
           :null}
 
 <Button onClick={handleClick} variant="outlined" color="secondary" size="small" ><FiFlag/>
             <i style={{fontSize: "70%"}}>
             Modification Request
             </i>
 </Button>
       </CardActions>
     </Card>
       
     </div>
     )
 }
 
diff --git a/assets/src/pages/SearchFilterFields.js b/assets/src/pages/SearchFilterFields.js
index c7592a60..dae6b9a2 100644
--- a/assets/src/pages/SearchFilterFields.js
+++ b/assets/src/pages/SearchFilterFields.js
@@ -1,1204 +1,1222 @@
 import React, {useContext, useState, useEffect} from 'react';
 import "./SearchFilterFields.css"
 import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import FormControl from '@material-ui/core/FormControl';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import { searchCondi, searchorganizationonly, searchjournalonly, searchInstitFunder, searchCondi3 } from '../services/requests/Condition'
 import {getJournal} from '../services/requests/Journal'
 import {getFunder} from '../services/requests/Funder'
 import {getInstitution} from '../services/requests/Institution'
 import Accordion from '@material-ui/core/Accordion';
 import AccordionSummary from '@material-ui/core/AccordionSummary';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import Typography from '@material-ui/core/Typography';
 import AccordionDetails from '@material-ui/core/AccordionDetails';
 import Grid from '@material-ui/core/Grid'
 import Box from '@material-ui/core/Box'
 import Container from '@material-ui/core/Container';
 import {Context} from "../ContextProvider"
 import ResultCard from  "../components/ResultCard"
 import DetailCard from  "../components/DetailCard"
 import CircularProgress from '@material-ui/core/CircularProgress'
 import Fab from '@material-ui/core/Fab'
 import ShareIcon from '@material-ui/icons/Share'
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import Slide from '@material-ui/core/Slide';
 import Welcome from './welcome';
 import {
   useHistory,useLocation
 } from "react-router-dom";
 import PropTypes from 'prop-types';
+// import { FiFlag } from 'react-icons/fi';
+import FlagOutlinedIcon from '@material-ui/icons/FlagOutlined';
+import Tooltip from '@material-ui/core/Tooltip';
 function useQuery() {
   return new URLSearchParams(useLocation().search);
 }
 const Transition = React.forwardRef(function Transition(props, ref) {
   return <Slide direction="up" ref={ref} {...props} />;
 });
 
 const useStyles = makeStyles((theme) => ({
   root: {
     flexGrow: 1,
   },
 
 chip: {
   margin: 0.5,
   
 },
 
 }));
 
 /**
  * Contain the main logic of OACCT tools to filter and send the appropriate request.
  * @version 0.0.1
  * @author [Hugo Galuppo](https://github.com/hgpulse)
  */
 
 
 
 export default function SearchFilterFields() {
   /** Access to URL parameter */
   const history = useHistory();
   
   
 
   console.log(history)
   let query = useQuery()
   //state that allow to hide or show the share url button 
   const [open, setOpen] = React.useState(false)
  
  
   const classes = useStyles();
 
   
 
   //call the custom hook to share the state between different level componant 
 
   const { getSelectedInstitId,
           getSelectedJournalId,
           getSelectedFunderId,
           institList, 
           journalList,
           funderList,
           institId,
           journalId,
           funderId,
           setInstitId, 
           setJournalId,
           setFunderId,
+          setUrl,
           url
         } 
           = useContext(Context)
   
 
   //responses
   const [conditions, setConditions] = useState([]);
   const [details, setDetails] = useState([]);
 
   const [result, updateResult] = useState([]);
   //Manage the loading state to hide or show the spinner in the search bar
   const [loading, setLoading] = useState(false);
   // const [url, setUrl] = useState(window.location.href);
 
   
   
   useEffect(() => {
   
    setDetails('null')
-
+   
+    setUrl(window.location.href)
+  
    //handle Url param
 
   console.log(history)
   
   if (history.location.pathname === "/check") {
     console.log("this an url to check")
     setDetails('fromUrl')
     // alert(query.get("institution"))
   
   
               if (query.get("institution") && !query.get("funder") && !query.get("journal")){
                 //get organizations conditions
                 // alert(`get api organization Condition only: ${institId}`)
                 //condtion type is not journal only = 1
                 // Get the user
                 
                   const sendSearchInstitOnly =
                   async () => {
                     
                         try {
                           
                           
                             const resp = await searchorganizationonly(query.get("institution"),1)
                             console.log(resp.data)
                             setConditions(arr => [...arr, resp.data])
                             
                             
                             
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                         setLoading(false)
                   
                         
                   }
                   
                   console.log(details)
                   
                   const sendGetrequest =
                   async () => {
                         try {
                             const resp = await getInstitution(query.get("institution"))
                             // console.log(`instit name from api: ${resp.data.name}`)
                             // setInstitName(resp.data.name)
                             updateResult(arr => [...arr, resp.data])
                             // if (details === "null") {
                             //   setDetails(resp.data)
                             // }
                             // else {
                             //   setDetails(prevArray => [...prevArray, resp.data])
                             // }
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                         
                   }
                     sendSearchInstitOnly().then(
                       sendGetrequest()
                     )
                     history.push({pathname:`check`, search:`institution=${query.get("institution")}`})
                 }
 
                 else if (!query.get("institution") && !query.get("journal") && query.get("funder")){
                   //get funder conditions
                
                   // alert(`get api funder Condition only: ${funderId}`)
                   //condtion type is not journal only = 1
               
                   const sendSearchOrgaOnly =
                   async () => {
                         try {
                             const resp = await searchorganizationonly(query.get("funder"),1)
                             console.log(resp.data)
                             setConditions(arr => [...arr, resp.data])
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                         setLoading(false)
                   }
                   
                   const sendGetrequest =
                   async () => {
                         try {
                             const resp = await getFunder(query.get("funder"))
                             console.log(resp.data)
                             updateResult(arr => [...arr, resp.data])
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                   }
                 
                 sendSearchOrgaOnly().then(
                   sendGetrequest()
                 )
                 history.push({pathname:`check`, search:`funder=${query.get("funder")}`})
                 }
 
                 else if (!query.get("funder") && !query.get("institution") && query.get("journal")){
                   
                   //get journals conditions
                   // alert(`get api journal Condition only: ${journalId}`)
                   //condtion type is not institution only = 2
                   //get journal detail
               
                   const sendSearchJournalOnly =
                   async () => {
                         try {
                             const resp = await searchjournalonly(query.get("journal"),2)
                             console.log(resp.data)
                             setConditions(arr => [...arr, resp.data])
                             // setConditions(arr => [...arr, resp.data])
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                         setLoading(false)
               
                   }
                   
                   const sendGetrequest =
                   async () => {
                         try {
                             const resp = await getJournal(query.get("journal"))
                             console.log(resp.data)
                             updateResult(arr => [...arr, resp.data])
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                         
                   }
               
                 sendSearchJournalOnly().then(
                   sendGetrequest()
                 )
                 history.push({pathname:`check`, search:`journal=${query.get("journal")}`})
                 }
                 else if (query.get("institution") && query.get("funder") && !query.get("journal")) {
                    
                   //alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${institId}`)
                   //condtion type journal/condition = 3
                   const sendSearchCondi =
                   async () => {
                         try {
                             const resp = await searchInstitFunder(query.get("institution"), query.get("funder"), 1)
                             console.log(resp.data)
                             setConditions(arr => [...arr, resp.data])
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                         setLoading(false)
                   }
                  
                   const sendGetInstit =
                   async () => {
                         try {
                             const resp = await getInstitution(query.get("institution"))
                             console.log(resp.data)
                             // detailArray.push(resp.data)
                             // setDetails(detailArray)
                             updateResult(arr => [...arr, resp.data])
                            
                             
                             
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                   }
                   const sendGetFunder =
                     async () => {
                       try {
                           const resp = await getFunder(query.get("funder"))
                           console.log(resp.data)
                           
                           updateResult(arr => [...arr, resp.data])
                           
                       } catch (err) {
                           // Handle Error Here
                           console.error(err);
                       }
                       
                     }
                   sendSearchCondi().then(
                     sendGetInstit().then(sendGetFunder())
                   )
               
                   history.push({pathname:`check`, search: `institution=${query.get("institution")}&funder=${query.get("funder")}`})
                 }
 
                 else if (query.get("institution") && query.get("journal") && !query.get("funder")) {
                    
                   //alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${institId}`)
                   //condtion type journal/condition = 3
                   const sendSearchCondi =
                   async () => {
                         try {
                             const resp = await searchCondi(query.get("journal"),query.get("institution"))
                             console.log(resp.data)
                             setConditions(arr => [...arr, resp.data])
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                         setLoading(false)
                   }
                   const sendGetInstit =
                   async () => {
                     try {
                         const resp = await getInstitution(query.get("institution"))
                         console.log(resp.data)
                         
                         updateResult(arr => [...arr, resp.data])
                         
                     } catch (err) {
                         // Handle Error Here
                         console.error(err);
                     }
                     
                   }
                   const sendGetJournal =
                   async () => {
                         try {
                             const resp = await getJournal(query.get("journal"))
                             console.log(resp.data)
                             // detailArray.push(resp.data)
                             // setDetails(detailArray)
                             updateResult(arr => [...arr, resp.data])
                            
                             
                             
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                   }
                   
                   sendSearchCondi().then(
                     sendGetInstit().then(sendGetJournal)
                   )
               
                   history.push({pathname:`check`, search: `institution=${query.get("institution")}&journal=${query.get("journal")}`})
                 }
 
                 else if (!query.get("institution") && query.get("journal") && query.get("funder")) {
                    
                   // alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${funderId}`)
                   //condtion type journal/institution/funder conditions = 3
               
                   const sendGetCondi =
                   async () => {
                         try {
                             const resp = await searchCondi(query.get("journal"),query.get("funder"))
                             console.log(resp.data)
                             setConditions(arr => [...arr, resp.data])
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                         setLoading(false)
                   }
               
                   const sendGetFunder =
                     async () => {
                       try {
                           const resp = await getFunder(query.get("funder"))
                           console.log(resp.data)
                           updateResult(arr => [...arr, resp.data])
                       } catch (err) {
                           // Handle Error Here
                           console.error(err);
                       }
                     }
 
                   const sendGetJournal =
                   async () => {
                         try {
                             const resp = await getJournal(query.get("journal"))
                             console.log(resp.data)
                             updateResult(arr => [...arr, resp.data])
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                   }
                   
                   
                   
                   sendGetCondi().then(
                     sendGetFunder().then(
                       sendGetJournal()
                     )
                   )
                   history.push({pathname:`check`, search: `funder=${query.get("funder")}&journal=${query.get("journal")}`})
                 }
 
                 else if (query.get("institution") && query.get("journal") && query.get("funder")) {
                  
                   // alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${funderId}`)
                   //condtion type journal/institution/funder conditions = 3
                   console.log("main check !")
                   //(institution + journal)
                   const detailArray = []
               
                   const sendGetCondi =
                   async () => {
                         try {
                             const resp = await searchCondi3(query.get("institution"),query.get("journal"),query.get("funder"))
                             console.log(resp.data)
                             setConditions(arr => [...arr, resp.data])
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                         setLoading(false)
                   }
                   const sendGetInstit =
                     async () => {
                       try {
                           const resp = await getInstitution(query.get("institution"))
                           console.log(resp.data)
                           detailArray.push(resp.data)
                           updateResult(arr => [...arr, resp.data])
                           
                       } catch (err) {
                           // Handle Error Here
                           console.error(err);
                       }
                     }
 
                     const sendGetFunder =
                     async () => {
                       try {
                           const resp = await getFunder(query.get("funder"))
                           console.log(resp.data)
                           updateResult(arr => [...arr, resp.data])
                       } catch (err) {
                           // Handle Error Here
                           console.error(err);
                       }
                     }
                   const sendGetJournal =
                   async () => {
                         try {
                             const resp = await getJournal(query.get("journal"))
                             console.log(resp.data)
                             updateResult(arr => [...arr, resp.data])
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                   }
 
               
                   //order requests
                   sendGetCondi()
                   sendGetInstit().then(
                       sendGetFunder()
                       ).then(
                         sendGetJournal()
                     )
                     history.push({pathname:`check`, search: `institution=${query.get("institution")}&funder=${query.get("funder")}&journal=${query.get("journal")}`})
                     
                    
                 }
            
                   
 
   }
   
  
 
   
   }, [])
   //useEffect on Url state change
   React.useEffect(() => {
     //condition to avoid infinite loop
     if (history.location.pathname === "/") {
       setConditions([])
       setDetails('null')
       updateResult([])
     
     }
   }, [url]);
  
+  function handleReport () {
+    // ## Create mail template to report a modification, contain the actual Url and the reference Term Card
+    window.open(`mailto:publishsupport@epfl.ch?subject= OACCT Modification request for ${url} &body=Request Description:`)
+    }
+
+
  //copy url to clipboard 
  function handlShare(e) {
   
   setOpen(true)
   navigator.clipboard.writeText(url)
   
 }
 const handleClose = () => {
   setOpen(false);
 };
   
   function handleInstit(e, newInputValue) { 
 
    if (newInputValue){
     getSelectedInstitId(newInputValue)
     return
 
    }
 
   //  if (institName){
   //   getSelectedInstitId(institName)
   //   return
 
   //  }
    
    setInstitId("")
 
   }
   
   function handleFunder(e, newInputValue) {
     console.log(newInputValue)
     if (newInputValue){
     getSelectedFunderId(newInputValue)
     return
     }
     setFunderId("")
   }
 
   function handleJournal(e, newInputValue) {
     
     if (newInputValue){
       getSelectedJournalId(newInputValue)
       return
      }
      setJournalId("")     
   }
 
 function handleSubmit(e) {
   setLoading(true)
   e.preventDefault()
   
   //reset precedent results
   setConditions([])
   setDetails([])
   updateResult([])
   
 
 
   if (!institId && !journalId && !funderId){
     setLoading(false)
     setDetails('null')
     
   }
 
   if (institId && !journalId && !funderId){
   //get organizations conditions
   // alert(`get api organization Condition only: ${institId}`)
   //condtion type is not journal only = 1
   // Get the user
   
     const sendSearchInstitOnly =
     async () => {
       
           try {
             
             
               const resp = await searchorganizationonly(institId,1)
               console.log(resp.data)
               setConditions(arr => [...arr, resp.data])
               
               
               
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           setLoading(false)
     
           
     }
     
     console.log(details)
 
     const sendGetrequest =
     async () => {
           try {
               const resp = await getInstitution(institId)
               console.log(resp.data)
               updateResult(arr => [...arr, resp.data])
               // if (details === "null") {
               //   setDetails(resp.data)
               // }
               // else {
               //   setDetails(prevArray => [...prevArray, resp.data])
               // }
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           
     }
       sendSearchInstitOnly().then(
         sendGetrequest()
       )
       history.push({pathname:`check`, search:`institution=${institId}`})
       
   }
   
   else if (!institId && !journalId && funderId){
     //get funder conditions
     // alert(`get api funder Condition only: ${funderId}`)
     //condtion type is not journal only = 1
 
     const sendSearchOrgaOnly =
     async () => {
           try {
               const resp = await searchorganizationonly(funderId,1)
               console.log(resp.data)
               setConditions(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           setLoading(false)
     }
     
     const sendGetrequest =
     async () => {
           try {
               const resp = await getFunder(funderId)
               console.log(resp.data)
               updateResult(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
     }
   
   sendSearchOrgaOnly().then(
     sendGetrequest()
   )
   history.push({pathname:`check`, search:`funder=${funderId}`})
   }
   else if (!funderId && !institId && journalId){
     //get journals conditions
     // alert(`get api journal Condition only: ${journalId}`)
     //condtion type is not institution only = 2
     //get journal detail
 
     const sendSearchJournalOnly =
     async () => {
           try {
               const resp = await searchjournalonly(journalId,2)
               console.log(resp.data)
               setConditions(arr => [...arr, resp.data])
               // setConditions(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           setLoading(false)
 
     }
     
     const sendGetrequest =
     async () => {
           try {
               const resp = await getJournal(journalId)
               console.log(resp.data)
               updateResult(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           
     }
 
   sendSearchJournalOnly().then(
     sendGetrequest()
   )
   history.push({pathname:`check`, search:`journal=${journalId}`})
   }
   
   else if (institId && funderId && !journalId) {
     //alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${institId}`)
     //condtion type journal/condition = 3
     const sendSearchCondi =
     async () => {
           try {
               const resp = await searchInstitFunder(institId, funderId, 1)
               console.log(resp.data)
               setConditions(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           setLoading(false)
     }
    
     const sendGetInstit =
     async () => {
           try {
               const resp = await getInstitution(institId)
               console.log(resp.data)
               //manage the order output
               // detailArray.push(resp.data)
               // setDetails(detailArray)
               updateResult(arr => [...arr, resp.data])
               
             
              
               
               
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
     }
     const sendGetFunder =
       async () => {
         try {
             const resp = await getFunder(funderId)
             console.log(resp.data)
             
             updateResult(arr => [...arr, resp.data])
             
             
         } catch (err) {
             // Handle Error Here
             console.error(err);
         }
         
       }
     sendSearchCondi().then(
       sendGetInstit().then(sendGetFunder())
     )
 
     history.push({pathname:`check`, search: `institution=${institId}&funder=${funderId}`})
   }
   else if (institId && journalId && !funderId) {
     //alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${institId}`)
     //condtion type journal/condition = 3
     const sendSearchCondi =
     async () => {
           try {
               const resp = await searchCondi(journalId,institId)
               console.log(resp.data)
               setConditions(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           setLoading(false)
     }
     const sendGetInstit =
     async () => {
       try {
           const resp = await getInstitution(institId)
           console.log(resp.data)
           
           updateResult(arr => [...arr, resp.data])
         
       } catch (err) {
           // Handle Error Here
           console.error(err);
       }
       
     }
     const sendGetJournal =
     async () => {
           try {
               const resp = await getJournal(journalId)
               console.log(resp.data)
               // detailArray.push(resp.data)
               // setDetails(detailArray)
               updateResult(arr => [...arr, resp.data])
            
               
               
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
     }
     
     sendSearchCondi().then(
       sendGetInstit().then(sendGetJournal)
     )
 
     history.push({pathname:`check`, search: `institution=${institId}&journal=${journalId}`})
   }
   else if (!institId && journalId && funderId) {
     // alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${funderId}`)
     //condtion type journal/institution/funder conditions = 3
 
     const sendGetCondi =
     async () => {
           try {
               const resp = await searchCondi(journalId,funderId)
               console.log(resp.data)
               setConditions(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           setLoading(false)
     }
     const sendGetFunder =
       async () => {
         try {
             const resp = await getFunder(funderId)
             console.log(resp.data)
             updateResult(arr => [...arr, resp.data])
         } catch (err) {
             // Handle Error Here
             console.error(err);
         }
       }
 
 
     const sendGetJournal =
     async () => {
           try {
               const resp = await getJournal(journalId)
               console.log(resp.data)
               updateResult(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
     }
     
     
     
     sendGetCondi().then(
       sendGetJournal().then(
         sendGetFunder()
       )
     )
     history.push({pathname:`check`, search: `funder=${funderId}&journal=${journalId}`})
   }
   else if (institId && journalId && funderId) {
     // alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${funderId}`)
     //condtion type journal/institution/funder conditions = 3
     console.log("main check !")
     //(institution + journal)
     const detailArray = []
 
     const sendGetCondi =
     async () => {
           try {
               const resp = await searchCondi3(institId,journalId,funderId)
               console.log(resp.data)
               setConditions(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           setLoading(false)
     }
 
     const sendGetInstit =
       async () => {
         try {
             const resp = await getInstitution(institId)
             console.log(resp.data)
             updateResult(arr => [...arr, resp.data])
             
             
         } catch (err) {
             // Handle Error Here
             console.error(err);
         }
       }
 
       const sendGetFunder =
       async () => {
         try {
             const resp = await getFunder(funderId)
             console.log(resp.data)
             updateResult(arr => [...arr, resp.data])
         } catch (err) {
             // Handle Error Here
             console.error(err);
         }
       }
 
     const sendGetJournal =
     async () => {
           try {
               const resp = await getJournal(journalId)
               console.log(resp.data)
               updateResult(arr => [...arr, resp.data])
               
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
     }
     
     //order the request
     sendGetCondi()
     sendGetInstit().then(
         sendGetFunder()
         ).then(
           sendGetJournal()
       )
       history.push({pathname:`check`, search: `institution=${institId}&funder=${funderId}&journal=${journalId}`})
       
   }
   
   
 }
 
 console.log(`all conditions SET: ${conditions}`)
 console.log(details)
 
 console.log(`Selected Institution ID: ${institId} , Selected Funder: ${funderId}, Selected Journal ID: ${journalId}`)
 
 
 
 function detailsResult() {
 
 console.log(`details: ${details}`)
 console.log(result)
 
 
 
 
 if (details !== 'null') {
   
 
   return (
     
 
     <div className={classes.root} >
       
  
 
                   <Accordion style={{ marginBottom: "2rem"}} defaultExpanded="true">
                   <AccordionSummary
                     expandIcon={<ExpandMoreIcon />}
                     aria-controls="panel1a-content"
                     id="panel1a-header"
                   >
                  
                     <Typography className={classes.heading}>
                       
                     <p>Selected option(s)</p>
                     
                     </Typography>
                   
                    
                   </AccordionSummary>
                   <Container maxWidth="xl" >
                   <Grid container spacing={0.5} direction="row">
        
                   
                   {result?.map(i => (
                   
                   <Grid key={i.id} item>
                  
                    <AccordionDetails>
                   
 
                   <DetailCard  details={i}/>
                   
                  
                  
                   </AccordionDetails>
                
                   </Grid>
     
                   ))}
                   </Grid>
                   </Container>
               
                 
                   </Accordion>
         
           
   </div>
   )
   }
 }
 
 function conditionResults () {
 
   return (
     <div className={classes.root} >
     {conditions?.map(i=> (
 
     
      <ResultCard  result={i}/>
    
     ))}
     </div>
   )
 
 }
 
 
   return (
     <Box>
     <div className={classes.root}>
     <Container maxWidth="xl" >
     <Grid container spacing={1} direction="row">
       
         <form className={classes.root} style={{ marginTop: "8rem"}}  noValidate autoComplete="on" onSubmit={handleSubmit} color="inherit">
         
         
             <FormControl  className="form-input" style={{ width: 340}}>
               <Autocomplete
                   freeSolo
                   autoSelect
                   selectOnFocus
                   clearOnBlur 
                   id="institution"
                   options={institList.map((option) => option.name)}
                   renderOption={(params) => (
                     <a style={{ textAlign: "left"}}>{params}</a>
                   )}
                   
                   // getOptionLabel={(option) => option.name}
                   // filterOptions={filterOptions}
                   onInputChange={handleInstit}
                   // inputValue={institName}
                   renderInput={(params) => (
                     <TextField
                         {...params}
                         label="Swiss Institutions"
                         // margin="normal"
                         value={institId}
                         variant="outlined"
                         
                     />
                     )}
                     
               />
             </FormControl>
           
          
 
          
            
             <FormControl className="form-input" style={{ width: 340}}>
               <Autocomplete
                 freeSolo
                 id="funder"
                 options={funderList.map((option) => option.name)}
                 renderOption={(params) => (
                   <a style={{ textAlign: "left"}}>{params}</a>
                 )}
                 onInputChange={handleFunder}
                 renderInput={(params) => (
                   <TextField
                       {...params}
                       label="Funder"
                       // margin="normal"
                       value={funderId}
                       variant="outlined"
                   />
                   )}
                 />
               </FormControl>
               
          
         
 
          
          
             <FormControl className="form-input" style={{ width: 340}}>
             
               <Autocomplete
                 freeSolo
                 id="journal"
                 options={journalList.map((option) => option.name)}
                 renderOption={(params) => (
                   <a style={{ textAlign: "left"}}>{params}</a>
                 )}
                 onInputChange={handleJournal}
                 renderInput={(params) => (
                   <TextField
                       {...params}
                       label="Journal"
                       // margin="normal"
                       value={journalId}
                       variant="outlined"
                   />
                   )}
                 />
               </FormControl>
         
             
            
             <FormControl className="form-input" style={{ width: 340}}>
             
                         {!loading && 
                       
                       
                             <Button
                             className="App-btn"
                             variant="contained" 
                             type="submit"
                             >
                                     Check
                               </Button>
                           }
                         {loading && 
                       <Button
                       className="App-btn"
                       variant="contained" 
                       type="submit"
                       disabled
                       
                       >
                         < CircularProgress 
                         color="white"
                         />
                               Checking...
                         </Button>
                     }
             </FormControl>
           
            
           
           </form>
           </Grid>
           </Container>
         
       <Container maxWidth="xl" >
         
             
               {detailsResult()}
       
               {conditionResults()}
 
 
 
 
         {  history.location.pathname === "/" &&
         
         
 
         <Welcome />
         }
-        {  history.location.pathname === "/check" &&
+        {/* {  history.location.pathname === "/" && */}
+        <Tooltip disableFocusListener title="Share Url" arrow>
         <Fab onClick={handlShare} color="primary" aria-label="add">
         <ShareIcon />
-      </Fab>
-      
-        }
+        </Fab>
+        </Tooltip>
+        {/* } */}
         <Dialog
         open={open}
         TransitionComponent={Transition}
         keepMounted
         onClose={handleClose}
         aria-labelledby="alert-dialog-slide-title"
         aria-describedby="alert-dialog-slide-description"
       >
         <DialogTitle id="alert-dialog-slide-title">{"Share your Result!"}</DialogTitle>
         <DialogContent>
           <DialogContentText id="alert-dialog-slide-description">
           
          {url}
             
           </DialogContentText>
         </DialogContent>
         <DialogActions>
           <Button onClick={handleClose} color="primary">
             Copy to clipboard!
           </Button>
         </DialogActions>
       </Dialog>
+      <Tooltip disableFocusListener title="Request Modification" arrow>
+      <Fab onClick={handleReport} color="secondary" aria-label="add">
+        <FlagOutlinedIcon  fontSize="medium"/>
+        </Fab >
+        </Tooltip>
       </Container>
     
    </div>
    </Box>
   );
 }
 
 SearchFilterFields.propTypes = {
   /** Store the selected option/field Result from API. */
   details: PropTypes.object,
   /** Store the individual response for each request. */
   result: PropTypes.object,
   /** Store at the same place the aggregation of all request result */
   conditions: PropTypes.object,
   /** Manage the loading wheels inside the check button. */
   loading: PropTypes.bool
 }