Skip to content

Commit ad93737

Browse files
HGSChandeepaHGSChandeepa
committed
add new data form
1 parent 5da4f13 commit ad93737

File tree

5 files changed

+267
-20
lines changed

5 files changed

+267
-20
lines changed

‎frontend/src/App.js

+2
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import Favorites from "./pages/Private/Favorites";
1111
import Profile from "./pages/Private/Profile";
1212
import { ToastContainer, toast } from "react-toastify";
1313
import "react-toastify/dist/ReactToastify.css";
14+
import ExamDuty from "./pages/Private/DashboardPages/ExamDuty";
1415

1516
function App() {
1617
return (
@@ -26,6 +27,7 @@ function App() {
2627
<Route path="/progress" element={<Progress />} />
2728
<Route path="/favorites" element={<Favorites />} />
2829
<Route path="/profile" element={<Profile />} />
30+
<Route path="/dashboard/exam" element={<ExamDuty />} />
2931
</Routes>
3032

3133
<ToastContainer />

‎frontend/src/Components/forms/ExamDuty.js

+14-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useState } from "react";
22
import { collection, addDoc } from "firebase/firestore";
33
import { firestore } from "../../config/firebase_configure";
4+
import { TiEdit } from "react-icons/ti";
45

56
const FormComponentExamDuty = () => {
67
const [formData, setFormData] = useState({
@@ -14,7 +15,6 @@ const FormComponentExamDuty = () => {
1415
form_type: "exam_duty",
1516
});
1617

17-
1818
const handleChange = (e) => {
1919
const { name, value } = e.target;
2020
setFormData((prevData) => ({
@@ -62,10 +62,22 @@ const FormComponentExamDuty = () => {
6262
};
6363

6464
return (
65-
<div className="max-w-md mx-auto mt-8 p-6 bg-gray-100 rounded-md shadow-md">
65+
<div className="max-w-md mx-auto mt-8 p-6 bg-gray-50 rounded-md shadow-md">
6666
<h2 className=" text-2xl font-semibold text-blue-600 border-b-4">
6767
Exam Duties
6868
</h2>
69+
<section className=" py-5">
70+
<div className="flex flex-row justify-between items-center">
71+
<div className="flex gap-2">
72+
{/* <button className="bg-red-100 text-red-800 flex items-center gap-4 font-medium px-4 py-2 rounded-full text-md">
73+
Delete <FiDelete />
74+
</button> */}
75+
<button className="bg-yellow-100 text-yellow-800 flex items-center gap-4 font-medium px-4 py-2 rounded-full text-md">
76+
Add In To Favourites <TiEdit />
77+
</button>
78+
</div>
79+
</div>
80+
</section>
6981
<form onSubmit={handleSubmit}>
7082
<div className="mb-4">
7183
<label

‎frontend/src/pages/Private/Dashboard.js

+6-4
Original file line numberDiff line numberDiff line change
@@ -85,10 +85,12 @@ const Dashboard = () => {
8585
</div>
8686
{/* cards */}
8787
<div className=" mt-5 grid grid-cols-3 gap-5">
88-
<SampleCards
89-
title="Exam Duty Forms"
90-
description="Go to this step by step guideline process on how to certify for your weekly benefits."
91-
/>{" "}
88+
<a href="/dashboard/exam">
89+
<SampleCards
90+
title="Exam Duty Forms"
91+
description="Go to this step by step guideline process on how to certify for your weekly benefits."
92+
/>{" "}
93+
</a>
9294
<SampleCards
9395
title="Vehical Resevation Forms"
9496
description="Go to this step by step guideline process on how to certify for your weekly benefits."

‎frontend/src/pages/Private/DashboardPages/ExamDuty.js

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import React, { useEffect, useState } from "react";
2+
import { getFirestore, doc, getDoc, getDocs } from "firebase/firestore";
3+
import { collection, addDoc } from "firebase/firestore";
4+
import { ToastContainer, toast } from "react-toastify";
5+
import "react-toastify/dist/ReactToastify.css";
6+
import SideBar from "../../../Components/Sidebar/SideBar";
7+
import FormComponentExamDuty from "../../../Components/forms/ExamDuty";
8+
9+
function ExamDuty() {
10+
const [userData, setUserData] = useState(null);
11+
const [userRole, setUserRole] = useState(null);
12+
const [userid, setUserId] = useState(null);
13+
const [userFormType, setUserFormType] = useState(null);
14+
const [userEmail, setUserEmail] = useState(null);
15+
const [userForms, setUserForms] = useState([]);
16+
useEffect(() => {
17+
const fetchUserData = async () => {
18+
try {
19+
const userId = localStorage.getItem("userId");
20+
setUserId(userId);
21+
console.log(userId);
22+
const db = getFirestore();
23+
const userDataRef = doc(db, "users", userId);
24+
25+
const userDataSnapshot = await getDoc(userDataRef);
26+
if (userDataSnapshot.exists()) {
27+
const userData = userDataSnapshot.data();
28+
setUserData(userData);
29+
setUserRole(userData.role);
30+
setUserFormType(userData.role + "forms");
31+
setUserEmail(userData.email);
32+
33+
// Fetch user forms from a separate collection
34+
const userFormsCollectionRef = collection(
35+
db,
36+
"users",
37+
userId,
38+
"forms"
39+
);
40+
const userFormsSnapshot = await getDocs(userFormsCollectionRef);
41+
const userFormsData = userFormsSnapshot.docs.map((doc) => doc.data());
42+
setUserForms(userFormsData);
43+
44+
console.log("User Data:", userData);
45+
console.log("User Forms:", userFormsData);
46+
} else {
47+
console.log("No such document!");
48+
}
49+
} catch (error) {
50+
console.error("Error fetching user data:", error);
51+
}
52+
};
53+
54+
fetchUserData();
55+
}, []);
56+
return (
57+
<div>
58+
<div className="flex flex-row ml-10 mt-10">
59+
<div className="">
60+
<div className=" text-black w-64 h-full p-4"></div>
61+
</div>
62+
63+
<div>
64+
<div className="flex flex-col gap-10">
65+
<div>
66+
<div className="place-items-start align-top items-center">
67+
<SideBar />
68+
</div>
69+
<div className="bg-yellow-100 text-yellow-800 w-40 flex gap-2 font-medium px-4 py-0.5 rounded-full text-md">
70+
{userRole} <span>Account</span>
71+
</div>
72+
</div>
73+
<div className="flex flex-col gap-2">
74+
<h2 className="text-2xl font-semibold text-yellow-500 ">
75+
Here Are Some Forms Submited By You
76+
</h2>
77+
<p className="text-gray-500 ">
78+
Apply for leave by filling in the form below and submitting it
79+
to your department head. You will be notified of the status of
80+
your application. And also, you can apply for a loan by filling
81+
in the form below and submitting it to your department head. You
82+
will be notified of the status of your application.
83+
</p>
84+
<div>
85+
<FormComponentExamDuty />
86+
</div>
87+
</div>
88+
</div>
89+
</div>
90+
</div>
91+
</div>
92+
);
93+
}
94+
95+
export default ExamDuty;

‎frontend/src/pages/Private/Favorites.js

+150-14
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,161 @@
1-
import React from 'react'
2-
import SideBar from '../../Components/Sidebar/SideBar'
1+
import React, { useEffect, useState } from "react";
2+
import SideBar from "../../Components/Sidebar/SideBar";
3+
import { getFirestore, doc, getDoc, getDocs } from "firebase/firestore";
4+
import { collection, addDoc } from "firebase/firestore";
5+
import { ToastContainer, toast } from "react-toastify";
6+
import "react-toastify/dist/ReactToastify.css";
7+
import { TiEdit } from "react-icons/ti";
38

9+
import { FiDelete } from "react-icons/fi";
10+
11+
const Tasks = () => {
12+
const [userData, setUserData] = useState(null);
13+
const [userRole, setUserRole] = useState(null);
14+
const [userid, setUserId] = useState(null);
15+
const [userFormType, setUserFormType] = useState(null);
16+
const [userEmail, setUserEmail] = useState(null);
17+
const [userForms, setUserForms] = useState([]);
18+
useEffect(() => {
19+
const fetchUserData = async () => {
20+
try {
21+
const userId = localStorage.getItem("userId");
22+
setUserId(userId);
23+
console.log(userId);
24+
const db = getFirestore();
25+
const userDataRef = doc(db, "users", userId);
26+
27+
const userDataSnapshot = await getDoc(userDataRef);
28+
if (userDataSnapshot.exists()) {
29+
const userData = userDataSnapshot.data();
30+
setUserData(userData);
31+
setUserRole(userData.role);
32+
setUserFormType(userData.role + "forms");
33+
setUserEmail(userData.email);
34+
35+
// Fetch user forms from a separate collection
36+
const userFormsCollectionRef = collection(
37+
db,
38+
"users",
39+
userId,
40+
"forms"
41+
);
42+
const userFormsSnapshot = await getDocs(userFormsCollectionRef);
43+
const userFormsData = userFormsSnapshot.docs.map((doc) => doc.data());
44+
setUserForms(userFormsData);
45+
46+
console.log("User Data:", userData);
47+
console.log("User Forms:", userFormsData);
48+
} else {
49+
console.log("No such document!");
50+
}
51+
} catch (error) {
52+
console.error("Error fetching user data:", error);
53+
}
54+
};
55+
56+
fetchUserData();
57+
}, []);
58+
59+
///fethch all forms from tthis user from the userFormType collection
60+
61+
console.log(userForms[0]);
462

5-
const Favorites = () => {
663
return (
764
<div className="flex flex-row ml-10 mt-10">
865
<div className="">
9-
<div className="place-items-start align-top items-center">
10-
<SideBar />
11-
</div>
12-
<div className=" text-black w-64 h-full p-4">
13-
14-
</div>
66+
<div className=" text-black w-64 h-full p-4"></div>
1567
</div>
1668

1769
<div>
18-
<h1>Favorites</h1>
70+
<div className="flex flex-col gap-10">
71+
<div>
72+
<div className="place-items-start align-top items-center">
73+
<SideBar />
74+
</div>
75+
<div className="bg-yellow-100 text-yellow-800 w-40 flex gap-2 font-medium px-4 py-0.5 rounded-full text-md">
76+
{userRole} <span>Account</span>
77+
</div>
78+
</div>
79+
<div className="flex flex-col gap-5">
80+
<div className="flex flex-col gap-2">
81+
<h2 className="text-2xl font-semibold text-yellow-500 ">
82+
Here Are Some Forms Favourited By You
83+
</h2>
84+
<p className="text-gray-500 ">
85+
Apply for leave by filling in the form below and submitting it
86+
to your department head. You will be notified of the status of
87+
your application. And also, you can apply for a loan by filling
88+
in the form below and submitting it to your department head. You
89+
will be notified of the status of your application.
90+
</p>
91+
</div>
92+
{/* cards */}
93+
<div className="flex flex-col gap-5">
94+
<div className=" w-[1200px]">
95+
{userForms.map((formData, index) => (
96+
<div
97+
key={index}
98+
className="bg-white p-4 rounded-lg shadow-md flex flex-row justify-between gap-3 mt-5 hover:bg-slate-100 cursor-pointer transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-101"
99+
>
100+
<div>
101+
<h3 className="text-lg font-semibold text-blue-700 ">
102+
Form Information {formData.formType}
103+
</h3>
104+
105+
<div className=" flex gap-10 mt-3 ">
106+
<p className=" bg-yellow-100 text-yellow-800 font-medium px-4 py-0.5 rounded-full text-md">
107+
{formData.userData.firstName}{" "}
108+
{formData.userData.lastName}
109+
</p>
110+
<p className=" bg-yellow-100 text-yellow-800 font-medium px-4 py-0.5 rounded-full text-md">
111+
{formData.userData.email}{" "}
112+
</p>
113+
<p className=" bg-yellow-100 text-yellow-800 font-medium px-4 py-0.5 rounded-full text-md">
114+
{formData.userData.department}{" "}
115+
</p>
116+
</div>
117+
<div className=" mt-5">
118+
<p className="pb-3 ">
119+
<h2 className=" mb-3">applications form</h2>
120+
{formData.selectedOption.map((option, index) => (
121+
<span
122+
className=" bg-blue-100 text-blue-800 font-medium px-4 py-0.5 rounded-full text-md"
123+
key={index}
124+
>
125+
{option}
126+
</span>
127+
))}
128+
</p>
129+
<hr />
130+
<p className="mt-3">
131+
Number Of Applicaions : {formData.numberOfApplication}{" "}
132+
</p>
133+
<p className=" mt-3 ">
134+
Number Of Applicaions : {formData.numberOfSections}{" "}
135+
</p>
136+
</div>
137+
</div>
138+
<section>
139+
<div className="flex flex-row justify-between items-center">
140+
<div className="flex gap-2">
141+
{/* <button className="bg-red-100 text-red-800 flex items-center gap-4 font-medium px-4 py-2 rounded-full text-md">
142+
Delete <FiDelete />
143+
</button> */}
144+
<button className="bg-blue-100 text-blue-800 flex items-center gap-4 font-medium px-4 py-2 rounded-full text-md">
145+
Remove Form Favourites <TiEdit />
146+
</button>
147+
</div>
148+
</div>
149+
</section>
150+
</div>
151+
))}
152+
</div>
153+
</div>
154+
</div>
155+
</div>
19156
</div>
20157
</div>
21-
22-
)
23-
}
158+
);
159+
};
24160

25-
export default Favorites
161+
export default Tasks;

0 commit comments

Comments
 (0)