Skip to content

Commit 55d63f5

Browse files
IsmaelmurekeziIsmaelmurekezi
authored
Update TrainneeDetails.tsx
1 parent f4a3a3b commit 55d63f5

File tree

1 file changed

+118
-135
lines changed

1 file changed

+118
-135
lines changed

‎src/pages/TrainneeDetails.tsx‎

Lines changed: 118 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import {
1313
import { toast } from "react-toastify";
1414
import DetailItem from "../components/TraineeDetail/DetailItem";
1515
import ProgramItem from "../components/TraineeDetail/ProgramBox";
16-
import { DownloadPdf } from "../utils/DownloadPdf";
1716

1817
const TrainneeDetails = (props: any) => {
1918
const params = useParams();
@@ -55,169 +54,153 @@ const TrainneeDetails = (props: any) => {
5554

5655
const traineeDetails = oneTraineeDetails.data;
5756

58-
59-
57+
const updateManyScoreValues = () => {
58+
const scores = scoreValue.map((values: any) => {
59+
delete values.test;
60+
return values;
61+
});
62+
props.updateManyScoreValues(scores);
63+
};
6064

6165
return (
66+
<>
6267
<Navbar />
6368
<div className="flex items-center overflow-auto dark:bg-dark-frame-bg">
6469
<div className="block w-[100%] pl-[16rem] h-max md:pl-0 mx-auto dark:bg-dark-frame-bg pb-10 mt-10 pt-[80px]">
65-
<div className="" id="trainee-info">
66-
{traineeDetails && (
67-
<div className="w-full mx-16 bg-slate-200 rounded-xl shadow-md overflow-hidden md:max-w-2xl mb-6 lg:flex lg:max-w-3xl dark:bg-[#192432] dark:text-white">
68-
<div className="md:flex">
69-
<h2 className="top-5 m-5 font-medium md:m-3">
70-
<span className="pl-5 text-lg text-[#56C870] uppercase">
71-
Trainee Applicant Information
72-
</span>
73-
</h2>
74-
<div className="m-5 sm:mt-20 sm:ml-[-12rem] md:shrink-0 lg:ml-10 lg:mt-10">
75-
<DetailItem
76-
title="FirstName"
77-
value={traineeDetails?.trainee_id?.firstName}
78-
/>
79-
<DetailItem title="Gender" value={traineeDetails.gender} />
80-
<DetailItem
81-
title="Address"
82-
value={traineeDetails.Address}
83-
/>
84-
<DetailItem
85-
title="Phone Number"
86-
value={traineeDetails.phone}
87-
/>
88-
<DetailItem
89-
title="Field of Study"
90-
value={traineeDetails.field_of_study}
91-
/>
92-
<DetailItem
93-
title="Education Level"
94-
value={traineeDetails.education_level}
95-
/>
96-
<DetailItem
97-
title="Is Student"
98-
value={traineeDetails.isStudent}
99-
/>
100-
<DetailItem
101-
title="Is Employed"
102-
value={traineeDetails.isEmployed}
103-
/>
104-
<DetailItem
105-
title="Email"
106-
value={traineeDetails?.trainee_id?.email}
107-
/>
108-
</div>
109-
</div>
110-
<div className="m-5 sm:ml-[20rem] md:ml-2 lg:mt-20 lg:ml-[5rem]">
70+
{traineeDetails && (
71+
<div className="w-full mx-16 bg-slate-200 rounded-xl shadow-md overflow-hidden md:max-w-2xl mb-6 lg:flex lg:max-w-3xl dark:bg-[#192432] dark:text-white">
72+
<div className="md:flex">
73+
<h2 className="top-5 m-5 font-medium md:m-3">
74+
<span className="pl-5 text-lg text-[#56C870] uppercase">
75+
Trainee Applicant Information
76+
</span>
77+
</h2>
78+
<div className="m-5 sm:mt-20 sm:ml-[-12rem] md:shrink-0 lg:ml-10 lg:mt-10">
11179
<DetailItem
112-
title="LastName"
113-
value={traineeDetails?.trainee_id?.lastName}
80+
title="FirstName"
81+
value={traineeDetails?.trainee_id?.firstName}
11482
/>
83+
<DetailItem title="Gender" value={traineeDetails.gender} />
84+
<DetailItem title="Address" value={traineeDetails.Address} />
11585
<DetailItem
116-
title="Province"
117-
value={traineeDetails.province}
86+
title="Phone Number"
87+
value={traineeDetails.phone}
11888
/>
11989
<DetailItem
120-
title="District"
121-
value={traineeDetails.district}
90+
title="Field of Study"
91+
value={traineeDetails.field_of_study}
12292
/>
123-
<DetailItem title="Sector" value={traineeDetails.sector} />
12493
<DetailItem
125-
title="Interview decision"
126-
value={traineeDetails.interview_decision}
94+
title="Education Level"
95+
value={traineeDetails.education_level}
12796
/>
12897
<DetailItem
129-
title="Hackerrank Score"
130-
value={traineeDetails.Hackerrank_score}
98+
title="Is Student"
99+
value={traineeDetails.isStudent}
131100
/>
132101
<DetailItem
133-
title="English Score"
134-
value={traineeDetails.english_score}
102+
title="Is Employed"
103+
value={traineeDetails.isEmployed}
135104
/>
136105
<DetailItem
137-
title="Date of Birth"
138-
value={new Intl.DateTimeFormat("en-CA", {
139-
year: "numeric",
140-
month: "2-digit",
141-
day: "2-digit",
142-
}).format(traineeDetails.birth_date)}
106+
title="Email"
107+
value={traineeDetails?.trainee_id?.email}
143108
/>
144109
</div>
145110
</div>
146-
)}
147-
148-
{traineeDetails && (
149-
<div className="w-full mx-16 bg-slate-200 rounded-xl shadow-md overflow-hidden md:max-w-2xl mb-6 lg:flex lg:max-w-3xl dark:bg-[#192432] dark:text-white">
150-
<div className="">
151-
<h2 className="top-5 m-5 font-medium">
152-
<span className="pl-3 text-lg text-[#56C870] uppercase">
153-
Application Information
154-
</span>
155-
</h2>
156-
<div className="flex flex-col gap-7 m-5 lg:my-14">
157-
<ProgramItem
158-
title="Application Cycle"
159-
value={traineeDetails.trainee_id?.cycle_id?.name}
160-
Icon={FaRecycle}
161-
/>
111+
<div className="m-5 sm:ml-[20rem] md:ml-2 lg:mt-20 lg:ml-[5rem]">
112+
<DetailItem
113+
title="LastName"
114+
value={traineeDetails?.trainee_id?.lastName}
115+
/>
116+
<DetailItem title="Province" value={traineeDetails.province} />
117+
<DetailItem title="District" value={traineeDetails.district} />
118+
<DetailItem title="Sector" value={traineeDetails.sector} />
119+
<DetailItem
120+
title="Interview decision"
121+
value={traineeDetails.interview_decision}
122+
/>
123+
<DetailItem
124+
title="Hackerrank Score"
125+
value={traineeDetails.Hackerrank_score}
126+
/>
127+
<DetailItem
128+
title="English Score"
129+
value={traineeDetails.english_score}
130+
/>
131+
<DetailItem
132+
title="Date of Birth"
133+
value={new Intl.DateTimeFormat("en-CA", {
134+
year: "numeric",
135+
month: "2-digit",
136+
day: "2-digit",
137+
}).format(traineeDetails.birth_date)}
138+
/>
139+
</div>
140+
</div>
141+
)}
142+
{traineeDetails && (
143+
<div className="w-full mx-16 bg-slate-200 rounded-xl shadow-md overflow-hidden md:max-w-2xl mb-6 lg:flex lg:max-w-3xl dark:bg-[#192432] dark:text-white">
144+
<div className="">
145+
<h2 className="top-5 m-5 font-medium">
146+
<span className="pl-3 text-lg text-[#56C870] uppercase">
147+
Application Information
148+
</span>
149+
</h2>
150+
<div className="flex flex-col gap-7 m-5 lg:my-14">
151+
<ProgramItem
152+
title="Application Cycle"
153+
value={traineeDetails.trainee_id?.cycle_id?.name}
154+
Icon={FaRecycle}
155+
/>
162156

163-
<ProgramItem
164-
title="Program"
165-
value="Andela Technical Leadership Program"
166-
Icon={FaRecycle}
167-
/>
168-
</div>
157+
<ProgramItem
158+
title="Program"
159+
value="Andela Technical Leadership Program"
160+
Icon={FaRecycle}
161+
/>
169162
</div>
170-
<div className="mt-12">
171-
<div className="flex flex-col gap-7 m-5 lg:my-14">
172-
<ProgramItem
173-
title="Application start date"
174-
value={traineeDetails.trainee_id?.cycle_id?.startDate}
175-
Icon={LuCalendarDays}
176-
/>
177-
<ProgramItem
178-
title="Expected program end Date"
179-
value={traineeDetails.trainee_id?.cycle_id?.endDate}
180-
Icon={LuCalendarDays}
181-
/>
182-
</div>
163+
</div>
164+
<div className="mt-12">
165+
<div className="flex flex-col gap-7 m-5 lg:my-14">
166+
<ProgramItem
167+
title="Application start date"
168+
value={traineeDetails.trainee_id?.cycle_id?.startDate}
169+
Icon={LuCalendarDays}
170+
/>
171+
<ProgramItem
172+
title="Expected program end Date"
173+
value={traineeDetails.trainee_id?.cycle_id?.endDate}
174+
Icon={LuCalendarDays}
175+
/>
183176
</div>
184177
</div>
185-
)}
186-
</div>
178+
</div>
179+
)}
187180

188-
<div className="w-full py-7 flex flex-col mx-16 bg-slate-200 rounded-xl shadow-md overflow-hidden md:max-w-2xl lg:flex lg:max-w-3xl dark:bg-[#192432] dark:text-white">
189-
<h2 className="font-bold text-lg text-[#56C870] top-5 ml-5 mt-[-10px] pb-2 uppercase">
181+
<div className="w-full flex flex-col mx-16 pb-2 bg-slate-200 rounded-xl shadow-md overflow-hidden md:max-w-2xl mb-6 lg:flex lg:max-w-3xl dark:bg-[#192432] dark:text-white">
182+
<h2 className="font-bold text-lg text-[#56C870] top-5 pb-7 ml-5 mt-5 uppercase">
190183
Status
191184
</h2>
192-
<div className="h-16 flex items-center mt-[-8px] gap-5 ">
193-
<div>
194-
{traineeDetails.interview_decision === "Passed" ? (
195-
<div className="py-10 btn ml-5 mt-[-10%] mb-3">
196-
<button className="btn-Aprov bg-[#56C870] hover:bg-[#67dc82] dark:hover:bg-[#1f544cef] text-white font-bold py-2 px-4 rounded mt-7 mr-4 dark:bg-[#56C870]">
197-
Passed
198-
</button>
199-
</div>
200-
) : traineeDetails.interview_decision === "Relegated" ? (
201-
<div className="py-10 btn ml-5 mt-[-10%] mb-3">
202-
<button className="btn-Aprov3 bg-yellow-400 hover:text-white hover:bg-yellow-300 text-white font-bold mt-7 py-2 px-2 rounded">
203-
Relegated
204-
</button>
205-
</div>
206-
) : (
207-
<div className="py-10 btn ml-5 mt-[-10%] mb-3">
208-
<button className="btn-Aprov3 bg-red-800 hover:text-white hover:bg-red-500 text-white font-bold mt-7 py-2 px-2 rounded">
209-
Failed
210-
</button>
211-
</div>
212-
)}
185+
{traineeDetails.interview_decision === "Passed" ? (
186+
<div className="py-10 btn ml-5 mt-[-10%] mb-3">
187+
<button className="btn-Aprov bg-[#56C870] hover:bg-[#67dc82] dark:hover:bg-[#1f544cef] text-white font-bold py-2 px-4 rounded mt-7 mr-4 dark:bg-[#56C870]">
188+
Passed
189+
</button>
213190
</div>
214-
<button
215-
onClick={() => DownloadPdf("trainee-info")}
216-
className="btn-Aprov h-11 bg-blue-700 hover:bg-blue-600 dark:hover:bg-blue-600 text-white font-bold py-2 px-2 rounded dark:bg-blue-700"
217-
>
218-
Download PDF
219-
</button>
220-
</div>
191+
) : traineeDetails.interview_decision === "Relegated" ? (
192+
<div className="py-10 btn ml-5 mt-[-10%] mb-3">
193+
<button className="btn-Aprov3 bg-yellow-400 hover:text-white hover:bg-yellow-300 text-white font-bold mt-7 py-2 px-2 rounded">
194+
Relegated
195+
</button>
196+
</div>
197+
) : (
198+
<div className="py-10 btn ml-5 mt-[-10%] mb-3">
199+
<button className="btn-Aprov3 bg-red-800 hover:text-white hover:bg-red-500 text-white font-bold mt-7 py-2 px-2 rounded">
200+
Failed
201+
</button>
202+
</div>
203+
)}
221204
</div>
222205
</div>
223206
</div>

0 commit comments

Comments
 (0)