diff --git a/package-lock.json b/package-lock.json index af0005c84..45904325d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -65,7 +65,7 @@ "react-dropdown-select": "^4.10.0", "react-hook-form": "^7.45.2", "react-i18next": "^11.18.6", - "react-icons": "^4.10.1", + "react-icons": "^4.12.0", "react-loader-spinner": "^5.4.5", "react-pdf": "^7.3.3", "react-pdf-js": "^5.1.0", @@ -5899,13 +5899,13 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz", "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==", - "devOptional": true + "optional": true }, "node_modules/are-we-there-yet": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz", "integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==", - "devOptional": true, + "optional": true, "dependencies": { "delegates": "^1.0.0", "readable-stream": "^3.6.0" @@ -5918,7 +5918,7 @@ "version": "3.6.2", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==", - "devOptional": true, + "optional": true, "dependencies": { "inherits": "^2.0.3", "string_decoder": "^1.1.1", @@ -7047,7 +7047,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz", "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==", - "devOptional": true, + "optional": true, "engines": { "node": ">=10" } @@ -7362,7 +7362,7 @@ "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz", "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==", - "devOptional": true, + "optional": true, "bin": { "color-support": "bin.js" } @@ -7483,7 +7483,7 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==", - "devOptional": true + "optional": true }, "node_modules/content-disposition": { "version": "0.5.4", @@ -8202,7 +8202,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==", - "devOptional": true + "optional": true }, "node_modules/depd": { "version": "2.0.0", @@ -10308,7 +10308,7 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz", "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==", - "devOptional": true, + "optional": true, "dependencies": { "minipass": "^3.0.0" }, @@ -10320,7 +10320,7 @@ "version": "3.3.6", "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz", "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==", - "devOptional": true, + "optional": true, "dependencies": { "yallist": "^4.0.0" }, @@ -10332,7 +10332,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "devOptional": true + "optional": true }, "node_modules/fs-monkey": { "version": "1.0.5", @@ -10397,7 +10397,7 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz", "integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==", - "devOptional": true, + "optional": true, "dependencies": { "aproba": "^1.0.3 || ^2.0.0", "color-support": "^1.1.2", @@ -10417,13 +10417,13 @@ "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", - "devOptional": true + "optional": true }, "node_modules/gauge/node_modules/is-fullwidth-code-point": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", - "devOptional": true, + "optional": true, "engines": { "node": ">=8" } @@ -10432,7 +10432,7 @@ "version": "4.2.3", "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", - "devOptional": true, + "optional": true, "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", @@ -10769,7 +10769,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==", - "devOptional": true + "optional": true }, "node_modules/hash-base": { "version": "3.0.4", @@ -15606,7 +15606,7 @@ "version": "2.1.2", "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz", "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==", - "devOptional": true, + "optional": true, "dependencies": { "minipass": "^3.0.0", "yallist": "^4.0.0" @@ -15619,7 +15619,7 @@ "version": "3.3.6", "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz", "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==", - "devOptional": true, + "optional": true, "dependencies": { "yallist": "^4.0.0" }, @@ -15631,7 +15631,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "devOptional": true + "optional": true }, "node_modules/mkdirp": { "version": "0.5.6", @@ -18685,7 +18685,7 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz", "integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==", - "devOptional": true, + "optional": true, "dependencies": { "are-we-there-yet": "^2.0.0", "console-control-strings": "^1.1.0", @@ -21422,7 +21422,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==", - "devOptional": true + "optional": true }, "node_modules/set-function-length": { "version": "1.2.2", @@ -22478,7 +22478,7 @@ "version": "6.2.0", "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.0.tgz", "integrity": "sha512-/Wo7DcT0u5HUV486xg675HtjNd3BXZ6xDbzsCUZPt5iw8bTQ63bP0Raut3mvro9u+CUyq7YQd8Cx55fsZXxqLQ==", - "devOptional": true, + "optional": true, "dependencies": { "chownr": "^2.0.0", "fs-minipass": "^2.0.0", @@ -22495,7 +22495,7 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", - "devOptional": true, + "optional": true, "bin": { "mkdirp": "bin/cmd.js" }, @@ -22507,7 +22507,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "devOptional": true + "optional": true }, "node_modules/terminal-link": { "version": "2.1.1", @@ -24001,7 +24001,7 @@ "version": "1.1.5", "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz", "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==", - "devOptional": true, + "optional": true, "dependencies": { "string-width": "^1.0.2 || 2 || 3 || 4" } @@ -24010,13 +24010,13 @@ "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", - "devOptional": true + "optional": true }, "node_modules/wide-align/node_modules/is-fullwidth-code-point": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", - "devOptional": true, + "optional": true, "engines": { "node": ">=8" } @@ -24025,7 +24025,7 @@ "version": "4.2.3", "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", - "devOptional": true, + "optional": true, "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", diff --git a/package.json b/package.json index 1bb3c8b6b..11e70d0dd 100644 --- a/package.json +++ b/package.json @@ -86,7 +86,7 @@ "react-dropdown-select": "^4.10.0", "react-hook-form": "^7.45.2", "react-i18next": "^11.18.6", - "react-icons": "^4.10.1", + "react-icons": "^4.12.0", "react-loader-spinner": "^5.4.5", "react-pdf": "^7.3.3", "react-pdf-js": "^5.1.0", diff --git a/src/components/InvitationCard.tsx b/src/components/InvitationCard.tsx new file mode 100644 index 000000000..8136bd495 --- /dev/null +++ b/src/components/InvitationCard.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { AiOutlineRise } from "react-icons/ai"; + +// Define the type for the props +interface InvitationCardType { + icon: React.ReactNode; + status: string; + time: string; + staticNumber: string; + percentage: string; +} + +// Define the InvitationCard component +const InvitationCard: React.FC = ({ icon, status, time, staticNumber, percentage }) => { + return ( + <> +
+
+
+

{status}

+
+ {icon} +
+
+

{time}

+
+
+
+
+
{staticNumber}
+
+ + {percentage} +
+
+
+ + ); +} + +export default InvitationCard; + diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index 2cdaa2e79..8fbe8fe06 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -18,6 +18,7 @@ import { MoonIcon, MailIcon, } from '@heroicons/react/solid'; +import { FaEnvelopeOpenText } from "react-icons/fa6"; import { AcademicCapIcon, BookOpenIcon, @@ -36,9 +37,8 @@ function Sidebar({ style, toggle }: { style: string; toggle: () => void }) { const { logout } = useContext(UserContext); return (
void }) { + {/* INVITATION*/} + + + + + {/* FOR ADMINS */} diff --git a/src/containers/DashRoutes.tsx b/src/containers/DashRoutes.tsx index 96866e03f..2e5866351 100644 --- a/src/containers/DashRoutes.tsx +++ b/src/containers/DashRoutes.tsx @@ -26,6 +26,7 @@ const LoginActivitiesTable = React.lazy( const AdminTeams = React.lazy(() => import('./admin-dashBoard/Teams')); const AdminCohorts = React.lazy(() => import('./admin-dashBoard/Cohorts')); const AdminPrograms = React.lazy(() => import('./admin-dashBoard/Programs')); +const Invitation = React.lazy(() => import('../pages/Invitation')); const AdminSession = React.lazy(() => import('./admin-dashBoard/Sessions')); const AdminPhases = React.lazy(() => import('./admin-dashBoard/Phases')); const AdminManageRoles = React.lazy( @@ -85,7 +86,7 @@ function DashRoutes() { const [nav, setNav] = useState(false); const handleClick = () => setNav(!nav); - + return ( @@ -97,6 +98,13 @@ function DashRoutes() { } /> } /> + + + + + + } /> } /> } /> } /> - - } /> - - } /> + + } /> + + } /> } /> } /> diff --git a/src/pages/Invitation.tsx b/src/pages/Invitation.tsx new file mode 100644 index 000000000..ab27920b1 --- /dev/null +++ b/src/pages/Invitation.tsx @@ -0,0 +1,90 @@ +import React from 'react'; +import InvitationCard from '../components/InvitationCard'; +import { IoIosAddCircleOutline } from "react-icons/io"; +import { FaCheck } from "react-icons/fa"; +import { LuHourglass } from "react-icons/lu"; +import { BsPersonFillX } from "react-icons/bs"; +import { FaFilter } from "react-icons/fa"; +import { IoIosSearch } from "react-icons/io"; + +const Invitation = () => { + return ( + <> + {/* Header and Invite Button */} +
+

+ Invitation Stats +

+ +
+ + {/* Invitation Cards and Select */} +
+
+ } status="ACCEPTED" time="Last 7 days" staticNumber="75" percentage="60" /> + } status="PENDING" time="Last 7 days" staticNumber="10" percentage="30" /> + } status="DENIED" time="Last 7 days" staticNumber="44" percentage="30" /> + +
+
+ + +
+
+ + {/* Search Section */} +
+

+ Search for Invitation Status +

+

+ The “Search bar” below enables you to effortlessly check the status of sent invitations.
+ Simply type in the email or name of the invitee in the search bar to instantly retrieve real-time updates. +

+ + {/* Search form */} + + +
+
+ + +
+ +
+ +
+ + ); +}; + +export default Invitation; +