From 01aa199780e12018f9685e5eb8636b4174323577 Mon Sep 17 00:00:00 2001 From: TTPL-RT-52 Date: Tue, 18 Jun 2024 19:18:01 +0530 Subject: [PATCH 01/10] Issue #PS-798 fix: Implementation of UI component as per figma to assign facilitator to village/centre at district level --- public/locales/en/common.json | 17 +-- public/locales/hi/common.json | 17 +-- public/locales/mr/common.json | 17 +-- src/pages/manageUser.tsx | 202 ++++++++++++++++++++++++++++++++++ src/styles/globals.css | 23 +++- 5 files changed, 236 insertions(+), 40 deletions(-) create mode 100644 src/pages/manageUser.tsx diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 90c67771..b70502ac 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -67,7 +67,10 @@ "SURE_LOGOUT" :"Are you sure you want to Logout?", "SURE_UPDATE" :"Are you sure you want to update this attendance?", "SURE_CLOSE":"Are you sure you want to close?", - "LEARNER_LIST":"Learners List" + "LEARNER_LIST":"Learners List", + "FILTERS":"Filters", + "MANAGE_USERS":"Manage Users", + "FACILITATORS":"Facilitators" }, "LOGIN_PAGE": { "USERNAME": "Username", @@ -196,18 +199,6 @@ "MONTH_MOBILISATION": "Month of Mobilisation", "DROP_OUT_REASON": "Reason for Drop Out From School" }, - "DROPOUT_REASONS":{ - "UNABLE_TO_COPE_WITH_STUDIES": "Unable to cope with studies", - "FAMILY_RESPONSIBILITIES": "Family responsibilities", - "NEED_TO_GO_TO_WORK_OWN_WORK": "Need to go to work / own work", - "MARRIAGE": "Marriage", - "ILLNESS": "Illness", - "MIGRATION": "Migration", - "PREGNANCY": "Pregnancy", - "DOCUMENT_ISSUE": "Document issue", - "DISTANCE_ISSUE": "Distance issue", - "SCHOOL_ADMISSION": "School admission" - }, "GUIDE_TOUR": { "STEP_1": "Welcome! let’s get you familiar with the dashboard", "STEP_2": "Use the calendar to view day-wise attendance of learners", diff --git a/public/locales/hi/common.json b/public/locales/hi/common.json index 7d2d2faa..65845358 100644 --- a/public/locales/hi/common.json +++ b/public/locales/hi/common.json @@ -67,7 +67,10 @@ "SURE_LOGOUT": "क्या आप वाकई लोगआउट करना चाहते हैं?", "SURE_UPDATE": "क्या आप इस उपस्थिति को अपडेट करना चाहते हैं?", "SURE_CLOSE": "क्या आप वाकई बंद करना चाहते हैं?", - "LEARNER_LIST":"शिक्षार्थियों की सूची" + "LEARNER_LIST": "अभियांत्रिकी सूची", + "FILTERS": "फिल्टर्स", + "MANAGE_USERS": "उपयोगकर्ताओं का प्रबंधन", + "FACILITATORS": "सुविधाकर्ता" }, "LOGIN_PAGE": { "USERNAME": "उपयोगकर्ता नाम", @@ -195,18 +198,6 @@ "MONTH_MOBILISATION": "जोड़ने का महीना", "DROP_OUT_REASON": "स्कूल छोड़ने का कारण" }, - "DROPOUT_REASONS":{ - "UNABLE_TO_COPE_WITH_STUDIES": "पढ़ाई में असमर्थता", - "FAMILY_RESPONSIBILITIES": "पारिवारिक जिम्मेदारियाँ", - "NEED_TO_GO_TO_WORK_OWN_WORK": "काम पर जाने की आवश्यकता / खुद का काम", - "MARRIAGE": "शादी", - "ILLNESS": "बीमारी", - "MIGRATION": "प्रवास", - "PREGNANCY": "गर्भावस्था", - "DOCUMENT_ISSUE": "दस्तावेज़ मुद्दा", - "DISTANCE_ISSUE": "दूरी की समस्या", - "SCHOOL_ADMISSION": "स्कूल में प्रवेश" - }, "GUIDE_TOUR": { "STEP_1": "स्वागत है! आइए आपको डैशबोर्ड से परिचित कराते हैं", "STEP_2": "शिक्षार्थियों की दिन-वार उपस्थिति देखने के लिए कैलेंडर का उपयोग करें", diff --git a/public/locales/mr/common.json b/public/locales/mr/common.json index 6e70363e..8f9063ad 100644 --- a/public/locales/mr/common.json +++ b/public/locales/mr/common.json @@ -67,7 +67,10 @@ "SURE_LOGOUT": "तुम्हाला खाते बंद करायचं आहे का?", "SURE_UPDATE": "तुम्हाला ही उपस्थिती अपडेट करायची आहे का?", "SURE_CLOSE": "तुम्हाला हे बंद करायचं आहे का?", - "LEARNER_LIST":"शिकणाऱ्यांची यादी" + "LEARNER_LIST": "शिक्षार्थ्यांची यादी", + "FILTERS": "फिल्टर्स", + "MANAGE_USERS": "वापरकर्ते व्यवस्थापित करा", + "FACILITATORS": "सुविधासंचालक" }, "LOGIN_PAGE": { "USERNAME": "वापरकर्तानाव", @@ -195,18 +198,6 @@ "MONTH_MOBILISATION": "एकत्रीकरणाचा महिना", "DROP_OUT_REASON": "शाळा सोडण्याचे कारण" }, - "DROPOUT_REASONS": { - "UNABLE_TO_COPE_WITH_STUDIES": "अभ्यासात असमर्थता", - "FAMILY_RESPONSIBILITIES": "कौटुंबिक जबाबदाऱ्या", - "NEED_TO_GO_TO_WORK_OWN_WORK": "कामावर जाण्याची आवश्यकता / स्वतःचे काम", - "MARRIAGE": "लग्न", - "ILLNESS": "आजार", - "MIGRATION": "स्थानांतरण", - "PREGNANCY": "गर्भधारणा", - "DOCUMENT_ISSUE": "दस्तऐवज समस्या", - "DISTANCE_ISSUE": "अंतराची समस्या", - "SCHOOL_ADMISSION": "शाळेत प्रवेश" - }, "GUIDE_TOUR": { "STEP_1": "स्वागत आहे! चला तुम्हाला डॅशबोर्डशी परिचित करून देतो", "STEP_2": "शिक्षार्थ्यांची दिवसवार उपस्थिती पाहण्यासाठी कॅलेंडर वापरा", diff --git a/src/pages/manageUser.tsx b/src/pages/manageUser.tsx new file mode 100644 index 00000000..3b457642 --- /dev/null +++ b/src/pages/manageUser.tsx @@ -0,0 +1,202 @@ +import { FormControl, Grid, MenuItem, Select, TextField } from '@mui/material'; + +import Box from '@mui/material/Box'; +import Header from '@/components/Header'; +import InputAdornment from '@mui/material/InputAdornment'; +import MoreVertIcon from '@mui/icons-material/MoreVert'; +import React from 'react'; +import SearchIcon from '@mui/icons-material/Search'; +import Tab from '@mui/material/Tab'; +import Tabs from '@mui/material/Tabs'; +import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; +import { useRouter } from 'next/router'; +import { useTheme } from '@mui/material/styles'; +import { useTranslation } from 'next-i18next'; + +const manageUser = () => { + const { t } = useTranslation(); + const theme = useTheme(); + const router = useRouter(); + + const [value, setValue] = React.useState('one'); + const handleChange = (event: React.SyntheticEvent, newValue: string) => { + setValue(newValue); + }; + return ( + <> +
+ + + {t('COMMON.MANAGE_USERS')} + + + + + {/* + */} + + + + + {value === 'one' && ( + <> + + + + + + + ), + }} + /> + + + + + + + + + + + + + + + + + + Aditi Patel + + + Nagpur, Bhivapur + + + Bhiwapur, Jabarbodi, Kargaon, + + and 3 more + + + + + + + + + + )} + + + ); +}; +export async function getStaticProps({ locale }: any) { + return { + props: { + ...(await serverSideTranslations(locale, ['common'])), + // Will be passed to the page component as props + }, + }; +} +export default manageUser; diff --git a/src/styles/globals.css b/src/styles/globals.css index 0c39cbed..26fb0418 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -728,7 +728,6 @@ main { color: #4d4639 !important; } - .p-10 { padding: 10px; } @@ -765,3 +764,25 @@ main { .selected-start-end { background-color: var(--mui-palette-primary-main) !important; } + +.input_search div:first-child { + height: 44px; + background: #ededed; + padding-left: 16px; + border-radius: 100px; + border: unset !important; +} +.input_search fieldset { + border: unset !important; +} + +.input_search input { + color: #4d4639; + font-size: 14px; +} +.color-FF { + background: #fff8f2; +} +.text-4D { + color: #4d4639 !important; +} From 7e9eb070c6ba98b257d9a171d2b9efff3645ac52 Mon Sep 17 00:00:00 2001 From: TTPL-RT-52 Date: Tue, 18 Jun 2024 19:24:23 +0530 Subject: [PATCH 02/10] Issue #PS-798 fix: Implementation of UI component as per figma to assign facilitator to village/centre at district level --- public/locales/en/common.json | 12 ++++++++++++ public/locales/hi/common.json | 12 ++++++++++++ public/locales/mr/common.json | 12 ++++++++++++ 3 files changed, 36 insertions(+) diff --git a/public/locales/en/common.json b/public/locales/en/common.json index b70502ac..8d7fbe45 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -199,6 +199,18 @@ "MONTH_MOBILISATION": "Month of Mobilisation", "DROP_OUT_REASON": "Reason for Drop Out From School" }, + "DROPOUT_REASONS":{ + "UNABLE_TO_COPE_WITH_STUDIES": "Unable to cope with studies", + "FAMILY_RESPONSIBILITIES": "Family responsibilities", + "NEED_TO_GO_TO_WORK_OWN_WORK": "Need to go to work / own work", + "MARRIAGE": "Marriage", + "ILLNESS": "Illness", + "MIGRATION": "Migration", + "PREGNANCY": "Pregnancy", + "DOCUMENT_ISSUE": "Document issue", + "DISTANCE_ISSUE": "Distance issue", + "SCHOOL_ADMISSION": "School admission" + }, "GUIDE_TOUR": { "STEP_1": "Welcome! let’s get you familiar with the dashboard", "STEP_2": "Use the calendar to view day-wise attendance of learners", diff --git a/public/locales/hi/common.json b/public/locales/hi/common.json index 65845358..f1d71d3a 100644 --- a/public/locales/hi/common.json +++ b/public/locales/hi/common.json @@ -198,6 +198,18 @@ "MONTH_MOBILISATION": "जोड़ने का महीना", "DROP_OUT_REASON": "स्कूल छोड़ने का कारण" }, + "DROPOUT_REASONS":{ + "UNABLE_TO_COPE_WITH_STUDIES": "पढ़ाई में असमर्थता", + "FAMILY_RESPONSIBILITIES": "पारिवारिक जिम्मेदारियाँ", + "NEED_TO_GO_TO_WORK_OWN_WORK": "काम पर जाने की आवश्यकता / खुद का काम", + "MARRIAGE": "शादी", + "ILLNESS": "बीमारी", + "MIGRATION": "प्रवास", + "PREGNANCY": "गर्भावस्था", + "DOCUMENT_ISSUE": "दस्तावेज़ मुद्दा", + "DISTANCE_ISSUE": "दूरी की समस्या", + "SCHOOL_ADMISSION": "स्कूल में प्रवेश" + }, "GUIDE_TOUR": { "STEP_1": "स्वागत है! आइए आपको डैशबोर्ड से परिचित कराते हैं", "STEP_2": "शिक्षार्थियों की दिन-वार उपस्थिति देखने के लिए कैलेंडर का उपयोग करें", diff --git a/public/locales/mr/common.json b/public/locales/mr/common.json index 8f9063ad..e21732b6 100644 --- a/public/locales/mr/common.json +++ b/public/locales/mr/common.json @@ -198,6 +198,18 @@ "MONTH_MOBILISATION": "एकत्रीकरणाचा महिना", "DROP_OUT_REASON": "शाळा सोडण्याचे कारण" }, + "DROPOUT_REASONS": { + "UNABLE_TO_COPE_WITH_STUDIES": "अभ्यासात असमर्थता", + "FAMILY_RESPONSIBILITIES": "कौटुंबिक जबाबदाऱ्या", + "NEED_TO_GO_TO_WORK_OWN_WORK": "कामावर जाण्याची आवश्यकता / स्वतःचे काम", + "MARRIAGE": "लग्न", + "ILLNESS": "आजार", + "MIGRATION": "स्थानांतरण", + "PREGNANCY": "गर्भधारणा", + "DOCUMENT_ISSUE": "दस्तऐवज समस्या", + "DISTANCE_ISSUE": "अंतराची समस्या", + "SCHOOL_ADMISSION": "शाळेत प्रवेश" + }, "GUIDE_TOUR": { "STEP_1": "स्वागत आहे! चला तुम्हाला डॅशबोर्डशी परिचित करून देतो", "STEP_2": "शिक्षार्थ्यांची दिवसवार उपस्थिती पाहण्यासाठी कॅलेंडर वापरा", From 2acd300a397b14787c3149e1aba1a88e48decf17 Mon Sep 17 00:00:00 2001 From: TTPL-RT-52 Date: Tue, 18 Jun 2024 19:26:42 +0530 Subject: [PATCH 03/10] Issue #PS-798 fix: Implementation of UI component as per figma to assign facilitator to village/centre at district level --- src/pages/manageUser.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/pages/manageUser.tsx b/src/pages/manageUser.tsx index 3b457642..3449f966 100644 --- a/src/pages/manageUser.tsx +++ b/src/pages/manageUser.tsx @@ -18,8 +18,8 @@ const manageUser = () => { const theme = useTheme(); const router = useRouter(); - const [value, setValue] = React.useState('one'); - const handleChange = (event: React.SyntheticEvent, newValue: string) => { + const [value, setValue] = React.useState(1); + const handleChange = (event: React.SyntheticEvent, newValue: number) => { setValue(newValue); }; return ( @@ -64,13 +64,11 @@ const manageUser = () => { }, }} > - {/* - */} - + - {value === 'one' && ( + {value === 1 && ( <> Date: Tue, 18 Jun 2024 19:40:13 +0530 Subject: [PATCH 04/10] Issue #PS-798 fix: Implementation of UI component as per figma to assign facilitator to village/centre at district level --- src/pages/manageUser.tsx | 2 +- src/styles/globals.css | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/manageUser.tsx b/src/pages/manageUser.tsx index 3449f966..788df7a9 100644 --- a/src/pages/manageUser.tsx +++ b/src/pages/manageUser.tsx @@ -25,7 +25,7 @@ const manageUser = () => { return ( <>
- + Date: Wed, 19 Jun 2024 01:59:36 +0530 Subject: [PATCH 05/10] Issue #PS-798 fix: Implementation of UI component as per figma to assign facilitator to village/centre at district level --- public/locales/en/common.json | 6 +- public/locales/hi/common.json | 25 +-- public/locales/mr/common.json | 5 +- src/components/ConfirmationModal.tsx | 103 ++++++++++++ src/components/Header.tsx | 46 +++++- src/components/ManageCentersModal.tsx | 228 ++++++++++++++++++++++++++ src/components/ManageUsersModal.tsx | 151 +++++++++++++++++ src/components/MarkBulkAttendance.tsx | 54 +++++- src/pages/teaching-centers.tsx | 2 +- src/styles/globals.css | 6 + 10 files changed, 599 insertions(+), 27 deletions(-) create mode 100644 src/components/ConfirmationModal.tsx create mode 100644 src/components/ManageCentersModal.tsx create mode 100644 src/components/ManageUsersModal.tsx diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 8d7fbe45..f4a1a9e7 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -70,7 +70,10 @@ "LEARNER_LIST":"Learners List", "FILTERS":"Filters", "MANAGE_USERS":"Manage Users", - "FACILITATORS":"Facilitators" + "FACILITATORS":"Facilitators", + "CENTERS_ASSIGNED":"Centers Assigned", + "MANAGE_CENTERS":"Manage Centers", + "ASSIGN":"Assign" }, "LOGIN_PAGE": { "USERNAME": "Username", @@ -135,6 +138,7 @@ "ALL_CENTERS": "All Centers", "NO_LEARNER_WITH_LOW_ATTENDANCE": "No Learner with low attendance", "ATTENDANCE_MARKED_OUT_OF_DAYS": "Attendance marked: {{count}} out of last 7 days" + }, "PROFILE": { "EDIT_PROFILE": "Edit Profile", diff --git a/public/locales/hi/common.json b/public/locales/hi/common.json index f1d71d3a..810cee5f 100644 --- a/public/locales/hi/common.json +++ b/public/locales/hi/common.json @@ -70,7 +70,10 @@ "LEARNER_LIST": "अभियांत्रिकी सूची", "FILTERS": "फिल्टर्स", "MANAGE_USERS": "उपयोगकर्ताओं का प्रबंधन", - "FACILITATORS": "सुविधाकर्ता" + "FACILITATORS": "सुविधाकर्ता", + "CENTERS_ASSIGNED": "केंद्र निरुपित", + "MANAGE_CENTERS": "केंद्र प्रबंधित करें", + "ASSIGN": "निरुपण करें" }, "LOGIN_PAGE": { "USERNAME": "उपयोगकर्ता नाम", @@ -198,17 +201,17 @@ "MONTH_MOBILISATION": "जोड़ने का महीना", "DROP_OUT_REASON": "स्कूल छोड़ने का कारण" }, - "DROPOUT_REASONS":{ + "DROPOUT_REASONS": { "UNABLE_TO_COPE_WITH_STUDIES": "पढ़ाई में असमर्थता", - "FAMILY_RESPONSIBILITIES": "पारिवारिक जिम्मेदारियाँ", - "NEED_TO_GO_TO_WORK_OWN_WORK": "काम पर जाने की आवश्यकता / खुद का काम", - "MARRIAGE": "शादी", - "ILLNESS": "बीमारी", - "MIGRATION": "प्रवास", - "PREGNANCY": "गर्भावस्था", - "DOCUMENT_ISSUE": "दस्तावेज़ मुद्दा", - "DISTANCE_ISSUE": "दूरी की समस्या", - "SCHOOL_ADMISSION": "स्कूल में प्रवेश" + "FAMILY_RESPONSIBILITIES": "पारिवारिक जिम्मेदारियाँ", + "NEED_TO_GO_TO_WORK_OWN_WORK": "काम पर जाने की आवश्यकता / खुद का काम", + "MARRIAGE": "शादी", + "ILLNESS": "बीमारी", + "MIGRATION": "प्रवास", + "PREGNANCY": "गर्भावस्था", + "DOCUMENT_ISSUE": "दस्तावेज़ मुद्दा", + "DISTANCE_ISSUE": "दूरी की समस्या", + "SCHOOL_ADMISSION": "स्कूल में प्रवेश" }, "GUIDE_TOUR": { "STEP_1": "स्वागत है! आइए आपको डैशबोर्ड से परिचित कराते हैं", diff --git a/public/locales/mr/common.json b/public/locales/mr/common.json index e21732b6..d9e361e0 100644 --- a/public/locales/mr/common.json +++ b/public/locales/mr/common.json @@ -70,7 +70,10 @@ "LEARNER_LIST": "शिक्षार्थ्यांची यादी", "FILTERS": "फिल्टर्स", "MANAGE_USERS": "वापरकर्ते व्यवस्थापित करा", - "FACILITATORS": "सुविधासंचालक" + "FACILITATORS": "सुविधासंचालक", + "CENTERS_ASSIGNED": "केंद्र निरुपित", + "MANAGE_CENTERS": "केंद्र प्रबंधित करा", + "ASSIGN": "नियुक्त करा" }, "LOGIN_PAGE": { "USERNAME": "वापरकर्तानाव", diff --git a/src/components/ConfirmationModal.tsx b/src/components/ConfirmationModal.tsx new file mode 100644 index 00000000..17cf676b --- /dev/null +++ b/src/components/ConfirmationModal.tsx @@ -0,0 +1,103 @@ +import * as React from 'react'; + +import Box from '@mui/material/Box'; +import Button from '@mui/material/Button'; +import { Divider } from '@mui/material'; +import Modal from '@mui/material/Modal'; +import { useTheme } from '@mui/material/styles'; + +interface ConfirmationModalProps { + message: string; + handleAction: () => void; + buttonNames: ButtonNames; + handleCloseModel: () => void; + modalOpen: boolean; +} + +interface ButtonNames { + primary: string; + secondary: string; +} + +const ConfirmationModal: React.FC = ({ + modalOpen, + message, + handleAction, + buttonNames, + handleCloseModel, +}) => { + const theme = useTheme(); + + const style = { + position: 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: '75%', + bgcolor: '#fff', + boxShadow: 24, + borderRadius: '16px', + '@media (min-width: 600px)': { + width: '350px', + }, + }; + + return ( + + + + {message} + + + + + + + + + ); +}; + +export default ConfirmationModal; diff --git a/src/components/Header.tsx b/src/components/Header.tsx index e588386f..178990f2 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -2,21 +2,22 @@ import { Box, Stack } from '@mui/material'; import Menu, { MenuProps } from '@mui/material/Menu'; +import React, { useEffect, useState } from 'react'; import { alpha, styled } from '@mui/material/styles'; import { usePathname, useRouter } from 'next/navigation'; -import React, { useEffect, useState } from 'react'; +import ConfirmationModal from './ConfirmationModal'; +import Image from 'next/image'; import LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined'; -import PersonOutlineOutlinedIcon from '@mui/icons-material/PersonOutlineOutlined'; import MenuItem from '@mui/material/MenuItem'; -import { useTheme } from '@mui/material/styles'; -import { useTranslation } from 'next-i18next'; +import PersonOutlineOutlinedIcon from '@mui/icons-material/PersonOutlineOutlined'; +import accountIcon from './../assets/images/account.svg'; import dynamic from 'next/dynamic'; -import Image from 'next/image'; +import { logEvent } from '@/utils/googleAnalytics'; import logoLight from '../../public/images/logo-light.png'; import menuIcon from '../assets/images/menuIcon.svg'; -import accountIcon from './../assets/images/account.svg'; -import { logEvent } from '@/utils/googleAnalytics'; +import { useTheme } from '@mui/material/styles'; +import { useTranslation } from 'next-i18next'; const Header: React.FC = () => { const router = useRouter(); @@ -89,6 +90,7 @@ const Header: React.FC = () => { const [anchorEl, setAnchorEl] = React.useState(null); const open = Boolean(anchorEl); + const [modalOpen, setModalOpen] = React.useState(false); const handleClick = (event: React.MouseEvent) => { setAnchorEl(event.currentTarget); }; @@ -121,6 +123,23 @@ const Header: React.FC = () => { } } + const getMessage = () => { + if (modalOpen) return t('COMMON.SURE_LOGOUT'); + return ''; + }; + + const handleAction = () => { + handleLogoutClick(); + }; + + const handleCloseModel = () => { + setModalOpen(false); + }; + + const logoutOpen = () => { + setModalOpen(true); + }; + return ( { )} @@ -226,6 +245,17 @@ const Header: React.FC = () => { + + (); + const { t } = useTranslation(); + const [open, setOpen] = React.useState(false); + const handleOpen = () => setOpen(true); + const handleClose = () => setOpen(false); + + const style = { + position: 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: '85%', + bgcolor: theme.palette.warning['A400'], + boxShadow: 24, + borderRadius: '16px', + height: '526px', + '@media (min-width: 600px)': { + width: '450px', + }, + }; + + return ( +
+ + + + + + + {t('COMMON.MANAGE_CENTERS')} + + + handleClose()} + /> + + + + + + + ), + }} + /> + + + + + + Khapari Dharmu + + + + + + + + + Kolara + + + + + + + + + Madnapur + + + + + + + + + Piparda + + + + + + + + Vihirgaon + + + + + + + + + + + + + +
+ ); +} diff --git a/src/components/ManageUsersModal.tsx b/src/components/ManageUsersModal.tsx new file mode 100644 index 00000000..61ae768b --- /dev/null +++ b/src/components/ManageUsersModal.tsx @@ -0,0 +1,151 @@ +import * as React from 'react'; + +import Box from '@mui/material/Box'; +import Button from '@mui/material/Button'; +import CloseIcon from '@mui/icons-material/Close'; +import { Divider } from '@mui/material'; +import Modal from '@mui/material/Modal'; +import Typography from '@mui/material/Typography'; +import { useTheme } from '@mui/material/styles'; +import { useTranslation } from 'next-i18next'; + +export default function ManageUsersModal() { + const theme = useTheme(); + const { t } = useTranslation(); + const [open, setOpen] = React.useState(false); + const handleOpen = () => setOpen(true); + const handleClose = () => setOpen(false); + + const style = { + position: 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: '85%', + bgcolor: theme.palette.warning['A400'], + boxShadow: 24, + borderRadius: '16px', + '@media (min-width: 600px)': { + width: '450px', + }, + }; + + return ( +
+ + + + + + Aditi Patel + + + handleClose()} + /> + + + + + {t('COMMON.CENTERS_ASSIGNED')} + + + + + + + + + + + + +
+ ); +} diff --git a/src/components/MarkBulkAttendance.tsx b/src/components/MarkBulkAttendance.tsx index 31ac61f7..c00c2921 100644 --- a/src/components/MarkBulkAttendance.tsx +++ b/src/components/MarkBulkAttendance.tsx @@ -1,6 +1,5 @@ import { Box, Button, Fade, Modal, Typography } from '@mui/material'; import React, { useEffect } from 'react'; -import ToastMessage from '@/components/ToastMessage'; import { attendanceStatusList, bulkAttendance, @@ -15,11 +14,12 @@ import { AttendanceStatusListProps } from '../utils/Interfaces'; import AttendanceStatusListView from './AttendanceStatusListView'; import Backdrop from '@mui/material/Backdrop'; import CloseIcon from '@mui/icons-material/Close'; +import ConfirmationModal from './ConfirmationModal'; import Loader from './Loader'; import { getMyCohortMemberList } from '@/services/MyClassDetailsService'; +import { showToastMessage } from './Toastify'; import { useTheme } from '@mui/material/styles'; import { useTranslation } from 'next-i18next'; -import { showToastMessage } from './Toastify'; interface MarkBulkAttendanceProps { open: boolean; @@ -38,6 +38,18 @@ const MarkBulkAttendance: React.FC = ({ }) => { const { t } = useTranslation(); const theme = useTheme(); + + const [updateAttendance, setUpdateAttendance] = React.useState(false); + const [confirmation, setConfirmation] = React.useState(false); + const [modalOpen, setModalOpen] = React.useState(false); + const attendanceUpdate = () => { + setUpdateAttendance(true); + setModalOpen(true); + }; + const confirmationOpen = () => { + setConfirmation(true); + setModalOpen(true); + }; const [loading, setLoading] = React.useState(false); const [showUpdateButton, setShowUpdateButton] = React.useState(false); const [cohortMemberList, setCohortMemberList] = React.useState>([]); @@ -299,13 +311,34 @@ const MarkBulkAttendance: React.FC = ({ // setState({ ...state, openModal: false }); // }; + const getMessage = () => { + if (updateAttendance) return t('COMMON.SURE_UPDATE'); + if (confirmation) return t('COMMON.SURE_CLOSE'); + return ''; + }; + + const handleAction = () => { + if (updateAttendance) { + handleSave(); + } else if (confirmation) { + onClose(); + } + onClose(); + }; + + const handleCloseModel = () => { + setUpdateAttendance(false); + setConfirmation(false); + setModalOpen(false); + }; + return ( = ({ > {getDayMonthYearFormat(shortDateFormat(selectedDate))} + - onClose()}> + @@ -481,7 +525,7 @@ const MarkBulkAttendance: React.FC = ({ alignItems: 'center', }} disabled={isAllAttendanceMarked ? false : true} - onClick={handleSave} + onClick={attendanceUpdate} > {presentCount == 0 && absentCount == 0 ? t('COMMON.MARK') diff --git a/src/pages/teaching-centers.tsx b/src/pages/teaching-centers.tsx index 25279d54..38aac255 100644 --- a/src/pages/teaching-centers.tsx +++ b/src/pages/teaching-centers.tsx @@ -54,7 +54,7 @@ const TeachingCenters = () => { > { - router.push(`/teachingCenterDetails`); // Check route + router.push(`/teaching-center-details`); }} sx={{ cursor: 'pointer' }} > diff --git a/src/styles/globals.css b/src/styles/globals.css index c613e708..f1097ca3 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -764,6 +764,9 @@ main { .selected-start-end { background-color: var(--mui-palette-primary-main) !important; } +.text-4D { + color: #4d4639 !important; +} .input_search div:first-child { height: 44px; @@ -789,3 +792,6 @@ main { .mt--4 { margin-top: -4rem !important; } +.checkBox_svg svg { + fill: #4d4639; +} From f7007b42a3da8c3bd777b0074f5b9ba766b44fa1 Mon Sep 17 00:00:00 2001 From: TTPL-RT-52 Date: Wed, 19 Jun 2024 02:15:56 +0530 Subject: [PATCH 06/10] Issue #PS-798 fix: Implementation of UI component as per figma to assign facilitator to village/centre at district level --- src/components/ManageUsersModal.tsx | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/src/components/ManageUsersModal.tsx b/src/components/ManageUsersModal.tsx index 61ae768b..37e604b6 100644 --- a/src/components/ManageUsersModal.tsx +++ b/src/components/ManageUsersModal.tsx @@ -105,7 +105,7 @@ export default function ManageUsersModal() { }} className="text-4D" > - Bhiwapur + Jabarbodi + From d4717f61f5247693d6b7b2013204a8d4b26e0a64 Mon Sep 17 00:00:00 2001 From: TTPL-RT-52 Date: Wed, 19 Jun 2024 02:36:14 +0530 Subject: [PATCH 07/10] Issue #PS-798 fix: Implementation of UI component as per figma to assign facilitator to village/centre at district level --- src/styles/customTheme.tsx | 2 ++ src/styles/globals.css | 22 +++++++++++----------- 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/src/styles/customTheme.tsx b/src/styles/customTheme.tsx index 2c8b79fe..6e193ed1 100644 --- a/src/styles/customTheme.tsx +++ b/src/styles/customTheme.tsx @@ -11,10 +11,12 @@ const customTheme = extendTheme({ secondary: { main: '#0D599E', light: '#E7F3F8', + contrastText: ' #cdc5bd', }, success: { main: '#1A8825', light: '#C0FFC7', + contrastText: ' #fff8f2', }, info: { main: '#064471', diff --git a/src/styles/globals.css b/src/styles/globals.css index a82d1f7b..f4f63f00 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -49,7 +49,7 @@ body { } .text-4D { - color: #4d4639; + color: var(--mui-palette-warning-A200); } .text-1F { @@ -696,7 +696,7 @@ main { } .text-4d { - color: #4d4639; + color: var(--mui-palette-warning-A200); } .userName label { @@ -727,7 +727,7 @@ main { } .text4D { - color: #4d4639 !important; + color: var(--mui-palette-warning-A200) !important; } .p-10 { @@ -754,7 +754,7 @@ main { .bg-grey { width: 32px; height: 4px; - background: #dadada !important; + background: var(--mui-palette-warning-900) !important; } .modal-bottom div:nth-child(1) { @@ -762,19 +762,19 @@ main { } .textCD { - color: #cdc5bd !important; + color: var(--mui-palette-secondary-contrastText) !important; } .selected-start-end { background-color: var(--mui-palette-primary-main) !important; } .text-4D { - color: #4d4639 !important; + color: var(--mui-palette-warning-A200) !important; } .input_search div:first-child { height: 44px; - background: #ededed; + background: var(--mui-palette-warning-A700); padding-left: 16px; border-radius: 100px; border: unset !important; @@ -784,18 +784,18 @@ main { } .input_search input { - color: #4d4639; + color: var(--mui-palette-warning-A200); font-size: 14px; } .color-FF { - background: #fff8f2; + background: var(--mui-palette-success-contrastText); } .text-4D { - color: #4d4639 !important; + color: var(--mui-palette-warning-A200) !important; } .mt--4 { margin-top: -4rem !important; } .checkBox_svg svg { - fill: #4d4639; + fill: var(--mui-palette-warning-A200); } From 8652cae2a8a5231e032a9771b53b4ee481e0dcc3 Mon Sep 17 00:00:00 2001 From: TTPL-RT-52 Date: Wed, 19 Jun 2024 12:22:53 +0530 Subject: [PATCH 08/10] Issue #PS-798 fix: Implementation of UI component as per figma to assign facilitator to village/centre at district level --- public/locales/en/common.json | 3 ++- public/locales/hi/common.json | 3 ++- public/locales/mr/common.json | 3 ++- src/components/DateRangePopup.tsx | 12 ++++++------ src/components/LearnersList.tsx | 12 ++++++++---- src/pages/manageUser.tsx | 14 ++++++-------- src/styles/customTheme.tsx | 1 + src/styles/globals.css | 23 +---------------------- 8 files changed, 28 insertions(+), 43 deletions(-) diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 8af72d4d..a676842f 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -73,7 +73,8 @@ "FACILITATORS":"Facilitators", "CENTERS_ASSIGNED":"Centers Assigned", "MANAGE_CENTERS":"Manage Centers", - "ASSIGN":"Assign" + "ASSIGN":"Assign", + "SEARCH_FACILITATORS":"Search Facilitators.." }, "LOGIN_PAGE": { "USERNAME": "Username", diff --git a/public/locales/hi/common.json b/public/locales/hi/common.json index 810cee5f..6e5ba72e 100644 --- a/public/locales/hi/common.json +++ b/public/locales/hi/common.json @@ -73,7 +73,8 @@ "FACILITATORS": "सुविधाकर्ता", "CENTERS_ASSIGNED": "केंद्र निरुपित", "MANAGE_CENTERS": "केंद्र प्रबंधित करें", - "ASSIGN": "निरुपण करें" + "ASSIGN": "निरुपण करें", + "SEARCH_FACILITATORS":"खोज सुविधा प्रदाता.." }, "LOGIN_PAGE": { "USERNAME": "उपयोगकर्ता नाम", diff --git a/public/locales/mr/common.json b/public/locales/mr/common.json index d9e361e0..bcd3c419 100644 --- a/public/locales/mr/common.json +++ b/public/locales/mr/common.json @@ -73,7 +73,8 @@ "FACILITATORS": "सुविधासंचालक", "CENTERS_ASSIGNED": "केंद्र निरुपित", "MANAGE_CENTERS": "केंद्र प्रबंधित करा", - "ASSIGN": "नियुक्त करा" + "ASSIGN": "नियुक्त करा", + "SEARCH_FACILITATORS":"शोध सुविधा.." }, "LOGIN_PAGE": { "USERNAME": "वापरकर्तानाव", diff --git a/src/components/DateRangePopup.tsx b/src/components/DateRangePopup.tsx index cf992192..975e8c42 100644 --- a/src/components/DateRangePopup.tsx +++ b/src/components/DateRangePopup.tsx @@ -12,18 +12,18 @@ import { useStepContext, } from '@mui/material'; import React, { useState } from 'react'; -import ReactGA from 'react-ga4'; import { getDayAndMonthName, getTodayDate } from '@/utils/Helper'; -import checkMark from '../assets/images/checkMark.svg'; import CloseIcon from '@mui/icons-material/Close'; import { Height } from '@mui/icons-material'; +import Image from 'next/image'; import ListItemIcon from '@mui/material/ListItemIcon'; import MonthCalender from './MonthCalender'; +import ReactGA from 'react-ga4'; import WestIcon from '@mui/icons-material/West'; +import checkMark from '../assets/images/checkMark.svg'; import { useTheme } from '@mui/material/styles'; import { useTranslation } from 'next-i18next'; -import Image from 'next/image'; const modalStyle = { position: 'absolute', @@ -254,12 +254,12 @@ const DateRangePopup: React.FC = ({ - + {t('COMMON.DATE_RANGE')} - + @@ -288,7 +288,7 @@ const DateRangePopup: React.FC = ({ left: '8px', minWidth: 'auto', }} - className="text4D" + className="text-4D" > { 19 y/o { 19 y/o { aria-label="secondary tabs example" sx={{ fontSize: '14px', - borderBottom: '1px solid #EBE1D4', + borderBottom: (theme) => `1px solid ${theme.palette.primary.main}`, '& .MuiTab-root': { - color: '#4D4639', + color: theme.palette.warning['A200'], padding: '0 20px', }, '& .Mui-selected': { - color: '#4D4639', + color: theme.palette.warning['A200'], }, '& .MuiTabs-indicator': { display: 'flex', @@ -81,7 +81,7 @@ const manageUser = () => { { diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx index ba5408c3..ed1c82ac 100644 --- a/src/pages/profile.tsx +++ b/src/pages/profile.tsx @@ -20,7 +20,6 @@ import { } from '@mui/material'; import { CustomField, UserDatas, updateCustomField } from '@/utils/Interfaces'; import React, { ChangeEvent, useEffect, useRef, useState } from 'react'; -import ReactGA from 'react-ga4'; import { editEditUser, getUserDetails } from '@/services/ProfileService'; import { useTheme, withStyles } from '@mui/material/styles'; @@ -33,14 +32,15 @@ import Image from 'next/image'; import Loader from '@/components/Loader'; import Modal from '@mui/material/Modal'; import PlaceOutlinedIcon from '@mui/icons-material/PlaceOutlined'; +import ReactGA from 'react-ga4'; import { getLabelForValue } from '@/utils/Helper'; +import { logEvent } from '@/utils/googleAnalytics'; import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; +import { showToastMessage } from '@/components/Toastify'; import { useRouter } from 'next/router'; import { useTranslation } from 'next-i18next'; import userPicture from '@/assets/images/imageOne.jpg'; import user_placeholder from '../assets/images/user_placeholder.png'; -import { logEvent } from '@/utils/googleAnalytics'; -import { showToastMessage } from '@/components/Toastify'; interface FieldOption { name: string; @@ -542,13 +542,13 @@ const TeacherProfile = () => { {userData?.name} @@ -575,7 +575,7 @@ const TeacherProfile = () => { fontSize={'12px'} fontWeight={'500'} lineHeight={'16px'} - className="text-4d" + className="text-dark-grey" > {address} diff --git a/src/styles/globals.css b/src/styles/globals.css index cbf621fa..0c1ca02f 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -48,7 +48,7 @@ body { font-size: 22px !important; } -.text-4D { +.text-dark-grey { color: var(--mui-palette-warning-A200); } From aef04d45bd1cd8d36c491c678a7b75819ce4ebfb Mon Sep 17 00:00:00 2001 From: TTPL-RT-52 Date: Wed, 19 Jun 2024 13:14:18 +0530 Subject: [PATCH 10/10] Issue #PS-798 fix: Implementation of UI component as per figma to assign facilitator to village/centre at district level --- src/components/ManageCentersModal.tsx | 159 +++++++------------------- src/components/ManageUsersModal.tsx | 106 +++++------------ src/pages/manageUser.tsx | 24 ++++ 3 files changed, 95 insertions(+), 194 deletions(-) diff --git a/src/components/ManageCentersModal.tsx b/src/components/ManageCentersModal.tsx index 21d5a434..67c6e5ea 100644 --- a/src/components/ManageCentersModal.tsx +++ b/src/components/ManageCentersModal.tsx @@ -12,7 +12,13 @@ import Typography from '@mui/material/Typography'; import { useTheme } from '@mui/material/styles'; import { useTranslation } from 'next-i18next'; -export default function ManageCentersModal() { +interface ManageUsersModalProps { + centersName: string[]; +} + +const ManageCentersModal: React.FC = ({ + centersName, +}) => { const theme = useTheme(); const { t } = useTranslation(); const [open, setOpen] = React.useState(false); @@ -92,123 +98,36 @@ export default function ManageCentersModal() { - - - Khapari Dharmu - - - - - - - - - Kolara - - - - - - - - - Madnapur - - - - - - - - - Piparda - - - - - - - - Vihirgaon - - - - - + {centersName?.map((name, index) => { + return ( + + + + {name} + + + + + + + ); + })} @@ -225,4 +144,6 @@ export default function ManageCentersModal() { ); -} +}; + +export default ManageCentersModal; diff --git a/src/components/ManageUsersModal.tsx b/src/components/ManageUsersModal.tsx index a478f3b6..97d2277a 100644 --- a/src/components/ManageUsersModal.tsx +++ b/src/components/ManageUsersModal.tsx @@ -9,7 +9,15 @@ import Typography from '@mui/material/Typography'; import { useTheme } from '@mui/material/styles'; import { useTranslation } from 'next-i18next'; -export default function ManageUsersModal() { +interface ManageUsersModalProps { + leanerName: string; + centerName: string[]; +} + +const ManageUsersModal: React.FC = ({ + leanerName, + centerName, +}) => { const theme = useTheme(); const { t } = useTranslation(); const [open, setOpen] = React.useState(false); @@ -53,7 +61,7 @@ export default function ManageUsersModal() { }} component="h2" > - Aditi Patel + {leanerName} - - - - - - + {centerName?.map((name, index) => { + return ( + + + + ); + })} ); -} +}; + +export default ManageUsersModal; diff --git a/src/pages/manageUser.tsx b/src/pages/manageUser.tsx index 206273cc..fe629fd9 100644 --- a/src/pages/manageUser.tsx +++ b/src/pages/manageUser.tsx @@ -3,6 +3,8 @@ import { FormControl, Grid, MenuItem, Select, TextField } from '@mui/material'; import Box from '@mui/material/Box'; import Header from '@/components/Header'; import InputAdornment from '@mui/material/InputAdornment'; +import ManageCentersModal from '@/components/ManageCentersModal'; +import ManageUsersModal from '@/components/ManageUsersModal'; import MoreVertIcon from '@mui/icons-material/MoreVert'; import React from 'react'; import SearchIcon from '@mui/icons-material/Search'; @@ -180,6 +182,28 @@ const manageUser = () => { /> + + use this after you integrate in bottom modal + )}