Add dashboard

app/dashboard/DetailComponent.tsx

@@ -0,0 +1,32 @@
+import DarkModeStatus from "../redux/status/darkModeStatus";
+
+const DetailComponent = (props: any) => {
+  const { detail, value } = props;
+  const dark = DarkModeStatus();
+  return (
+    <div>
+      <div
+        className={
+          dark
+            ? "flex flex-col my-2 mx-5 border-2 border-slate-600 rounded-xl sm:py-10 pr-5 pl-3 sm:pl-10 py-5"
+            : "flex flex-col my-2 mx-5 border-2 border-red-900 rounded-xl sm:py-10 pr-5 pl-3 sm:pl-10 py-5"
+        }
+      >
+        <p
+          className={
+            dark
+              ? "sm:text-3xl text-xl font-bold"
+              : "sm:text-3xl text-xl text-red-900 font-bold"
+          }
+        >
+          {detail}:
+        </p>
+        <p className="sm:text-2xl text-xl text-brown-700 break-words">
+          {value}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default DetailComponent;

app/dashboard/Details.tsx

@@ -0,0 +1,51 @@
+import DarkModeStatus from "../redux/status/darkModeStatus";
+import DetailComponent from "./DetailComponent";
+
+const Details = () => {
+  const dark = DarkModeStatus();
+  const detailArray = [
+    "Name",
+    "Age",
+    "Batch",
+    "Course",
+    "Roll No",
+    "Username",
+    "Email",
+  ];
+  const detailValue = [
+    "John Doe",
+    "18",
+    "2023",
+    "CSE Core",
+    "2023 BCX 1234",
+    "JohnDoe",
+    "john23bcx1234@ iiitkottayam.ac.in",
+  ];
+
+  return (
+    <div>
+      <div className="flex ">
+        <div className="flex flex-col justify-center align-center">
+          <h1
+            className={
+              dark ? "text-3xl my-5 ml-5" : "text-3xl my-5 ml-5 text-red-900"
+            }
+          >
+            Your Details
+          </h1>
+          <div className="grid xl:grid-cols-5 lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-3 grid-cols-2 ">
+            {detailArray.map((detail, index) => (
+              <DetailComponent
+                key={index}
+                detail={detail}
+                value={detailValue[index]}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Details;

app/dashboard/page.tsx

@@ -0,0 +1,48 @@
+"use client";
+import NavBar from "../components/NavBar";
+import DarkModeStatus from "../redux/status/darkModeStatus";
+import Details from "./Details";
+
+const Dashboard = () => {
+  const name = "John Doe";
+  const dark = DarkModeStatus();
+
+  return (
+    <div
+      className={
+        dark
+          ? "h-screen overflow-auto flex flex-col bg-gradient-to-b from-[#020024] to-[#020024] text-white transition-all duration-500 ease-in"
+          : "h-screen overflow-auto flex flex-col bg-gradient-to-b from-amber-100 to-white text-black transition-all duration-500 ease-in"
+      }
+    >
+      <NavBar />
+      <div>
+        <h1
+          className={
+            dark
+              ? "md:text-4xl text-4xl ml-5 my-10 font-extrabold"
+              : "md:text-4xl text-4xl ml-5 my-10 font-extrabold text-red-900"
+          }
+        >
+          Welcome, {name}
+        </h1>
+        <div>
+          <Details />
+          <div className="flex justify-center align-center mt-5">
+            <button
+              className={
+                dark
+                  ? "text-white text-xl bg-slate-800 border-0 p-2 rounded-lg flex align-center justify-center mb-10"
+                  : "text-xl  bg-red hover:bg-beige-800 border border-red-900 p-2 rounded-lg  flex align-center justify-center mb-10"
+              }
+            >
+              Edit Details
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;

app/redux/index.tsx

@@ -2,11 +2,13 @@ import darkModeReducer from "./darkMode/darkModeReducers";
 import emailReducer from "./email/emailReducers";
 import { combineReducers } from "redux";
 import formDataReducer from "./formData/formDataReducers";
+import userDataReducer from "./userData/userDataReducer";
 
 const allReducers = combineReducers({
   darkMode: darkModeReducer,
   email: emailReducer,
   formData: formDataReducer,
+  userData: userDataReducer,
 });
 
 export default allReducers;

app/redux/status/userDataStatus.tsx

@@ -0,0 +1,10 @@
+import { useSelector } from "react-redux";
+import { RootState } from "../store";
+
+const UserDataStatus = (): object => {
+    const data = useSelector((state: RootState) => state.userData);
+    return data;
+  };
+
+  export default UserDataStatus;
+

app/redux/userData/userDataActions.tsx

@@ -0,0 +1,8 @@
+import { UPDATE_DATA } from "./userDataTypes";
+
+export const updateData = (data: object) => {
+  return {
+    type: UPDATE_DATA,
+    payload: data,
+  };
+};

app/redux/userData/userDataReducer.tsx

@@ -0,0 +1,39 @@
+import { UPDATE_DATA } from "./userDataTypes";
+
+const initialState = {
+  FormData: {
+    course: "",
+    year: "",
+    rollNumber: "",
+    collegeEmail: "",
+    lmsPassword: "",
+    batch: "",
+    firstName: "",
+    lastName: "",
+    personalEmail: "",
+    phone: "",
+    state: "",
+    port0Username: "",
+    port0Password: "",
+  },
+};
+
+const userDataReducer = (
+  state = initialState,
+  action: {
+    payload: any;
+    type: any;
+  }
+) => {
+  switch (action.type) {
+    case UPDATE_DATA:
+      return {
+        ...state,
+        FormData: action.payload,
+      };
+    default:
+      return state;
+  }
+};
+
+export default userDataReducer;

app/redux/userData/userDataTypes.tsx

@@ -0,0 +1 @@
+export const UPDATE_DATA = "UPDATE_DATA";

app/verify/OTPForm.tsx

@@ -10,6 +10,7 @@ const { convertToAES } = require("@harshiyer/json-crypto");
 const OTPForm = () => {
   const dark = DarkModeStatus();
   const data = useSelector((state: RootState) => state.formData);
+
   const handleSubmit = async (event: FormEvent) => {
     event.preventDefault();