upto csrf

package.json

@@ -19,6 +19,7 @@
     "clsx": "^2.1.1",
     "dayjs": "^1.11.11",
     "install": "^0.13.0",
+    "js-cookie": "^3.0.5",
     "mantine-react-table": "^1.3.4",
     "npm": "^10.8.1",
     "react": "^18.3.1",

src/App.js

@@ -10,6 +10,8 @@ import Home from "./Pages/Admin/Home";
 import Analysis from "./Pages/Admin/Analysis";
 import LoginAdmin from "./Pages/Admin/LoginAdmin";
 import Allmembers from "./Pages/Admin/Allmembers";
+import Formexisting from "./Pages/Client/ExistingMember/Formexisting";
+import Approvalpage from "./Pages/Admin/Approvalpage";
 
 function App() {
   return (
@@ -30,6 +32,10 @@ function App() {
           <Route path="/allmembers" element={<Allmembers />} />
           <Route path="/adminlogin" element={<LoginAdmin />} />
           <Route path="/analysis" element={<Analysis />} />
+          <Route path="/approvalpage" element={<Approvalpage />} />
+
+          {/* {exiting user} */}
+          <Route path="/formexisting" element={<Formexisting />} />
         </Routes>
       </div>
     </Router>

src/Pages/Admin/Allmembers.jsx

@@ -20,7 +20,7 @@ const Allmembers = () => {
     const fetchData = async () => {
       try {
         const response = await fetch(
-          "http://192.168.169.17:8000/membershipform/"
+          "http://192.168.169.82:8000/membershipform/"
         );
         const jsonData = await response.json();
         setData(jsonData);
@@ -112,7 +112,6 @@ const Allmembers = () => {
     state: {
       globalFilter: "",
     },
-    // Add other configurations as needed...
   });
 
   return (

src/Pages/Admin/Analysis.jsx

@@ -33,7 +33,7 @@ const Dashboard = () => {
 
   useEffect(() => {
     axios
-      .get("http://192.168.169.17:8000/membershipform/")
+      .get("http://192.168.169.82:8000/membershipform/")
       .then((response) => {
         console.log("API response:", response.data); // Debugging log
         setFormData(response.data);

src/Pages/Admin/Approvalpage.jsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import Cookies from "js-cookie";
+
+const ApprovalPage = () => {
+  const [applications, setApplications] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchApplications = async () => {
+      try {
+        const csrfToken = Cookies.get("csrftoken")
+        // if (!csrfToken) {
+        //   console.log("Retrying to fetch CSRF token...");
+        //   setTimeout(fetchApplications, 1000);
+        //   return;
+        // }
+        console.log("CSRF Token:", csrfToken);
+
+        const response = await axios.get(
+          "http://192.168.169.82:8000/approval/",
+          {
+            withCredentials: true,
+            headers: {
+              "X-CSRFToken": csrfToken,
+            },
+          }
+        );
+        setApplications(response.data);
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        setError(error.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchApplications();
+  }, []);
+
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+
+  if (error) {
+    return <div>Error: {error}</div>;
+  }
+
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold mb-4">Approval Page</h1>
+      <div className="overflow-x-auto">
+        <table className="min-w-full bg-white border-gray-200 shadow-md rounded-lg overflow-hidden">
+          <thead className="bg-gray-100 text-gray-800">
+            <tr>
+              <th className="py-2 px-4 border-b">S.No</th>
+              <th className="py-2 px-4 border-b">Name of Applicant</th>
+              <th className="py-2 px-4 border-b">Status Admitted</th>
+              <th className="py-2 px-4 border-b">Accept/Reject</th>
+            </tr>
+          </thead>
+          <tbody>
+            {applications.map((application, index) => (
+              <tr key={application.id} className="text-gray-700">
+                <td className="py-2 px-4 border-b">{index + 1}</td>
+                <td className="py-2 px-4 border-b">
+                  {application.NameofApplicant}
+                </td>
+                <td className="py-2 px-4 border-b">
+                  {application.form_status}
+                </td>
+                <td className="py-2 px-4 border-b">
+                  <button
+                    className="bg-green-500 hover:bg-green-600 text-white py-1 px-3 rounded focus:outline-none focus:shadow-outline"
+                    // onClick={() => handleAccept(application.id)}
+                  >
+                    Accept
+                  </button>
+                  <button
+                    className="bg-red-500 hover:bg-red-600 text-white py-1 px-3 ml-2 rounded focus:outline-none focus:shadow-outline"
+                    // onClick={() => handleReject(application.id)}
+                  >
+                    Reject
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default ApprovalPage;

src/Pages/Admin/LoginAdmin.jsx

@@ -1,29 +1,36 @@
 import React, { useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import icci from "../../Assets/icci.jpg";
 import axios from "axios";
 
 const LoginAdmin = () => {
   const navigate = useNavigate();
   const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(false);
 
   const handleSubmit = async (e) => {
     e.preventDefault();
+    setLoading(true);
     const formData = new FormData(e.target);
     const username = formData.get("username");
     const password = formData.get("password");
 
     try {
-      const response = await axios.post("http://192.168.169.17:8000/login/", {
-        username,
-        password,
-      });
-      const token = response.data.token;
-      localStorage.setItem("token", token);
+      const response = await axios.post(
+        "http://192.168.169.82:8000/login/",
+        { username, password },
+        { withCredentials: true }
+      );
 
-      navigate("/admin");
+      if (response.status === 200) {
+        navigate("/adminhome");
+      } else {
+        setError("Invalid username or password");
+      }
     } catch (error) {
       setError("Invalid username or password");
+    } finally {
+      setLoading(false);
     }
   };
 
@@ -75,7 +82,7 @@ const LoginAdmin = () => {
                 />
               </div>
             </div>
-
+            {error && <div className="text-red-500 text-sm">{error}</div>}
             <div>
               <button
                 type="submit"

src/Pages/Admin/Navbar.jsx

@@ -61,6 +61,14 @@ const Navbar = () => {
                 Analysis
               </a>
             </li>
+            <li>
+              <a
+                href="/approvalpage"
+                class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
+              >
+                Approval table
+              </a>
+            </li>
           </ul>
         </div>
       </div>