#40 Fix single trainee detail page (#125)

* feature: improve trainee details page * handling missing application info, also adding download functionality * fixing error related to download and refactoring * Update TrainneeDetails.tsx * handling issues related to deployment * Fix number can't be shared (#130) Co-authored-by: Mugisha <mugisha@franks-MacBook-Pro.local> * #102 sidebar links review (#128) * fix: remove placeholder property * fix duplicate links --------- Co-authored-by: ceelogre <sam.nishimwe@yahoo.com> * Ft minimize dashboard menu #110 (#140) * fix: remove placeholder property * ft minimize dashboard menu * fix minimize dashboard by icon and categorize into section * fix minimize dashboard by icon and categorize into section * fix minimize dashboard by icon and categorize into section * fix minimize dashboard by icon and categorize into section * fix minimize dashboard by icon and categorize into section * fix minimize dashboard by icon and categorize into section * fix minimize dashboard scrollbar * fix minimize dashboard scrollbar * fix minimize dashboard scrollbar * Fix layout spacing between sidebar and main content in AdminLayout * new * Fix layout spacing between sidebar and main content in AdminLayout * fix layout --------- Co-authored-by: ceelogre <sam.nishimwe@yahoo.com> Co-authored-by: Prince-Kid <mucyoprinc12@gmail.com> Co-authored-by: Mucyo Prince <134399659+Prince-Kid@users.noreply.github.com> Co-authored-by: Aime-Patrick <aimepatrick64@gmail.com> * #118 fx: builtinSuperAdminCreateProgram (#126) * fix: remove placeholder property * The built-in superadmin account cannot create a program --------- Co-authored-by: ceelogre <sam.nishimwe@yahoo.com> * feature: improve trainee details page * handling missing application info, also adding download functionality * Update TrainneeDetails.tsx * adding way to send email and other adjustments * refining and fixing some issues * Update webpack.config.js * customizing way of sending email * refactoring code to fix issue related to code climate * fixing issue for deployment * fixing issues related to refactoring --------- Co-authored-by: MUGISHA Emmanuel <emmyzizo1@gmail.com> Co-authored-by: Mugisha <mugisha@franks-MacBook-Pro.local> Co-authored-by: ISHIMWE Jean Baptiste <ijbapte@gmail.com> Co-authored-by: ceelogre <sam.nishimwe@yahoo.com> Co-authored-by: ManziPatrick <144239912+ManziPatrick@users.noreply.github.com> Co-authored-by: Prince-Kid <mucyoprinc12@gmail.com> Co-authored-by: Mucyo Prince <134399659+Prince-Kid@users.noreply.github.com> Co-authored-by: Aime-Patrick <aimepatrick64@gmail.com> Co-authored-by: Niyonshuti Jean De Dieu <152473876+Jadowacu1@users.noreply.github.com>
atlp-rwanda · Oct 2, 2024 · 97425c1 · 97425c1
1 parent 5088aa5
commit 97425c1
Show file tree

Hide file tree

Showing 19 changed files with 4,242 additions and 3,502 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,4 +5,5 @@ coverage
 dist
 buildcoverage
 package-lock.json
-.DS_Store
+.DS_Store
+build/
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "echo \"Error: no test specified\" && exit 1",
+    "start": "webpack server",
     "dev": "webpack server",
     "test": "jest --watchAll=false",
     "build": "webpack build",
@@ -74,9 +74,11 @@
     "@emotion/styled": "^11.10.4",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-regular-svg-icons": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@heroicons/react": "^1.0.6",
     "@hookform/resolvers": "^3.3.0",
+    "@mui/icons-material": "^6.1.1",
     "@mui/material": "^5.10.11",
     "@mui/x-date-pickers": "^5.0.6",
     "@testing-library/jest-dom": "^5.16.5",
@@ -89,6 +91,7 @@
     "bootstrap": "^5.2.2",
     "browser": "^0.2.6",
     "date-fns": "^2.29.3",
+    "dayjs": "^1.11.6",
     "dotenv": "^16.0.3",
     "express": "^4.21.0",
     "flowbite": "^1.5.3",
@@ -97,11 +100,13 @@
     "googleapis": "^126.0.1",
     "graphql": "^16.6.0",
     "graphql-request": "^5.1.0",
+    "html2canvas": "^1.4.1",
     "icons": "^1.0.0",
     "jest": "^29.1.2",
     "jest-environment-jsdom": "^29.1.2",
     "joi": "^17.10.2",
     "jquery": "^3.6.1",
+    "jspdf": "^2.5.2",
     "jwt-decode": "^3.1.2",
     "mini-css-extract-plugin": "^2.6.1",
     "moment": "^2.29.4",
@@ -123,7 +128,8 @@
     "react-scripts": "^5.0.1",
     "react-select": "^5.7.4",
     "react-table": "^7.8.0",
-    "react-toastify": "^9.1.3",
+    "react-toastify": "^9.0.8",
+    "redux": "^4.2.0",
     "redux-devtools-extension": "^2.13.9",
     "redux-state-sync": "^3.1.4",
     "redux-thunk": "^2.4.1",

diff --git a/src/components/TraineeDetail/DetailItem.tsx b/src/components/TraineeDetail/DetailItem.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+interface DetailItemProps {
+  title: string;
+  value: string | number | boolean;
+}
+
+const DetailItem: React.FC<DetailItemProps> = ({ title, value }) => {
+  return (
+    <div className="w-72 bg-slate-300 pl-2 py-2 mb-3 rounded-md dark:bg-gray-800 dark:text-white">
+      <h3 className="pb-1">{title}</h3>
+      <p className="text-gray-500 text-sm dark:text-gray-400">
+        {String(value)}
+      </p>
+    </div>
+  );
+};
+
+export default DetailItem;
diff --git a/src/components/TraineeDetail/ProgramBox.tsx b/src/components/TraineeDetail/ProgramBox.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+import { IconType } from "react-icons";
+
+interface ProgramItemProps {
+  title: string;
+  value: string | number | boolean;
+  Icon: IconType;
+}
+
+const ProgramItem: React.FC<ProgramItemProps> = ({ title, value,Icon }) => {
+  return (
+    <div className="ml-5 flex items-center gap-4">
+      <Icon size={50} />
+      <div>
+        <h3 className="pb-2">{title}</h3>
+        <p className="text-gray-500 text-sm">{value}</p>
+      </div>
+    </div>
+  );
+};
+
+export default ProgramItem;
diff --git a/src/components/TraineeDetail/decisionSection.tsx b/src/components/TraineeDetail/decisionSection.tsx
@@ -0,0 +1,79 @@
+import React from "react";
+import { DownloadPdf } from "../../utils/DownloadPdf";
+
+interface TraineeDetails {
+  interview_decision: string;
+  trainee_id: {
+    email: string;
+    lastName: string;
+    firstName: string;
+  };
+}
+
+interface DecisionButtonProps {
+  decision: string;
+}
+
+const getDecisionDetails = (decision: string) => {
+  switch (decision) {
+    case "Passed":
+    case "Approved":
+      return {
+        text: "Passed",
+        style: "bg-[#56C870] hover:bg-[#67dc82] dark:hover:bg-[#1f544cef] dark:bg-[#56C870]",
+      };
+    case "Failed":
+    case "Rejected":
+      return {
+        text: "Failed",
+        style: "bg-red-800 hover:bg-red-500",
+      };
+    default:
+      return {
+        text: "No Decision",
+        style: "bg-gray-400",
+      };
+  }
+};
+
+const DecisionButton: React.FC<DecisionButtonProps> = ({ decision }) => {
+  const { text, style } = getDecisionDetails(decision);
+
+  return (
+    <span className={`btn-Aprov h-11 ${style} text-white font-bold py-3 px-5 rounded`}>
+      {text}
+    </span>
+  );
+};
+
+const DecisionSection: React.FC<{ traineeDetails: TraineeDetails }> = ({ traineeDetails }) => {
+  const { interview_decision, trainee_id } = traineeDetails;
+
+  return (
+    <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">
+      <h2 className="font-bold text-lg text-[#56C870] top-5 ml-5 mt-[-10px] pb-2 uppercase">
+        Status
+      </h2>
+      <div className="h-16 flex pl-6 items-center gap-5">
+        <DecisionButton decision={interview_decision} />
+        <button
+          onClick={() => DownloadPdf()}
+          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"
+        >
+          Download PDF
+        </button>
+        <button className="btn-Aprov h-11 bg-blue-500 hover:bg-blue-600 dark:hover:bg-blue-600 text-white font-bold py-2 px-8 rounded dark:bg-blue-500">
+          <a
+            href={`https://mail.google.com/mail/?view=cm&fs=1&to=${trainee_id?.email}&su=Your%20ATLP%20Application%20Email&body=Dear%20${trainee_id?.lastName} ${trainee_id?.firstName},`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Email
+          </a>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default DecisionSection;
diff --git a/src/components/form/SignInForm.tsx b/src/components/form/SignInForm.tsx
@@ -51,23 +51,18 @@ const LoginForm = () => {
   });
 
   const redirectAfterLogin = async () => {
-    const lastAttemptedRoute = localStorage.getItem('lastAttemptedRoute');
-    if (lastAttemptedRoute) {
-      localStorage.removeItem('lastAttemptedRoute');
-      navigate(lastAttemptedRoute);
-    } else {
       await Token();
       const role = localStorage.getItem("roleName") as string;
+
       if (role === "applicant") {
         navigate("/applicant");
-      } else if (role === "superAdmin") {
+      } else if (role === "superAdmin" || "Admin") {
         navigate("/admin");
       } else {
         const searchParams = new URLSearchParams(location.search);
         const returnUrl = searchParams.get('returnUrl') || '/';
         navigate(returnUrl);
       }
-    }
   }
 
   const onSubmit = async (data: loginFormData) => {
@@ -188,7 +183,7 @@ const LoginForm = () => {
         </div>
         <p className="text-sm mt-3 mb-2 text-[#616161] dark:text-gray-300">
           Don't have an account?{" "}
-          <Link to="/register" className="text-[#56C870]">
+          <Link to={'/signup'} className="text-[#56C870]">
             Sign up
           </Link>
         </p>

diff --git a/src/components/sidebar/navHeader.tsx b/src/components/sidebar/navHeader.tsx
@@ -35,7 +35,12 @@ function NavBar() {
   const handleShowProfileDropdown = () =>
     setShowprofileDropdown(!showProfileDropdown);
 
+  const roleName = localStorage.getItem("roleName");
+  const destination = (roleName === "superAdmin" || roleName === "Admin") ? "/admin" : "/applicant";
+
+
   return (
+
     <div className="flex items-center dark:bg-zinc-800 ">
       {showProfileDropdown && (
         <ProfileDropdown
@@ -59,8 +64,9 @@ function NavBar() {
               <IoClose className="w-7 text-9xl dark:text-dark-text-fill" />
             )}
           </span>
+
           <span>
-            <Link to="/" className="flex items-center">
+            <Link to={destination} className="flex items-center">
               {theme ? (
                 <img
                   className="cursor-pointer mx-2 fill-[blue]"
@@ -79,6 +85,7 @@ function NavBar() {
               </h1>
             </Link>
           </span>
+
         </div>
         <div className="flex items-center mr-4">
           <span className="flex items-center">

diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx
@@ -69,7 +69,7 @@ const Sidebar = ({ expanded, setExpanded }) => {
         </ul>
         <button
           onClick={handleLogout}
-          className="flex items-center p-1 font-semibold hover:font-bold text-white focus:outline-none hover:text-[#56c770] mt-4 ml-4 mt-3"
+          className="flex items-center p-1 font-semibold hover:font-bold text-white focus:outline-none hover:text-[#56c770] mt-4 ml-4"
         >
           <Icon icon="hugeicons:logout-circle-02" className="mr-3" />
           {expanded && <span>Logout</span>}

diff --git a/src/components/sidebar/sidebarItems.tsx b/src/components/sidebar/sidebarItems.tsx
@@ -34,6 +34,11 @@ export const sidebarItems1 = [
     icon: <Icon icon="akar-icons:globe"></Icon>,
     title: "Applications",
   },
+  {
+    path: "Trainee-applicants",
+    icon: <Icon icon="ic:round-people"></Icon>,
+    title: "Trainees-Applicants",
+  },
   {
     path: "cohort",
     icon: <Icon icon="fa6-solid:graduation-cap"></Icon>,
@@ -91,6 +96,7 @@ export const applicantSidebarItems = [
     title: "Job Post ",
   },
 ];
+
 export const sidebarItems2 = [
   {
     path: "/documents",

diff --git a/src/pages/TraineApplicant/Trainee.tsx b/src/pages/TraineApplicant/Trainee.tsx
@@ -354,7 +354,7 @@ const AddTrainee = (props: any) => {
                                                     </li>
                                                     <li>
                                                       <Link
-                                                        to={`/trainee-applicant-details/${item._id}`}
+                                                        to={`/admin/trainee-applicant-details/${item._id}`}
                                                         className="text-sm hover:bg-gray-100 text-gray-700  dark:text-white   dark:hover:bg-gray-500 block px-4 py-2"
                                                       >
                                                         View