Merge pull request #663 from shreyas1434shinde/YouthNet

Issue task PS-3327 :Youth UI figma match

src/components/SimpleModal.tsx

@@ -22,6 +22,7 @@ interface SimpleModalProps {
   open: boolean;
   onClose: () => void;
   modalTitle: string;
+  handleNext? : any
 }
 const SimpleModal: React.FC<SimpleModalProps> = ({
   open,
@@ -33,6 +34,7 @@ const SimpleModal: React.FC<SimpleModalProps> = ({
   secondaryActionHandler,
   children,
   modalTitle,
+  handleNext
 }) => {
   const theme = useTheme<any>();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
@@ -118,7 +120,7 @@ const SimpleModal: React.FC<SimpleModalProps> = ({
                 variant="contained"
                 color="primary"
                 sx={buttonStyle}
-                onClick={primaryActionHandler}
+                onClick={primaryActionHandler || handleNext}
                 className='one-line-text'
               >
                 {primaryText}

src/components/youthNet/GenericForm.tsx

@@ -27,7 +27,6 @@ const GenericForm: React.FC<GenericFormProps> = ({ fields }) => {
                 display: "flex",
                 flexDirection: "column",
                 gap: 2,
-                padding: 2,
                 borderRadius: "8px",
             }}
         >

src/pages/youthboard/campDetails/[surveyCamp].tsx

@@ -124,7 +124,7 @@ const SurveyClassDetails = () => {
           </Box>
         </Box>
       )}
-      {value === 2 && <Box>Tab 2</Box>}
+      {value === 2 && <Box>coming soon</Box>}
     </Box>
   );
 };

src/pages/youthboard/surveys/index.tsx

@@ -32,20 +32,7 @@ const Survey = () => {
     router.push('/youthboard/volunteerList');
   };
 
-  const formFields = [
-    { type: "text", label: "Full Name" },
-    { type: "number", label: "Contact Number" },
-    {
-      type: "radio",
-      label: "Gender",
-      options: [
-        { value: "female", label: "Female" },
-        { value: "male", label: "Male" },
-      ],
-    },
-    { type: "number", label: "Age" },
-    { type: "email", label: "Mentor's Email ID" },
-  ];
+
 
   return (
     <>

src/pages/youthboard/village-camp-survyey/[villageSurveyName].tsx

@@ -125,7 +125,7 @@ const villageSurveyName = () => {
                   </Box>
               </Box>
           )}
-          {value === 2 && <Box>Tab 2</Box>}
+          {value === 2 && <Box>coming soon</Box>}
       </Box>
   )
 }

src/pages/youthboard/villages/index.tsx

@@ -46,6 +46,8 @@ import AddIcon from '@mui/icons-material/Add';
 import SimpleModal from '@/components/SimpleModal';
 import Surveys from '@/components/youthNet/Surveys';
 import { useDirection } from '@/hooks/useDirection';
+import GenericForm from '@/components/youthNet/GenericForm';
+import ExamplePage from '@/components/youthNet/BlockItem';
 
 const Index = () => {
   const { isRTL } = useDirection();
@@ -62,11 +64,15 @@ const Index = () => {
 
   const [openReassignDistrict, setOpenReassignDistrict] = useState(false);
   const [openReassignVillage, setOpenReassignVillage] = useState(false);
+  const [addNew, setAddNew] = useState(false);
+  const [count, setCount] = useState(0);
+
   const [openDelete, setOpenDelete] = useState(false);
   const [selectedValue, setSelectedValue] = useState('');
   const [districtData, setDistrictData] = useState<any>(null);
   const [blockData, setBlockData] = useState<any>(null);
 
+
   useEffect(() => {
     const getData = async () => {
       const districtData = await fetchDistrictData();
@@ -107,6 +113,7 @@ const Index = () => {
     setOpenDelete(false);
     setOpenReassignDistrict(false);
     setOpenReassignVillage(false);
+    setAddNew(false)
   };
 
   const handleButtonClick = (actionType: string) => {
@@ -176,6 +183,29 @@ const Index = () => {
     setSelectedValue(value);
   };
 
+  const formFields = [
+    { type: "text", label: "Full Name" },
+    { type: "number", label: "Contact Number" },
+    {
+      type: "radio",
+      label: "Gender",
+      options: [
+        { value: "female", label: "Female" },
+        { value: "male", label: "Male" },
+      ],
+    },
+    { type: "number", label: "Age" },
+    { type: "email", label: "Mentor's Email ID" },
+  ];
+
+  const handleOpenNew = () => {
+    setAddNew(true)
+  }
+
+  const handleNext= () => {
+    setCount(count + 1)
+  }
+
   return (
     <Box minHeight="100vh">
       <Box>
@@ -286,6 +316,7 @@ const Index = () => {
                 className="text-1E"
                 // onClick={handleOpenAddFaciModal}
                 endIcon={<AddIcon />}
+                onClick={handleOpenNew}
               >
                 {t('COMMON.ADD_NEW')}
               </Button>
@@ -477,6 +508,44 @@ const Index = () => {
                 </Box>
               </Box>
             </SimpleModal>
+
+
+                <SimpleModal
+              open={addNew}
+              onClose={onClose}
+              showFooter={true}
+              modalTitle={ 
+                'New Mentor'
+              }
+              handleNext={handleNext}
+              primaryText={count === 0 ? 'Next' : 'Finish & Assign'}
+              // secondaryText={t('YOUTHNET_USERS_AND_VILLAGES.FINISH_ASSIGN')}
+
+            //pass function handler as props
+            >
+              {
+                count === 0 && (
+              <Box>
+                <Box mt={2}>
+                  <GenericForm fields={formFields}/>
+                </Box>
+              </Box>
+                )
+              }
+              {
+                count === 1 && (
+                  <Box>
+                    <Box mt={2}>
+                      <ExamplePage/> 
+                    </Box>
+                  </Box>
+                )
+              }
+            </SimpleModal>
+
+
+
+
           </>
         )}
       </Box>

src/services/youthNet/Dashboard/UserServices.ts

@@ -3,7 +3,7 @@ const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || '';
 
 const MENTOR_DETAILS = {
   MENTOR_NAME: 'Mentor',
-  MENTOR_OPTIONS: ['Shivan Mathur', 'Mentor 2', 'Mentor 3', 'Mentor 4'],
+  MENTOR_OPTIONS: ['Shivan Mathur', 'Vivek kasture', 'Rohan Nene', 'Sanket Jadhav'],
 };
 
 export const fetchUserData = async (): Promise<any> => {