Admin backend

package-lock.json

@@ -18,6 +18,7 @@
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.11.2",
         "react-scripts": "5.0.1",
+        "react-spinners": "^0.13.8",
         "web-vitals": "^2.1.4"
       }
     },
@@ -14681,6 +14682,15 @@
         }
       }
     },
+    "node_modules/react-spinners": {
+      "version": "0.13.8",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz",
+      "integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==",
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",

package.json

@@ -13,6 +13,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.11.2",
     "react-scripts": "5.0.1",
+    "react-spinners": "^0.13.8",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -8,11 +8,12 @@ import AppContext from "./AppContext";
 
 import Navbar_ from "./Components/Navbar/Navbar_";
 
-import HomePage from "./Pages/HomePage";
+import Home from "./Pages/Home";
 import Levels from "./Pages/Levels";
 import Content from "./Pages/Content";
 import NewParagraph from "./Pages/NewParagraph";
 import Standards from "./Pages/Standards";
+import Details from "./Pages/Details";
 
 function App() {
   const iddrs_url = "http://localhost:8000/admin_api";
@@ -24,11 +25,12 @@ function App() {
           <Image className="mt-5" src={IddrsImg} alt="IDDRS" fluid />
           <Navbar_ />
           <Routes>
-            <Route path="/" element={<HomePage />} />
+            <Route path="/" element={<Home />} />
             <Route path="/content" element={<Content />} />
             <Route path="/newparagraph" element={<NewParagraph />} />
             <Route path="/levels" element={<Levels />} />
             <Route path="/standards" element={<Standards />} />
+            <Route path="/details/:level/:standard/:pk" element={<Details />} />
           </Routes>
         </Container>
       </AppContext.Provider>

src/Components/Content/ContentComp.js

@@ -51,8 +51,7 @@ const ContentComp = () => {
         },
       })
       .then((response) => {
-        setData(response.data.results);
-        console.log("Success!!!!!!!");
+        setData(response.data.contents);
       })
       .catch((error) => {
         console.log(error);
@@ -61,6 +60,7 @@ const ContentComp = () => {
 
   return (
     <Container className="mt-5">
+      
       <Form.Select
         aria-label="Default select example"
         onChange={handleLevelChange}
@@ -87,6 +87,7 @@ const ContentComp = () => {
           ))}
         </Form.Select>
       )}
+      <ContentList  standardContnet = {data} level ={selectedLevel} standard = {selectedStandard} />
     </Container>
   );
 };

src/Components/Content/ContentList.js

@@ -1,37 +1,39 @@
-import React, { useContext, useEffect, useState } from 'react';
-import axios from 'axios';
-import AppContext from "../../AppContext";
-
+import React from "react";
+import { Link } from 'react-router-dom';
 
 const ContentList = (props) => {
-    const [data, setData] = useState([]);
-    const level = props.level
-    const standard = props.standard
-    const url = useContext(AppContext);
-    //console.log(props.level)
-    //console.log(props.standard)
-
-    useEffect(() => {
-        // Make the Axios request to the Django API
-        axios.get(url+'/content-list', {
-          params: {
-            level: level,
-            standard: standard
-          }
-        })
-        .then(response => {
-          setData(response.data.results);
-          console.log("Success!!!!!!!")
-        })
-        .catch(error => {
-          console.log(error);
-        });
-      }, []);
-
-
   return (
-    <div>ContentList</div>
-  )
-}
+    <div className="mt-5">
+      {props.standardContnet.map((paragraph, index) => (
+        <Link to={`/details/${props.level}/${props.standard}/${paragraph.ID}`} key={index}>
+          <ul>
+            <li>{paragraph.Heading1}</li>
+            {paragraph.Heading2 ? (
+              <ul>
+                <li>{paragraph.Heading2}</li>
+                {paragraph.Heading3 ? (
+                  <ul>
+                    <li>{paragraph.Heading3}</li>
+                    {paragraph.Heading4 ? (
+                      <ul>
+                        <li>{paragraph.Heading4}</li>
+                      </ul>
+                    ) : (
+                      ""
+                    )}
+                  </ul>
+                ) : (
+                  ""
+                )}
+              </ul>
+            ) : (
+              ""
+            )}
+          </ul>
+        </Link>
+      ))}
+    </div>
+  );
+};
 
-export default ContentList
+export default ContentList;

src/Components/HomePage/HomePage.js

@@ -0,0 +1,112 @@
+import React, { useContext, useState, useEffect } from "react";
+import AppContext from "../../AppContext";
+import Button from "react-bootstrap/esm/Button";
+import axios from "axios";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+import Classes from "./HomePage.module.css";
+import ClipLoader from "react-spinners/ClipLoader";
+
+const HomePage = () => {
+  const url = useContext(AppContext);
+  const [newContentTracker, setNewContentTracker] = useState([]);
+  const [newContents, setNewContents] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    axios
+      .get(url + "/NewContentTracker/")
+      .then((response) => setNewContentTracker(response.data))
+      .catch((error) => console.log(error));
+  }, [newContents]);
+
+  const handelClick = () => {
+    setIsLoading(true);
+    axios
+      .post(url + "/pre-process/")
+      .then((response) => {
+        setNewContents(false);
+        setIsLoading(false);
+      })
+      .catch((error) => {
+        console.error("Error pre-processing:", error);
+        // Handle error condition
+      });
+  };
+
+  return (
+    <>
+      <Row className="mt-5">
+        <Col sm="9">
+          <h1>IDDRS Admin Entry Mask</h1>
+
+          <h2>Pages:</h2>
+          <ol>
+            <li>
+              <h3>Content:</h3>
+              <p>
+                To view the content of each standard by choosing the desired
+                level and standard. Users can click on each piece of content to
+                view it or modify it.
+              </p>
+            </li>
+            <li>
+              <h3>New Paragraph:</h3>
+              <p>
+                To add new paragraphs to the database to make them available for
+                searching.
+              </p>
+            </li>
+            <li>
+              <h3>Levels:</h3>
+              <p>
+                To show all levels. Users can enter new levels or modify
+                existing ones.
+              </p>
+            </li>
+            <li>
+              <h3>Standards:</h3>
+              <p>
+                To show all the standards ordered by levels. Users can modify or
+                add standards.
+              </p>
+            </li>
+          </ol>
+
+          <h2>Home Page:</h2>
+          <p>
+            In the home page, there is a pre-process button to make all the
+            modified and new entries searchable. The button only appears if
+            there are new paragraphs added.
+          </p>
+        </Col>
+        {newContentTracker.length > 0 && (
+          <Col sm="3">
+            <div>
+              <h5>
+                {newContentTracker.length} enterys are not yet searchable.
+                Please click Pre-Process button to make them searchable.
+              </h5>
+            </div>
+            <Button onClick={handelClick} variant="warning">
+              Pre-Process
+            </Button>
+          </Col>
+        )}
+      </Row>
+      {isLoading && (
+        <div
+          className={`d-flex justify-content-center align-items-center ${Classes.overlay}`}
+        >
+          <ClipLoader
+            size={150}
+            color="#ffffff"
+            aria-label="Loading Spinner"
+          ></ClipLoader>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default HomePage;

src/Components/HomePage/HomePage.module.css

@@ -0,0 +1,9 @@
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5); /* Adjust the opacity as needed */
+    z-index: 9999;
+  }

src/Components/LevelStandard/LevelStandard.js

@@ -0,0 +1,73 @@
+import React, { useContext, useState, useEffect } from "react";
+import AppContext from "../../AppContext";
+import axios from "axios";
+import Form from "react-bootstrap/Form";
+
+const LevelStandard = ({ onValueChange }) => {
+  const url = useContext(AppContext);
+
+  const [levels, setLevels] = useState([]);
+  const [standards, setStandards] = useState([]);
+
+  const [selectedLevel, setSelectedLevel] = useState('');
+  // const [selectedStandard, setSelectedStandard] = useState([]);
+
+  const [selectedStandards, setSelectedStandards] = useState([]);
+  const [showStandards, setShowStandards] = useState(false);
+
+  useEffect(() => {
+    axios
+      .get(url + "/levels/")
+      .then((response) => setLevels(response.data))
+      .catch((error) => console.log(error));
+  }, []);
+
+  useEffect(() => {
+    axios
+      .get(url + "/standards/")
+      .then((response) => setStandards(response.data))
+      .catch((error) => console.log(error));
+  }, []);
+
+  const handleLevelChange = (e) => {
+    setSelectedLevel(e.target.value);
+    setSelectedStandards(
+      standards.filter((standard) => standard.standardLevel == e.target.value)
+    );
+    setShowStandards(true);
+  };
+
+  const handleStandardChange = (e) =>{
+    const selectedStandard = e.target.value;
+    onValueChange(selectedLevel, selectedStandard)
+  }
+  return (
+    <>
+      <Form.Select
+        aria-label="Default select example"
+        onChange={handleLevelChange}
+      >
+        <option>Choose a level ...</option>
+        {levels.map((level) => (
+          <option key={level.levelNumber} value={level.levelNumber}>
+            {level.levelName}
+          </option>
+        ))}
+      </Form.Select>
+
+      {showStandards && (
+        <Form.Select className="mt-2" aria-label="Default select example"
+        onChange={handleStandardChange}>
+          <option>Choose a Standard ...</option>
+          {selectedStandards.map((standard) => (
+            <option key={standard.id} value={standard.standardTitle}>
+              {standard.standardTitle}
+            </option>
+          ))}
+        </Form.Select>
+      )}
+    </>
+  );
+};
+
+export default LevelStandard;

src/Components/LevelsList/LevelsList.js

@@ -0,0 +1,140 @@
+import React, { useContext, useState, useEffect } from "react";
+import AppContext from "../../AppContext";
+import axios from "axios";
+import Button from "react-bootstrap/Button";
+import Table from "react-bootstrap/Table";
+import Form from "react-bootstrap/Form";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+
+const LevelsList = () => {
+  const url = useContext(AppContext);
+  const [editingRow, setEditingRow] = useState(null);
+  const [levels, setLevels] = useState([]);
+
+  useEffect(() => {
+    axios
+      .get(url + "/levels/")
+      .then((response) => setLevels(response.data))
+      .catch((error) => console.log(error));
+  }, []);
+
+  const handleEditClick = (rowData) => {
+    setEditingRow(rowData);
+  };
+  const handleSubmit = (e) => {
+    // e.preventDefault();
+    axios
+      .post(url + "/level-submit/", {
+        params: {
+          editingRow: editingRow,
+        },
+      })
+      .then((response) => {
+        console.log("Form submitted successfully:", response.data);
+
+      })
+      .catch((error) => {
+        console.error("Error submitting form:", error);
+        // Handle error condition
+      });
+  };
+
+  const handleDeleteClick = (rowData) => {
+    axios
+      .post(url + "/level-delete/", {
+        params: {
+          rowData: rowData,
+        },
+      })
+      .then((response) => {
+        console.log("Form deleted successfully:", response.data);
+        window.location.reload(false);
+      })
+      .catch((error) => {
+        console.error("Error deleting form:", error);
+        // Handle error condition
+      });
+  };
+
+  return (
+    <>
+      <Form className="mt-5" onSubmit={handleSubmit}>
+        <Row>
+          <Col>
+            <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
+              <Form.Control
+                type="text"
+                disabled
+                placeholder="Level Number"
+                value={editingRow ? editingRow.levelNumber : ""}
+                onChange={(e) =>
+                  setEditingRow({ ...editingRow, levelNumber: e.target.value })
+                }
+              />
+            </Form.Group>
+          </Col>
+          <Col>
+            <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
+              <Form.Control
+                type="text"
+                placeholder="Level Name"
+                value={editingRow ? editingRow.levelName : ""}
+                onChange={(e) =>
+                  setEditingRow({ ...editingRow, levelName: e.target.value })
+                }
+              />
+            </Form.Group>
+          </Col>
+          <Col>
+            <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
+              <Form.Control
+                type="text"
+                placeholder="Level Color"
+                value={editingRow ? editingRow.levelColor : ""}
+                onChange={(e) =>
+                  setEditingRow({ ...editingRow, levelColor: e.target.value })
+                }
+              />
+            </Form.Group>
+          </Col>
+
+          <Col>
+            <Button variant="primary" type="submit">
+              Save
+            </Button>
+          </Col>
+        </Row>
+      </Form>
+      <Table className="mt-5">
+        <tbody>
+          {levels.map((level) => (
+            <tr key={level.levelNumber}>
+              <td>{level.levelNumber}</td>
+              <td>{level.levelName}</td>
+              <td>{level.levelColor}</td>
+              <td>
+                <Button
+                  variant="warning"
+                  onClick={() => handleEditClick(level)}
+                >
+                  Edit
+                </Button>
+              </td>
+              <td>
+                <Button
+                  variant="danger"
+                  onClick={() => handleDeleteClick(level)}
+                >
+                  Delete
+                </Button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </Table>
+    </>
+  );
+};
+
+export default LevelsList;

src/Components/NewParagraphForm/NewParagraphForm.js

@@ -0,0 +1,186 @@
+import React, { useContext, useState, useEffect } from "react";
+import AppContext from "../../AppContext";
+import axios from "axios";
+import LevelStandard from "../LevelStandard/LevelStandard";
+import Form from "react-bootstrap/Form";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+import Container from "react-bootstrap/esm/Container";
+import Button from "react-bootstrap/Button";
+
+const NewParagraphForm = () => {
+  const url = useContext(AppContext);
+
+  const [selectedLevel, setSelectedLevel] = useState("");
+  const [selectedStandard, setSelectedStandard] = useState("");
+
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  const [formData, setFormData] = useState({
+    Heading1: "",
+    Heading2: "",
+    Heading3: "",
+    Heading4: "",
+    Paragraph: "",
+    PageNum: "",
+  });
+
+  const handleLevelStandard = (level, standard) => {
+    setSelectedLevel(level);
+    setSelectedStandard(standard);
+  };
+
+  const handleChange = (e) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Access the form values from the formData state
+    console.log(formData);
+
+    axios
+      .post(url + "/content-create/", {
+        params: {
+          level: selectedLevel,
+          standard: selectedStandard,
+          formData: formData,
+        },
+      })
+      .then((response) => {
+        console.log("Form submitted successfully:", response.data);
+        setIsSubmitted(true);
+        setFormData({
+          Heading1: "",
+          Heading2: "",
+          Heading3: "",
+          Heading4: "",
+          Paragraph: "",
+          PageNum: "",
+        });
+      })
+      .catch((error) => {
+        console.error("Error submitting form:", error);
+        // Handle error condition
+      });
+  };
+  useEffect(() => {
+    if (isSubmitted) {
+      // Automatically hide the popup after 3 seconds
+      const timeout = setTimeout(() => {
+        setIsSubmitted(false);
+      }, 3000);
+
+      return () => clearTimeout(timeout);
+    }
+  }, [isSubmitted]);
+
+  return (
+    <Container className="mt-5">
+      {/* Popup message */}
+      {isSubmitted && (
+        <div className="popup">
+          <h1 className="text-success">Content added successfully!</h1>
+        </div>
+      )}
+      <Form onSubmit={handleSubmit}>
+        <LevelStandard onValueChange={handleLevelStandard}></LevelStandard>
+
+        <Form.Group as={Row} className="mb-3 mt-3" controlId="newPara.Title">
+          <Form.Label column sm="2">
+            Title
+          </Form.Label>
+          <Col sm="10">
+            <Form.Control
+              type="text"
+              placeholder="Title"
+              name="Heading1"
+              value={formData.Heading1}
+              onChange={handleChange}
+            />
+          </Col>
+        </Form.Group>
+
+        <Form.Group as={Row} className="mb-3" controlId="newPara.SubTitle1">
+          <Form.Label column sm="2">
+            Sub-Title1
+          </Form.Label>
+          <Col sm="10">
+            <Form.Control
+              type="text"
+              placeholder="Sub-Title1"
+              name="Heading2"
+              value={formData.Heading2}
+              onChange={handleChange}
+            />
+          </Col>
+        </Form.Group>
+
+        <Form.Group as={Row} className="mb-3" controlId="newPara.SubTitle2">
+          <Form.Label column sm="2">
+            Sub-Title2
+          </Form.Label>
+          <Col sm="10">
+            <Form.Control
+              type="text"
+              placeholder="Sub-Title2"
+              name="Heading3"
+              value={formData.Heading3}
+              onChange={handleChange}
+            />
+          </Col>
+        </Form.Group>
+
+        <Form.Group as={Row} className="mb-3" controlId="newPara.SubTitle3">
+          <Form.Label column sm="2">
+            Sub-Title3
+          </Form.Label>
+          <Col sm="10">
+            <Form.Control
+              type="text"
+              placeholder="Sub-Title3"
+              name="Heading4"
+              value={formData.Heading4}
+              onChange={handleChange}
+            />
+          </Col>
+        </Form.Group>
+
+        <Form.Group as={Row} className="mb-3" controlId="newPara.Para">
+          <Form.Label column sm="2">
+            Paragraph
+          </Form.Label>
+          <Col sm="10">
+            <Form.Control
+              as="textarea"
+              rows={6}
+              name="Paragraph"
+              value={formData.Paragraph}
+              onChange={handleChange}
+            />
+          </Col>
+        </Form.Group>
+
+        <Form.Group as={Row} className="mb-3" controlId="newPara.PageNumber">
+          <Form.Label column sm="2">
+            Page Number
+          </Form.Label>
+          <Col sm="10">
+            <Form.Control
+              type="text"
+              placeholder="Page Number"
+              name="PageNum"
+              value={formData.PageNum}
+              onChange={handleChange}
+            />
+          </Col>
+        </Form.Group>
+        <Button variant="primary" type="submit">
+          Save
+        </Button>
+      </Form>
+    </Container>
+  );
+};
+
+export default NewParagraphForm;

src/Components/Paragraph/ParagraphDetails.js

@@ -0,0 +1,224 @@
+import React, { useEffect, useState, useContext } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import AppContext from "../../AppContext";
+import axios from "axios";
+
+import Form from "react-bootstrap/Form";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+import Container from "react-bootstrap/esm/Container";
+import Button from "react-bootstrap/Button";
+
+const ParagraphDetails = ({ selectedParagraph }) => {
+  const url = useContext(AppContext);
+  const navigate = useNavigate();
+
+  const { level, standard, pk } = useParams();
+  console.log(level, standard, pk);
+  const [paragraph, setParagraph] = useState([]);
+
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  const [formData, setFormData] = useState({
+    Heading1: "",
+    Heading2: "",
+    Heading3: "",
+    Heading4: "",
+    Paragraph: "",
+    PageNum: "",
+  });
+
+  useEffect(() => {
+    axios
+      .get(url + "/content-detail/", {
+        params: {
+          level: level,
+          standard: standard,
+          id: pk,
+          formData: formData,
+        },
+      })
+      .then((response) => {
+        setParagraph(response.data.paragraph);
+        setFormData({
+          Heading1: response.data.paragraph.Heading1,
+          Heading2: response.data.paragraph.Heading2,
+          Heading3: response.data.paragraph.Heading3,
+          Heading4: response.data.paragraph.Heading4,
+          Paragraph: response.data.paragraph.Paragraph,
+          PageNum: response.data.paragraph.PageNum,
+        })
+      })
+      .catch((error) => console.log("There is an error:", error));
+  }, [pk]);
+
+  useEffect(() => {
+    if (isSubmitted) {
+      // Automatically hide the popup after 3 seconds
+      const timeout = setTimeout(() => {
+        setIsSubmitted(false);
+      }, 3000);
+
+      return () => clearTimeout(timeout);
+    }
+  }, [isSubmitted]);
+  
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    
+    axios
+      .post(url + "/content-update/", {
+        params: {
+          level: level,
+          standard: standard,
+          id: pk,
+          formData: formData,
+        },
+      })
+      .then((response) => {
+        console.log("Form submitted successfully:", response.data);
+        setIsSubmitted(true);
+      })
+      .catch((error) => {
+        console.error("Error submitting form:", error);
+        // Handle error condition
+      });
+  };
+
+  const handleChange = (e) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+
+  const handleDelete = (e) =>{
+    e.preventDefault();
+
+    axios
+    .post(url + "/content-delete/", {
+      params: {
+        level: level,
+        standard: standard,
+        id: pk
+      },
+    })
+    .then((response) => {
+      console.log("Deleted successfully:", response.data);
+      navigate('/content')
+    })
+    .catch((error) => {
+      console.error("Error deleting:", error);
+      // Handle error condition
+    });
+
+  }
+
+  return (
+    <Container className="mt-5">
+      {/* Popup message */}
+      {isSubmitted && (
+          <div className="popup">
+            <h1 className="text-success">Content updated successfully!</h1>
+          </div>
+        )}
+      <Form onSubmit={handleSubmit}>
+        <Form.Group as={Row} className="mb-3 mt-3" controlId="newPara.Title">
+          <Form.Label column sm="2">
+            Title
+          </Form.Label>
+          <Col sm="10">
+            <Form.Control
+              type="text"
+              placeholder="Title"
+              name="Heading1"
+              value={formData.Heading1}
+              onChange={handleChange}
+            />
+          </Col>
+        </Form.Group>
+
+        <Form.Group as={Row} className="mb-3" controlId="newPara.SubTitle1">
+          <Form.Label column sm="2">
+            Sub-Title1
+          </Form.Label>
+          <Col sm="10">
+            <Form.Control
+              type="text"
+              placeholder="Sub-Title1"
+              name="Heading2"
+              value={formData.Heading2}
+              onChange={handleChange}
+            />
+          </Col>
+        </Form.Group>
+
+        <Form.Group as={Row} className="mb-3" controlId="newPara.SubTitle2">
+          <Form.Label column sm="2">
+            Sub-Title2
+          </Form.Label>
+          <Col sm="10">
+            <Form.Control
+              type="text"
+              placeholder="Sub-Title2"
+              name="Heading3"
+              value={formData.Heading3}
+              onChange={handleChange}
+            />
+          </Col>
+        </Form.Group>
+
+        <Form.Group as={Row} className="mb-3" controlId="newPara.SubTitle3">
+          <Form.Label column sm="2">
+            Sub-Title3
+          </Form.Label>
+          <Col sm="10">
+            <Form.Control
+              type="text"
+              placeholder="Sub-Title3"
+              name="Heading4"
+              value={formData.Heading4}
+              onChange={handleChange}
+            />
+          </Col>
+        </Form.Group>
+
+        <Form.Group as={Row} className="mb-3" controlId="newPara.Para">
+          <Form.Label column sm="2">
+            Paragraph
+          </Form.Label>
+          <Col sm="10">
+            <Form.Control
+              as="textarea"
+              rows={6}
+              name="Paragraph"
+              value={formData.Paragraph}
+              onChange={handleChange}
+            />
+          </Col>
+        </Form.Group>
+
+        <Form.Group as={Row} className="mb-3" controlId="newPara.PageNumber">
+          <Form.Label column sm="2">
+            Page Number
+          </Form.Label>
+          <Col sm="10">
+            <Form.Control
+              type="text"
+              placeholder="Page Number"
+              name="PageNum"
+              value={formData.PageNum}
+              onChange={handleChange}
+            />
+          </Col>
+        </Form.Group>
+        <Button className="mt-5 me-2" variant="success" type="submit">
+          Update
+        </Button>
+        <Button className="mt-5" variant="danger" onClick={handleDelete}>
+          Delete
+        </Button>
+      </Form>
+    </Container>
+  );
+};
+
+export default ParagraphDetails;

src/Components/StandardsList/StandardsList.js

@@ -0,0 +1,173 @@
+import React, { useContext, useState, useEffect } from "react";
+import AppContext from "../../AppContext";
+import axios from "axios";
+import Button from "react-bootstrap/Button";
+import Table from "react-bootstrap/Table";
+import Form from "react-bootstrap/Form";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+import LevelsList from "../LevelsList/LevelsList";
+
+const StandardsList = () => {
+  const url = useContext(AppContext);
+  const [standards, setStandards] = useState([]);
+  const [levels, setLevels] = useState([]);
+  const [editingRow, setEditingRow] = useState(null);
+
+  useEffect(() => {
+    axios
+      .get(url + "/standards/")
+      .then((response) =>
+        setStandards(
+          response.data.sort(
+            (prev, next) => prev.standardLevel - next.standardLevel
+          )
+        )
+      )
+      .catch((error) => console.log(error));
+  }, []);
+
+  useEffect(() => {
+    axios
+      .get(url + "/levels/")
+      .then((response) => setLevels(response.data))
+      .catch((error) => console.log(error));
+  }, []);
+
+  const handleSubmit = () => {
+    axios
+      .post(url + "/standard-submit/", {
+        params: {
+          editingRow: editingRow,
+        },
+      })
+      .then((response) => {
+        console.log("Form submitted successfully:", response.data);
+      })
+      .catch((error) => {
+        console.error("Error submitting form:", error);
+        // Handle error condition
+      });
+  };
+  const handleEditClick = (rowData) => {
+    setEditingRow(rowData);
+  };
+  const handleDeleteClick = (rowData) => {
+    axios
+      .post(url + "/standard-delete/", {
+        params: {
+          rowData: rowData,
+        },
+      })
+      .then((response) => {
+        console.log("Form deleted successfully:", response.data);
+        window.location.reload(false);
+      })
+      .catch((error) => {
+        console.error("Error deleting form:", error);
+        // Handle error condition
+      });
+  };
+
+  return (
+    <>
+      <Form className="mt-5" onSubmit={handleSubmit}>
+        <Row>
+          <Col>
+            <Form.Select
+              aria-label="Default select example"
+              onChange={(e) =>
+                setEditingRow({
+                  ...editingRow,
+                  levelID: e.target.value,
+                })
+              }
+              value={editingRow ? editingRow.levelID : ""}
+            >
+              <option>Select Level</option>
+              {levels.map((level, index) => (
+                <option key={index} value={level.id}>
+                  Level: {level.levelNumber}
+                </option>
+              ))}
+            </Form.Select>
+          </Col>
+          <Col>
+            <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
+              <Form.Control
+                type="text"
+                placeholder="Standard Number"
+                value={editingRow ? editingRow.standardNumber : ""}
+                onChange={(e) =>
+                  setEditingRow({
+                    ...editingRow,
+                    standardNumber: e.target.value,
+                  })
+                }
+              />
+            </Form.Group>
+          </Col>
+          <Col>
+            <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
+              <Form.Control
+                type="text"
+                placeholder="Standard Title"
+                value={editingRow ? editingRow.standardTitle : ""}
+                onChange={(e) =>
+                  setEditingRow({
+                    ...editingRow,
+                    standardTitle: e.target.value,
+                  })
+                }
+              />
+            </Form.Group>
+          </Col>
+
+          <Col>
+            <Button variant="primary" type="submit">
+              Save
+            </Button>
+          </Col>
+        </Row>
+      </Form>
+      <Table className="mt-5">
+        <thead>
+          <tr>
+            <td>Level</td>
+            <td>Standard</td>
+            <td>Name</td>
+            <td>Revision</td>
+          </tr>
+        </thead>
+        <tbody>
+          {standards.map((standard, index) => (
+            <tr key={index}>
+              <td>{standard.standardLevel}</td>
+              <td>{standard.standardNumber}</td>
+              <td>{standard.standardTitle}</td>
+              <td>{standard.revision}</td>
+              <td>
+                <Button
+                  variant="warning"
+                  onClick={() => handleEditClick(standard)}
+                >
+                  Edit
+                </Button>
+              </td>
+              <td>
+                <Button
+                  variant="danger"
+                  onClick={() => handleDeleteClick(standard)}
+                >
+                  Delete
+                </Button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </Table>
+    </>
+  );
+};
+
+export default StandardsList;

src/Pages/Details.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import ParagraphDetails from '../Components/Paragraph/ParagraphDetails'
+import Container from 'react-bootstrap/esm/Container'
+
+const Details = () => {
+  return (
+    <Container>
+        <ParagraphDetails></ParagraphDetails>
+    </Container>
+  )
+}
+
+export default Details

src/Pages/Home.js

@@ -0,0 +1,10 @@
+import React from "react";
+import HomePage from "../Components/HomePage/HomePage";
+import Container from "react-bootstrap/esm/Container";
+const Home = () =>{
+    return (<Container>
+        <HomePage></HomePage>
+    </Container>);
+}
+
+export default Home;

src/Pages/HomePage.js

@@ -1,7 +0,0 @@
-import React from "react";
-
-const HomePage = () =>{
-    return (<div>Home Page</div>);
-}
-
-export default HomePage;

src/Pages/Levels.js

@@ -1,7 +1,11 @@
 import React from "react";
+import LevelsList from "../Components/LevelsList/LevelsList"
+import Container from "react-bootstrap/esm/Container";
 
 const Levels = () => {
-  return <div>Levels</div>;
+  return (<Container>
+    <LevelsList></LevelsList>
+  </Container>);
 };
 
 export default Levels;

src/Pages/NewParagraph.js

@@ -1,7 +1,13 @@
 import React from "react";
+import NewParagraphForm from "../Components/NewParagraphForm/NewParagraphForm";
+import Container from "react-bootstrap/esm/Container";
 
 const NewParagraph = () => {
-  return <div>NewParagraph</div>;
+  return (
+    <Container>
+      <NewParagraphForm></NewParagraphForm>
+    </Container>
+  );
 };
 
 export default NewParagraph;

src/Pages/Standards.js

@@ -1,7 +1,13 @@
 import React from "react";
+import StandardsList from "../Components/StandardsList/StandardsList";
+import Container from "react-bootstrap/esm/Container";
 
 const Standards = () => {
-  return <div>Standards</div>;
+  return (
+    <Container>
+      <StandardsList></StandardsList>
+    </Container>
+  );
 };
 
 export default Standards;