Merge pull request #660 from Aar-if/seven

UI implementation for User and Villages for YouthNet Mentor Leaders
tekdi · Jan 31, 2025 · 1a7ee08 · 1a7ee08
2 parents 475f14b + 9961b0d
commit 1a7ee08
Show file tree

Hide file tree

Showing 10 changed files with 819 additions and 185 deletions.
diff --git a/app.config.ts b/app.config.ts
@@ -134,3 +134,11 @@ if (!jotFormId) {
     'NEXT_PUBLIC_JOTFORM_ID is not set in the environment variables.'
   );
 }
+
+export const BOTTOM_DRAWER_CONSTANTS = {
+  MARK_VOLUNTEER: 'Marked as Volunteer',
+  ADD_REASSIGN: 'Add or Reassign',
+  REQUEST_REASSIGN: 'Request to Reassign',
+  DELETE: 'Delete User',
+  UNKNOWN_ACTION: 'Unknown Action',
+};
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -144,6 +144,7 @@
     "SORT_BY_NAMES": "Sort by Names",
     "INCORRECT_DATA_ENTRY": "Incorrect Data Entry",
     "DUPLICATED_USER": "Duplicated User",
+    "RESIGNATION": "Resignation",
     "FACILITATOR_COUNT": "Facilitators Total count: {{count}}",
     "LEARNER_COUNT": "Learners Total count: {{count}}",
     "FILTER_BY_ATTENDANCE_PERCENTAGE": "Filters By Attendance Percentage",
@@ -233,6 +234,7 @@
     "BLOCK": "Block",
     "ATTENDANCE": "Attendance (%)",
     "VILLAGES_AND_YOUTH": "Villages and Youth",
+    "USERS_&_VILLAGES": "Users & Villages",
     "VILLAGES": "Villages",
     "YOUTH_VOLUNTEERS": "Youth/Volunteers",
     "SEARCH_VILLAGES": "Search Villages"
@@ -746,6 +748,26 @@
     "VOLUNTEERING_DETAILS": "Volunteering details",
     "MARK_AS_VOLUNTEER": "Mark as Volunteer"
   },
+
+  "YOUTHNET_USERS_AND_VILLAGES": {
+    "MENTORS": "Mentors",
+    "CSV": "CSV",
+    "SEARCH_MENTORS": "Search Mentors...",
+    "MARK_AS_VOLUNTEER": "Mark as Volunteer",
+    "ADD_OR_REASSIGN_VILLAGES": "Add or Re-assign Villages",
+    "REQUEST_TO_REASSIGN_DISTRICT": "Request to Re-assign District",
+    "DELETE_USER_PERMANENTLY": "Delete User Permanently",
+    "REQUEST_USER_TO_DIFFERENT_MENTOR": "Re-assign user to a different Mentor Leader",
+    "SAVE_PROGRESS": "Save progress",
+    "FINISH_ASSIGN": "Finish & Assign",
+    "SEND_REQUEST_TO_ADMIN_TEXT": "You are sending a request to the State Admin to re-assign this user to another district",
+    "SELECT_STATE": "Select State",
+    "SELECT_DISTRICT": "Select District",
+    "SELECT": "Select",
+    "ASSIGN_VILLAGES_FROM_BLOCK": "Assign Villages from Block",
+    "ASSIGN_VILLAGES_FROM_BLOCK_INFO": "You can complete this later at your own pace. However, the villages will only be assigned once you click on ‘Finish.’"
+  },
+
   "YOUTHNET_CAMP_DETAILS": {
     "SUBMISSION": "Submission",
     "SUMMARY": "Summary"

diff --git a/src/components/MenuDrawer.tsx b/src/components/MenuDrawer.tsx
@@ -34,6 +34,7 @@ import assessment from '../assets/images/assessment.svg';
 import surveyForm from '../assets/images/surveyForm.svg';
 import { useDirection } from '../hooks/useDirection';
 import GroupsIcon from '@mui/icons-material/Groups';
+import { YOUTHNET_USER_ROLE } from './youthNet/tempConfigs';
 interface DrawerProps {
   toggleDrawer?: (open: boolean) => () => void;
   open: boolean;
@@ -419,7 +420,9 @@ const MenuDrawer: React.FC<DrawerProps> = ({
                 router.push(`/youthboard/villages`);
               }}
             >
-              {t('DASHBOARD.VILLAGES_AND_YOUTH')}
+              {YOUTHNET_USER_ROLE.MENTOR_LEAD === TENANT_DATA.LEADER
+                ? t('DASHBOARD.USERS_&_VILLAGES')
+                : t('DASHBOARD.VILLAGES_AND_YOUTH')}
             </Button>
 
             <Button
@@ -436,9 +439,7 @@ const MenuDrawer: React.FC<DrawerProps> = ({
                   ? '16px 18px !important'
                   : '0px 18px !important',
                 marginTop: '25px',
-                color: isSurveys
-                  ? '#2E1500'
-                  : theme.palette.warning.A200,
+                color: isSurveys ? '#2E1500' : theme.palette.warning.A200,
                 fontWeight: isSurveys ? '600' : 500,
                 '&:hover': {
                   background: isSurveys
@@ -529,12 +530,12 @@ const MenuDrawer: React.FC<DrawerProps> = ({
               }}
               startIcon={
                 <Image
-                src={surveyForm}
-                alt="SurveyForm-Icon"
-                width={24}
-                height={24}
-              />
-            }
+                  src={surveyForm}
+                  alt="SurveyForm-Icon"
+                  width={24}
+                  height={24}
+                />
+              }
               onClick={navigateToObservation}
             >
               {t('OBSERVATION.SURVEY_FORMS')}
@@ -611,11 +612,11 @@ const MenuDrawer: React.FC<DrawerProps> = ({
                 }}
                 startIcon={
                   <Image
-                  src={assessment}
-                  alt="Assessment Icon"
-                  width={24}
-                  height={24}
-                />
+                    src={assessment}
+                    alt="Assessment Icon"
+                    width={24}
+                    height={24}
+                  />
                 }
                 onClick={() => {
                   router.push(`/assessments`);

diff --git a/src/components/SimpleModal.tsx b/src/components/SimpleModal.tsx
@@ -68,11 +68,7 @@ const SimpleModal: React.FC<SimpleModalProps> = ({
   return (
     <Modal
       open={open}
-      onClose={(event, reason) => {
-        if (reason !== 'backdropClick') {
-          onClose();
-        }
-      }}
+      onClose={onClose}
       aria-labelledby="child-modal-title"
       aria-describedby="child-modal-description"
     >

diff --git a/src/components/youthNet/BottomDrawer.tsx b/src/components/youthNet/BottomDrawer.tsx
@@ -1,22 +1,25 @@
 import React from 'react';
 import { Drawer, Box, Typography, Button, Divider } from '@mui/material';
-import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
 import { useTheme } from '@mui/material/styles';
 
+interface ButtonData {
+  label: string;
+  icon: React.ReactNode;
+  onClick: () => void;
+}
+
 interface BottomDrawerProps {
   open: boolean;
   onClose?: () => void;
   title: string;
-  buttonLabel: string;
-  onAction: () => void;
+  buttons: ButtonData[];
 }
 
 const BottomDrawer: React.FC<BottomDrawerProps> = ({
   open,
   onClose,
   title,
-  buttonLabel,
-  onAction,
+  buttons,
 }) => {
   const theme = useTheme<any>();
   return (
@@ -62,32 +65,36 @@ const BottomDrawer: React.FC<BottomDrawerProps> = ({
       >
         {title}
       </Typography>
-      <Button
-        variant="outlined"
-        startIcon={
-          <SwapHorizIcon
-            sx={{ fontSize: '20px', color: theme?.palette?.warning['400'] }}
-          />
-        }
-        sx={{
-          width: '200px',
-          border: 'none',
-          borderRadius: '8px',
-          padding: '8px 16px',
-          textTransform: 'none',
-          fontSize: '16px',
-          fontWeight: 300,
-          marginBottom: '12px',
-          '&:hover': {
-            backgroundColor: 'transparent',
-            border: 'none',
-          },
-        }}
-        onClick={onAction}
-      >
-        {buttonLabel}
-      </Button>
-      <Divider />
+
+      {buttons?.map((button, index) => (
+        <>
+          <Button
+            key={index}
+            variant="outlined"
+            startIcon={button?.icon}
+            sx={{
+              width: '100%',
+              border: 'none',
+              borderRadius: '8px',
+              padding: '8px 16px',
+              textTransform: 'none',
+              fontSize: '16px',
+              fontWeight: 300,
+              justifyContent: 'flex-start',
+              textAlign: 'left',
+              marginBottom: '12px',
+              '&:hover': {
+                backgroundColor: 'transparent',
+                border: 'none',
+              },
+            }}
+            onClick={button.onClick}
+          >
+            {button?.label}
+          </Button>
+          <Divider />
+        </>
+      ))}
     </Drawer>
   );
 };

diff --git a/src/components/youthNet/DropDown.tsx b/src/components/youthNet/DropDown.tsx
@@ -3,8 +3,8 @@ import { useState } from 'react';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 
 interface DropdownProps {
-  name: string;
-  values: string[];
+  name?: string;
+  values?: string[];
   onSelect: (value: string) => void;
   defaultValue?: string;
 }

diff --git a/src/components/youthNet/tempConfigs.ts b/src/components/youthNet/tempConfigs.ts
@@ -8,6 +8,7 @@ export const SURVEY_DATA = {
   CREATIVITY_MAHOTSAV: 'Creativity Mahotsav',
   TWELVE: 'Assigned to 12 Villages',
   FIFTY_TWO: '52',
+  FOUR: '4',
 };
 
 export const volunteerData = [
@@ -174,6 +175,14 @@ export const surveyData = [
   { title: 'Sports Camp', date: '3 Feb, 2024' },
 ];
 
+export const reAssignVillages = [
+  { title: 'Ambegaon', date: '0 Villages Selected' },
+  { title: 'Baramati', date: '0 Villages Selected' },
+  { title: 'Daund', date: '0 Villages Selected' },
+  { title: 'Haveli', date: '0 Villages Selected' },
+  { title: 'Indapur', date: '0 Villages Selected' },
+];
+
 export const CAMP_DATA = {
   ASSIGNED: '  Assigned to Ankita Kulkarni, Ananya Sen',
   DATE1: 'Submitted on 10 Sep, 2024 @ 2:35 pm',
@@ -225,6 +234,44 @@ export const youthList = [
   },
 ];
 
+export const mentorList = [
+  {
+    name: 'Asha Shubalakshmi',
+    age: 14,
+    image: '',
+    joinOn: 'Join on 15 Jan, 2025',
+    isNew: true,
+    showMore: true,
+    showAvtar: true,
+  },
+  {
+    name: 'Bharat Sen',
+    age: 15,
+    image: '',
+    joinOn: 'Join on 15 Jan, 2025',
+    isNew: true,
+    showMore: true,
+    showAvtar: true,
+  },
+  {
+    name: 'Divyadarshan Panve',
+    age: 15,
+    image: '',
+    joinOn: 'Join on 15 Jan, 2025',
+    isNew: true,
+    showMore: true,
+    showAvtar: true,
+  },
+  {
+    name: 'Samarth Lalbagh',
+    age: 14,
+    joinOn: 'Join on 15 Jan, 2025',
+    image: '',
+    showMore: true,
+    showAvtar: true,
+  },
+];
+
 export const villageList = [
   {
     name: 'Deviyapur',

diff --git a/src/pages/youthboard/survey/[surveyName].tsx b/src/pages/youthboard/survey/[surveyName].tsx
@@ -11,10 +11,12 @@ import { GetStaticPaths } from 'next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { TENANT_DATA } from '../../../../app.config';
 import Surveys from '@/components/youthNet/Surveys';
+import { useTheme } from '@mui/material/styles';
 
 const survey = () => {
   const { t } = useTranslation();
   const router = useRouter();
+  const theme = useTheme<any>();
   const { surveyName } = router.query;
   const villageNameStringNew = Array.isArray(surveyName)
     ? surveyName[0]
@@ -43,7 +45,13 @@ const survey = () => {
           onBackClick={handleBack}
         />
       </Box>
-      <Box>
+      <Box
+        sx={{ background: theme.palette.action.selected }}
+        display="flex"
+        flexDirection="column"
+        gap={2}
+        p={2}
+      >
         {surveyData.map((survey, index) => (
           <Surveys
             key={index}