diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 1fb59de3..06983803 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -725,6 +725,20 @@ "ENTRIES": "Entries", "VOLUNTEERS_ASSIGNED": "Volunteers assigned" }, + "YOUTHNET_PROFILE": { + "MY_PROFILE": "My Profile", + "ACTIVITIES_CONDUCTED": "Activities conducted", + "PROFILE_DETAILS": "Profile Details", + "FULL_NAME": "Full Name", + "EMAIL_ID": "Email ID", + "STATE_DISTRICT_BLOCK": "State District Block", + "DESIGNATION": "Designation", + "JOINED_ON": "Joined on", + "PHONE_NUMBER": "Phone Number", + "MENTOR_ID": "Mentor ID", + "GENDER": "Gender", + "AGE": "Age" + }, "YOUTHNET_CAMP_DETAILS": { "SUBMISSION": "Submission", "SUMMARY": "Summary" diff --git a/public/locales/hi/common.json b/public/locales/hi/common.json index 224ec82b..f0765cdb 100644 --- a/public/locales/hi/common.json +++ b/public/locales/hi/common.json @@ -687,6 +687,21 @@ "ENTRIES": "प्रविष्टियाँ", "VOLUNTEERS_ASSIGNED": "स्वयंसेवक सौंपे गए" }, + "YOUTHNET_PROFILE": { + "MY_PROFILE": "मेरा प्रोफाइल", + "ACTIVITIES_CONDUCTED": "संचालित गतिविधियाँ", + "PROFILE_DETAILS": "प्रोफाइल विवरण", + "FULL_NAME": "पूरा नाम", + "EMAIL_ID": "ईमेल आईडी", + "STATE_DISTRICT_BLOCK": "राज्य जिला ब्लॉक", + "DESIGNATION": "पद", + "JOINED_ON": "जुड़े दिनांक", + "PHONE_NUMBER": "फोन नंबर", + "MENTOR_ID": "मेंटोर आईडी", + "GENDER": "लिंग", + "AGE": "आयु" + }, + "YOUTHNET_CAMP_DETAILS": { "SUBMISSION": "प्रस्तुत करना", "SUMMARY": "सारांश" diff --git a/public/locales/mr/common.json b/public/locales/mr/common.json index 87238949..e6401e69 100644 --- a/public/locales/mr/common.json +++ b/public/locales/mr/common.json @@ -681,6 +681,21 @@ "BELOW_18": "18 वर्षांखालील नोंदणी", "VLLAGE_18": "आजची नवीन नोंदणी" }, + "YOUTHNET_PROFILE": { + "MY_PROFILE": "माझा प्रोफाइल", + "ACTIVITIES_CONDUCTED": "संचालित क्रियाकलाप", + "PROFILE_DETAILS": "प्रोफाइल तपशील", + "FULL_NAME": "पूर्ण नाव", + "EMAIL_ID": "ईमेल आयडी", + "STATE_DISTRICT_BLOCK": "राज्य जिल्हा ब्लॉक", + "DESIGNATION": "पद", + "JOINED_ON": "जोडलेले", + "PHONE_NUMBER": "फोन नंबर", + "MENTOR_ID": "मेंटर आयडी", + "GENDER": "लिंग", + "AGE": "वय" + }, + "YOUTHNET_VOLUNTEERLIST": { "ENTRIES": "नोंदी", "VOLUNTEERS_ASSIGNED": "स्वयंसेवक नियुक्त" diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 2c574742..ab6f8aca 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -21,6 +21,7 @@ import { useDirection } from '../hooks/useDirection'; import useStore from '../store/store'; import ConfirmationModal from './ConfirmationModal'; import StyledMenu from './StyledMenu'; +import { TENANT_DATA } from '../../app.config'; interface HeaderProps { toggleDrawer?: (newOpen: boolean) => () => void; @@ -63,8 +64,16 @@ const Header: React.FC = ({ toggleDrawer, openDrawer }) => { }, []); const handleProfileClick = () => { + const tenant = localStorage.getItem('tenantName'); if (pathname !== `/user-profile/${userId}`) { - router.push(`/user-profile/${userId}`); + if (tenant?.toLowerCase() === TENANT_DATA.YOUTHNET?.toLowerCase()) { + router.push(`youthboard/user-profile/${userId}`); + } else if ( + tenant?.toLowerCase() === + TENANT_DATA.SECOND_CHANCE_PROGRAM?.toLowerCase() + ) { + router.push(`/user-profile/${userId}`); + } logEvent({ action: 'my-profile-clicked-header', category: 'Dashboard', @@ -73,7 +82,7 @@ const Header: React.FC = ({ toggleDrawer, openDrawer }) => { } }; - const handleLogoutClick = async() => { + const handleLogoutClick = async () => { router.replace('/logout'); logEvent({ action: 'logout-clicked-header', @@ -82,11 +91,11 @@ const Header: React.FC = ({ toggleDrawer, openDrawer }) => { }); const token = localStorage.getItem('token'); - const tenantid = localStorage.getItem('tenantId') + const tenantid = localStorage.getItem('tenantId'); const deviceID = localStorage.getItem('deviceID'); const windowUrl = window.location.pathname; const cleanedUrl = windowUrl.replace(/^\//, ''); - const env = cleanedUrl.split("/")[0]; + const env = cleanedUrl.split('/')[0]; const telemetryInteract = { context: { env: env, @@ -103,7 +112,6 @@ const Header: React.FC = ({ toggleDrawer, openDrawer }) => { telemetryFactory.interact(telemetryInteract); if (deviceID) { try { - const tenantId = tenantid; const headers = { @@ -117,10 +125,7 @@ const Header: React.FC = ({ toggleDrawer, openDrawer }) => { headers ); } catch (updateError) { - console.error( - 'Error updating device notification:', - updateError - ); + console.error('Error updating device notification:', updateError); } } }; @@ -299,9 +304,8 @@ const Header: React.FC = ({ toggleDrawer, openDrawer }) => { setLanguage={setLanguage} /> - + - ); }; diff --git a/src/components/youthNet/MonthlyRegistrationsChart.tsx b/src/components/youthNet/MonthlyRegistrationsChart.tsx index e56691e5..10d586b9 100644 --- a/src/components/youthNet/MonthlyRegistrationsChart.tsx +++ b/src/components/youthNet/MonthlyRegistrationsChart.tsx @@ -34,6 +34,7 @@ const MonthlyRegistrationsChart: React.FC = () => { marginBottom: '10px', marginTop: 0, }} + suppressHydrationWarning > {t('YOUTHNET_DASHBOARD.MONTHLY_REGISTRATIONS_OVERVIEW')} diff --git a/src/components/youthNet/Profile.tsx b/src/components/youthNet/Profile.tsx new file mode 100644 index 00000000..ebb5d345 --- /dev/null +++ b/src/components/youthNet/Profile.tsx @@ -0,0 +1,178 @@ +import React from 'react'; +import { Card, CardContent, Typography, Grid } from '@mui/material'; +import { useTheme } from '@mui/material/styles'; +import { useTranslation } from 'react-i18next'; + +interface ProfileDetailsProps { + fullName: string; + emailId: string; + state?: string; + district?: string; + block?: string; + designation?: string; + joinedOn?: string; + phoneNumber?: string; + mentorId?: string; + gender?: string; + age?: number; +} + +const Profile: React.FC = ({ + fullName, + emailId, + state, + district, + block, + designation, + joinedOn, + phoneNumber, + mentorId, + gender, + age, +}) => { + const { t } = useTranslation(); + const theme = useTheme(); + return ( + + + + {t('YOUTHNET_PROFILE.FULL_NAME')} + + + {fullName} + + + + {t('YOUTHNET_PROFILE.EMAIL_ID')} + + + {emailId} + + + + {t('YOUTHNET_PROFILE.STATE_DISTRICT_BLOCK')} + + + {state}, {district}, {block} + + + + + + {t('YOUTHNET_PROFILE.DESIGNATION')} + + + {designation} + + + + + {t('YOUTHNET_PROFILE.JOINED_ON')} + + + {joinedOn} + + + + + + + + {t('YOUTHNET_PROFILE.PHONE_NUMBER')} + + + {phoneNumber} + + + + + {t('YOUTHNET_PROFILE.MENTOR_ID')} + + + {mentorId} + + + + + + + + {t('YOUTHNET_PROFILE.GENDER')} + + + {gender} + + + + + {t('YOUTHNET_PROFILE.AGE')} + + + {age} + + + + + + ); +}; + +export default Profile; diff --git a/src/components/youthNet/VillageDetailCard.tsx b/src/components/youthNet/VillageDetailCard.tsx index 7ab42f96..cab90915 100644 --- a/src/components/youthNet/VillageDetailCard.tsx +++ b/src/components/youthNet/VillageDetailCard.tsx @@ -19,6 +19,7 @@ const VillageDetailCard: React.FC = ({ border: `1px solid ${theme.palette.warning['A100']}`, bgcolor: theme.palette.warning['800'], padding: '12px', + margin: '20px', borderRadius: '16px', height: '64px', @@ -39,7 +40,7 @@ const VillageDetailCard: React.FC = ({ Icon )} - + {title && ( = ({ variant="body2" sx={{ fontSize: '12px', - fontWeight: 400, - lineHeight: '1.2', color: '#635E57', overflow: 'hidden', textOverflow: 'ellipsis', diff --git a/src/pages/youthboard/campDetails/[surveyCamp].tsx b/src/pages/youthboard/campDetails/[surveyCamp].tsx index 045d69a4..ff07c726 100644 --- a/src/pages/youthboard/campDetails/[surveyCamp].tsx +++ b/src/pages/youthboard/campDetails/[surveyCamp].tsx @@ -8,6 +8,8 @@ import { useTheme } from '@mui/material/styles'; import { useTranslation } from 'next-i18next'; import EntrySlider from '@/components/youthNet/EntrySlider'; import EntryContent from '@/components/youthNet/EntryContent'; +import withRole from '@/components/withRole'; +import { TENANT_DATA } from '../../../../app.config'; const SurveyClassDetails = () => { const { t } = useTranslation(); @@ -127,4 +129,4 @@ const SurveyClassDetails = () => { ); }; -export default SurveyClassDetails; +export default withRole(TENANT_DATA.YOUTHNET)(SurveyClassDetails); diff --git a/src/pages/youthboard/user-profile/[userId].tsx b/src/pages/youthboard/user-profile/[userId].tsx new file mode 100644 index 00000000..7fd8d12e --- /dev/null +++ b/src/pages/youthboard/user-profile/[userId].tsx @@ -0,0 +1,130 @@ +'use-client'; + +import withRole from '@/components/withRole'; +import React, { useEffect } from 'react'; +import { TENANT_DATA } from '../../../../app.config'; +import { Box, Typography } from '@mui/material'; +import { useTranslation } from 'react-i18next'; +import { useTheme } from '@mui/material/styles'; +import Header from '@/components/Header'; +import BackHeader from '@/components/youthNet/BackHeader'; +import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; +import { GetStaticPaths } from 'next'; +import { VILLAGE_DATA } from '@/components/youthNet/tempConfigs'; +import VillageDetailCard from '@/components/youthNet/VillageDetailCard'; +import Frame2 from '../../../assets/images/SurveyFrame2.png'; +import Profile from '@/components/youthNet/Profile'; + +const UserId = () => { + const { t } = useTranslation(); + const theme = useTheme(); + + const [user, setUser] = React.useState<{ + userRole: string | null; + userID: string | null; + firstName: string | null; + lastName: string | null; + email: string | null; + phone: string | null; + gender: string | null; + }>({ + userRole: null, + userID: null, + firstName: null, + lastName: null, + email: null, + phone: null, + gender: null, + }); + + useEffect(() => { + if (typeof window !== 'undefined' && window.localStorage) { + const role = localStorage.getItem('role'); + const userData = JSON.parse(localStorage.getItem('userData') || '{}'); + + setUser({ + firstName: userData?.firstName || null, + lastName: userData?.lastName || null, + email: userData?.email || null, + userID: userData?.userId || null, + phone: userData?.mobile || null, + gender: userData?.gender || null, + userRole: role || null, + }); + } + }, []); + return ( + + {' '} + +
+ + + + + + {' '} + + {t('YOUTHNET_PROFILE.ACTIVITIES_CONDUCTED')} + + + + + + + + {t('YOUTHNET_PROFILE.PROFILE_DETAILS')} + + + + + ); +}; + +export async function getStaticProps({ locale }: any) { + return { + props: { + ...(await serverSideTranslations(locale, ['common'])), + // Will be passed to the page component as props + }, + }; +} + +export const getStaticPaths: GetStaticPaths<{ slug: string }> = async () => { + return { + paths: [], //indicates that no page needs be created at build time + fallback: 'blocking', //indicates the type of fallback + }; +}; + +export default withRole(TENANT_DATA.YOUTHNET)(UserId); diff --git a/src/pages/youthboard/villages/index.tsx b/src/pages/youthboard/villages/index.tsx index 5868e599..144a5116 100644 --- a/src/pages/youthboard/villages/index.tsx +++ b/src/pages/youthboard/villages/index.tsx @@ -15,6 +15,8 @@ import { } from '@/components/youthNet/tempConfigs'; import { UserList } from '@/components/youthNet/UserCard'; import DownloadIcon from '@mui/icons-material/Download'; +import withRole from '@/components/withRole'; +import { TENANT_DATA } from '../../../../app.config'; const index = () => { const { t } = useTranslation(); const theme = useTheme(); @@ -32,7 +34,7 @@ const index = () => {
- + {value && ( @@ -200,4 +202,5 @@ export async function getStaticProps({ locale }: any) { }, }; } -export default index; + +export default withRole(TENANT_DATA.YOUTHNET)(index); diff --git a/src/styles/customTheme.tsx b/src/styles/customTheme.tsx index 7c9288ce..e1766c68 100644 --- a/src/styles/customTheme.tsx +++ b/src/styles/customTheme.tsx @@ -119,6 +119,9 @@ const customTheme = extendTheme({ main: '#064471', light: '#D6EEFF', contrastText: '#EFC570', + //@ts-ignore + black: '#000000', + gradient: 'linear-gradient(180deg, #FFFDF6 100%, #F8EFDA 100%)', }, warning: { '100': '#17130B',