Skip to content

Commit f94de10

Browse files
Rupesh-2003Rupesh-2003
committed
made recent verifications
1 parent b739ec0 commit f94de10

File tree

4 files changed

+195
-103
lines changed

4 files changed

+195
-103
lines changed

‎src/components/hireModal.jsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react'
2+
3+
const HireModal = () => {
4+
return (
5+
<div>
6+
<div id="medium-modal" tabindex="-1" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] md:h-full">
7+
<div class="relative w-full h-full max-w-lg md:h-auto">
8+
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
9+
<div class="flex items-center justify-between p-5 border-b rounded-t dark:border-gray-600">
10+
<h3 class="text-xl font-medium text-gray-900 dark:text-white">
11+
Default modal
12+
</h3>
13+
<button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="medium-modal">
14+
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
15+
<span class="sr-only">Close modal</span>
16+
</button>
17+
</div>
18+
<div class="p-6 space-y-6">
19+
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
20+
With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
21+
</p>
22+
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
23+
The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
24+
</p>
25+
</div>
26+
<div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
27+
<button data-modal-hide="medium-modal" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">I accept</button>
28+
<button data-modal-hide="medium-modal" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">Decline</button>
29+
</div>
30+
</div>
31+
</div>
32+
</div>
33+
</div>
34+
)
35+
}
36+
37+
export default HireModal

‎src/components/sidebar.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ const RoutesToShowSideBar = [
99
"/csvUpload",
1010
"/verifyEmployeeWithPhoto",
1111
"/recentVerifications",
12+
"/recentVerifications2",
1213
"/reportedEmployees",
1314
"/recomendedEmployees",
1415
"/reportEmployeeWithPhoto",

‎src/pages/recentVerifications.jsx‎

Lines changed: 49 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Button } from "flowbite-react";
12
import React from "react";
23

34
const RecentVerifications = () => {
@@ -50,109 +51,54 @@ const RecentVerifications = () => {
5051
console.log(showModal);
5152

5253
return (
53-
<div>
54-
<div className="relative overflow-x-auto">
55-
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
56-
<thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
57-
<tr>
58-
<th scope="col" className="px-6 py-3">
59-
Birth Date
60-
</th>
61-
<th scope="col" className="px-6 py-3">
62-
Name
63-
</th>
64-
<th scope="col" className="px-6 py-3">
65-
Gender
66-
</th>
67-
<th scope="col" className="px-6 py-3">
68-
Email
69-
</th>
70-
<th scope="col" className="px-6 py-3">
71-
Aadhar
72-
</th>
73-
<th scope="col" className="px-6 py-3">
74-
Verified
75-
</th>
76-
<th scope="col" className="px-6 py-3">
77-
{/* Add Verified */}
78-
</th>
79-
</tr>
80-
</thead>
81-
<tbody>
82-
{people.map((data) => {
83-
return (
84-
<tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
85-
<td className="px-6 py-4">{data.birth}</td>
86-
<td className="px-6 py-4">{data.name}</td>
87-
<td className="px-6 py-4">{data.Gender}</td>
88-
<td className="px-6 py-4">{data.Email}</td>
89-
<td className="px-6 py-4">{data.Aadhar}</td>
90-
<td className="px-6 py-4">{data.Verified}</td>
91-
<button
92-
disabled={data.Verified === "true" ? false : true}
93-
onClick={() => setShowModal(true)}
94-
className="mt-2 text-white bg-black hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
95-
>
96-
Add+
97-
</button>
98-
{showModal === true && (
99-
<>
100-
<div className="fixed top-0 left-0 right-0 z-50 w-full p-4 md:inset-0 h-[calc(100%-1rem)] md:h-full">
101-
<div className="relative w-full h-full max-w-2xl md:h-auto">
102-
<div className="relative bg-white rounded-lg shadow dark:bg-gray-700">
103-
<div className="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
104-
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">
105-
Note this message
106-
</h3>
107-
<button
108-
className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
109-
onClick={() => {
110-
setShowModal(false);
111-
}}
112-
>
113-
<svg
114-
aria-hidden="true"
115-
className="w-5 h-5"
116-
fill="currentColor"
117-
viewBox="0 0 20 20"
118-
xmlns="http://www.w3.org/2000/svg"
119-
>
120-
<path
121-
fill-rule="evenodd"
122-
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
123-
clip-rule="evenodd"
124-
></path>
125-
</svg>
126-
</button>
127-
</div>
128-
<div className="p-6 space-y-6">
129-
<p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
130-
With less than a month to go before the European
131-
Union enacts new consumer privacy laws for its
132-
citizens, companies around the world are
133-
updating their terms of service agreements to
134-
comply.
135-
</p>
136-
<p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
137-
The European Union’s General Data Protection
138-
Regulation (G.D.P.R.) goes into effect on May 25
139-
and is meant to ensure a common set of data
140-
rights in the European Union. It requires
141-
organizations to notify users as soon as
142-
possible of high-risk data breaches that could
143-
personally affect them.
144-
</p>
145-
</div>
146-
</div>
147-
</div>
148-
</div>
149-
</>
150-
)}
151-
</tr>
152-
);
153-
})}
154-
</tbody>
155-
</table>
54+
<div className='relative w-[70%] dark:text-white dark:bg-dark2 text-dark3'>
55+
<div className='flex flex-row items-center text-[26px] font-medium h-[70px] pl-[40px] border-b-[1px] dark:border-[#232830] border-[#DCE3EE]'>
56+
Recently Verified Employees
57+
</div>
58+
59+
<div className="flex flex-col w-[95%] mx-auto border-[1px] dark:border-[#232830] border-[#DCE3EE] border-collapse mt-[35px] rounded-t-[5px] cursor-pointer">
60+
<div className="flex flex-row justify-between bg-[#F6F9FC] dark:bg-[#1F232D] border-b-[1px] border-[#DCE3EE] dark:border-[#232830] rounded-t-[5px] text-[14px] font-medium">
61+
<div className="flex flex-row justify-center items-center w-[15%] box-border py-[12px] border-r-[1px] dark:border-[#232830]">Name</div>
62+
<div className="flex flex-row justify-center items-center w-[15%] box-border py-[12px] border-r-[1px] dark:border-[#232830]">Gender</div>
63+
<div className="flex flex-row justify-center items-center w-[15%] box-border py-[12px] border-r-[1px] dark:border-[#232830]">DOB</div>
64+
<div className="flex flex-row justify-center items-center w-[15%] box-border py-[12px] border-r-[1px] dark:border-[#232830]">Aadhaar</div>
65+
<div className="flex flex-row justify-center items-center w-[15%] box-border py-[12px] border-r-[1px] dark:border-[#232830]">Pan card</div>
66+
<div className="flex flex-row justify-center items-center w-[20%] box-border py-[12px] border-r-[1px] dark:border-[#232830]">Verification Status</div>
67+
<div className="flex flex-row justify-center items-center w-[15%] box-border py-[12px]">Option</div>
68+
</div>
69+
70+
{people.map((p) => {
71+
return (
72+
<div className="flex flex-row justify-between text-[14px]">
73+
<div className="flex flex-row justify-center items-center w-[15%] box-border py-[10px] border-r-[1px] dark:border-[#232830]">{p.name}</div>
74+
<div className="flex flex-row justify-center items-center w-[15%] box-border py-[10px] border-r-[1px] dark:border-[#232830]">{p.Gender}</div>
75+
<div className="flex flex-row justify-center items-center w-[15%] box-border py-[10px] border-r-[1px] dark:border-[#232830]">{p.birth}</div>
76+
<div className="flex flex-row justify-center items-center w-[15%] box-border py-[10px] border-r-[1px] dark:border-[#232830]">{p.Aadhar}</div>
77+
<div className="flex flex-row justify-center items-center w-[15%] box-border py-[10px] border-r-[1px] dark:border-[#232830]">-</div>
78+
<div className="flex flex-row justify-center items-center w-[20%] box-border py-[10px] border-r-[1px] dark:border-[#232830]">
79+
{p.Verified == 'true' ? <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="green" className="w-6 h-6">
80+
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z" />
81+
</svg>
82+
:
83+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="red" className="w-6 h-6">
84+
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
85+
</svg>
86+
}
87+
</div>
88+
<div className="flex flex-row justify-center items-center w-[15%] box-border py-[10px] border-r-[1px] dark:border-[#232830]">
89+
{p.Verified == 'true' ?
90+
<Button className="py-[-2px]">Hire
91+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4 ml-[5px]">
92+
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
93+
</svg>
94+
</Button>
95+
:
96+
<>-</>
97+
}
98+
</div>
99+
</div>
100+
)
101+
})}
156102
</div>
157103
</div>
158104
);

‎src/pages/recentVerifications2.jsx‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import React from "react";
2+
3+
const RecentVerifications = () => {
4+
const [showModal, setShowModal] = React.useState(false);
5+
6+
const people = [
7+
{
8+
name: "Vansh",
9+
birth: "23-1-2023",
10+
Gender: "Male",
11+
Email: "vansh@gmail.com",
12+
Aadhar: 3310,
13+
// Message will come with reports.message for red Verifiedtruegreen, it will be from recommends.
14+
Verified: "true",
15+
},
16+
{
17+
name: "Abhi",
18+
birth: "23-9-2023",
19+
Gender: "Male",
20+
Email: "vansh@gmail.com",
21+
Aadhar: 3310,
22+
Verified: "false",
23+
},
24+
{
25+
name: "Bunty",
26+
birth: "23-2-2023",
27+
Gender: "Male",
28+
Email: "vansh@gmail.com",
29+
Aadhar: 3310,
30+
Verified: "true",
31+
},
32+
{
33+
name: "Cinderela",
34+
birth: "23-7-2023",
35+
Gender: "Male",
36+
Email: "vansh@gmail.com",
37+
Aadhar: 3310,
38+
Verified: "false",
39+
},
40+
{
41+
name: "Zen",
42+
birth: "23-3-2023",
43+
Gender: "Male",
44+
Email: "vansh@gmail.com",
45+
Aadhar: 3310,
46+
Verified: "true",
47+
},
48+
];
49+
50+
console.log(showModal);
51+
52+
return (
53+
<div>
54+
<div className="relative overflow-x-auto">
55+
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
56+
<thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
57+
<tr>
58+
<th scope="col" className="px-6 py-3">
59+
Birth Date
60+
</th>
61+
<th scope="col" className="px-6 py-3">
62+
Name
63+
</th>
64+
<th scope="col" className="px-6 py-3">
65+
Gender
66+
</th>
67+
<th scope="col" className="px-6 py-3">
68+
Email
69+
</th>
70+
<th scope="col" className="px-6 py-3">
71+
Aadhar
72+
</th>
73+
<th scope="col" className="px-6 py-3">
74+
Verified
75+
</th>
76+
{/* <th scope="col" className="px-6 py-3"> */}
77+
{/* Add Verified */}
78+
{/* </th> */}
79+
</tr>
80+
</thead>
81+
<tbody>
82+
{people.map((data) => {
83+
return (
84+
<tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
85+
<td className="px-6 py-4">{data.birth}</td>
86+
<td className="px-6 py-4">{data.name}</td>
87+
<td className="px-6 py-4">{data.Gender}</td>
88+
<td className="px-6 py-4">{data.Email}</td>
89+
<td className="px-6 py-4">{data.Aadhar}</td>
90+
<td className="px-6 py-4">{data.Verified}</td>
91+
<button
92+
disabled={data.Verified === "true" ? false : true}
93+
onClick={() => setShowModal(true)}
94+
className="mt-2 text-white bg-black hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
95+
>
96+
Add+
97+
</button>
98+
</tr>
99+
);
100+
})}
101+
</tbody>
102+
</table>
103+
</div>
104+
</div>
105+
);
106+
};
107+
108+
export default RecentVerifications;

0 commit comments

Comments
 (0)