Merge pull request #655 from Aar-if/four

Issue #PS-3385 feat: UI for volunteering details card on profile pop up

public/locales/en/common.json

@@ -590,17 +590,17 @@
     "HAVE_YOU_RECEIVE_ANY_PRIOR_TRAINING": "Have You Received Any Prior Training?",
     "WHAT_DO_YOU_WANT_TO_BECOME": "What do you want to become?",
     "EDUCATIONAL_INSTITUTE": "Educational Institute",
-    "UNEMPLOYED_OR_DOMESTIC_WORK":"Unemployed or Domestic Work",
-    "SELF_PLACED":"Self Placed",
-    "TRANSGENDER":"Transgender",
-    "HINDI":"Hindi",
-    "MARATHI":"Marathi",
-    "URDU":"Urdu",
-    "DIVORCED/WIDOW":"Divorced/Widow",
-    "AVAILABLE_SUGGESTIONS":"Available suggestions:",
-    "USERNAME_ALREADY_EXIST":"This username already exists",
-    "GRADUATE":"Graduate",
-    "POST_GRADUATE":"Post Graduate"
+    "UNEMPLOYED_OR_DOMESTIC_WORK": "Unemployed or Domestic Work",
+    "SELF_PLACED": "Self Placed",
+    "TRANSGENDER": "Transgender",
+    "HINDI": "Hindi",
+    "MARATHI": "Marathi",
+    "URDU": "Urdu",
+    "DIVORCED/WIDOW": "Divorced/Widow",
+    "AVAILABLE_SUGGESTIONS": "Available suggestions:",
+    "USERNAME_ALREADY_EXIST": "This username already exists",
+    "GRADUATE": "Graduate",
+    "POST_GRADUATE": "Post Graduate"
   },
   "FORM_ERROR_MESSAGES": {
     "INVALID_INPUT": "Invalid Input.",
@@ -622,6 +622,7 @@
     "SPACE_AND_SPECIAL_CHARACTERS_NOT_ALLOWED": "Space and special characters are not allowed",
     "DATE_MUST_BE_ON_OR_BEFORE": "Date must be on or before {{date}}",
     "DATE_MUST_BE_ON_OR_AFTER": "Date must be on or after {{date}}"
+
   },
   "COURSE_PLANNER": {
     "COURSE_PLANNER": "Curriculum Plan",
@@ -740,16 +741,18 @@
     "PHONE_NUMBER": "Phone Number",
     "MENTOR_ID": "Mentor ID",
     "GENDER": "Gender",
-    "AGE": "Age"
+    "AGE": "Age",
+    "VOLUNTEERING_DETAILS": "Volunteering details",
+    "MARK_AS_VOLUNTEER": "Mark as Volunteer"
   },
   "YOUTHNET_CAMP_DETAILS": {
     "SUBMISSION": "Submission",
     "SUMMARY": "Summary"
   },
   "SURVEYS": {
-    "SURVEYS" :"Surveys",
-    "ACTIVE_SURVEYS" :"Active Surveys",
-    "PREVIOUS_SURVEYS" :"Previous Surveys",
-    "VILLAGES":"Villages"
+    "SURVEYS": "Surveys",
+    "ACTIVE_SURVEYS": "Active Surveys",
+    "PREVIOUS_SURVEYS": "Previous Surveys",
+    "VILLAGES": "Villages"
   }
 }

src/components/youthNet/BottomDrawer.tsx

@@ -0,0 +1,95 @@
+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 BottomDrawerProps {
+  open: boolean;
+  onClose?: () => void;
+  title: string;
+  buttonLabel: string;
+  onAction: () => void;
+}
+
+const BottomDrawer: React.FC<BottomDrawerProps> = ({
+  open,
+  onClose,
+  title,
+  buttonLabel,
+  onAction,
+}) => {
+  const theme = useTheme<any>();
+  return (
+    <Drawer
+      anchor="bottom"
+      open={open}
+      onClose={onClose}
+      PaperProps={{
+        sx: {
+          borderRadius: '28px 28px 0 0',
+          padding: '16px',
+          minHeight: '180px',
+          boxShadow: 'none',
+        },
+      }}
+    >
+      <Box
+        display="flex"
+        flexDirection="column"
+        alignItems="center"
+        onClick={onClose}
+        sx={{
+          cursor: 'pointer',
+        }}
+      >
+        <Box
+          sx={{
+            width: '40px',
+            height: '4px',
+            backgroundColor: theme?.palette?.warning['400'],
+            borderRadius: '2px',
+            marginBottom: '12px',
+          }}
+        />
+      </Box>
+      <Typography
+        sx={{
+          marginTop: '25px',
+          fontSize: '16px',
+          color: theme?.palette?.warning['400'],
+          marginBottom: '16px',
+        }}
+      >
+        {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 />
+    </Drawer>
+  );
+};
+
+export default BottomDrawer;

src/components/youthNet/UserCard.tsx

@@ -22,7 +22,8 @@ type UserCardProps = {
   showMore?: boolean;
   totalCount?: number;
   newRegistrations?: number;
-  onClick?: (name: string) => void; // Add onClick prop
+  onClick?: (name: string) => void;
+  onToggleClick?: (name: string) => void;
 };
 
 const UserCard: React.FC<UserCardProps> = ({
@@ -37,24 +38,22 @@ const UserCard: React.FC<UserCardProps> = ({
   totalCount,
   newRegistrations,
   onClick,
+  onToggleClick,
 }) => {
   const theme = useTheme<any>();
 
   return (
     <Box
       display={'flex'}
-      // borderBottom={`1px solid ${theme.palette.warning['A100']}`}
       width={'100%'}
       justifyContent={'space-between'}
       sx={{
-        cursor: 'pointer',
         ...(!totalCount && {
           '@media (min-width: 600px)': {
             background: theme.palette.warning.A400,
           },
         }),
       }}
-      onClick={() => onClick && onClick(name)}
     >
       <ListItem>
         {showAvtar && (
@@ -87,12 +86,14 @@ const UserCard: React.FC<UserCardProps> = ({
         >
           <Typography
             sx={{
+              cursor: 'pointer',
               fontSize: '16px',
               color: theme.palette.secondary.main,
               textDecoration: 'underline',
-              cursor: 'pointer',
+
               padding: '5px 5px',
             }}
+            onClick={() => onClick?.(name)}
           >
             {name}
           </Typography>
@@ -148,6 +149,7 @@ const UserCard: React.FC<UserCardProps> = ({
                   color: theme.palette.warning['300'],
                   cursor: 'pointer',
                 }}
+                onClick={() => onToggleClick?.(name)}
               />
             )}
           </Box>
@@ -159,14 +161,16 @@ const UserCard: React.FC<UserCardProps> = ({
 
 type UserListProps = {
   users: UserCardProps[];
-  layout?: 'list' | 'grid'; // Added layout prop
-  onUserClick?: (name: string) => void; // Add onUserClick prop
+  layout?: 'list' | 'grid';
+  onUserClick?: (name: string) => void;
+  onToggleUserClick?: (name: string) => void;
 };
 
 export const UserList: React.FC<UserListProps> = ({
   users,
   layout = 'grid',
-  onUserClick, // Receive onUserClick prop
+  onUserClick,
+  onToggleUserClick,
 }) => {
   return layout === 'grid' ? (
     <List>
@@ -180,8 +184,11 @@ export const UserList: React.FC<UserListProps> = ({
               md={user.totalCount ? 12 : 6}
               lg={user.totalCount ? 12 : 4}
             >
-              <UserCard {...user} onClick={onUserClick} />{' '}
-              {/* Pass onUserClick */}
+              <UserCard
+                {...user}
+                onClick={onUserClick}
+                onToggleClick={onToggleUserClick}
+              />{' '}
             </Grid>
             {index < users.length - 1 && <Divider />}
           </React.Fragment>
@@ -192,7 +199,11 @@ export const UserList: React.FC<UserListProps> = ({
     <List>
       {users.map((user, index) => (
         <React.Fragment key={index}>
-          <UserCard {...user} onClick={onUserClick} />
+          <UserCard
+            {...user}
+            onClick={onUserClick}
+            onToggleClick={onToggleUserClick}
+          />
           {index < users.length - 1 && <Divider />}
         </React.Fragment>
       ))}

src/components/youthNet/VillageDetailCard.tsx

@@ -19,7 +19,6 @@ const VillageDetailCard: React.FC<VillageDetailProps> = ({
         border: `1px solid ${theme.palette.warning['A100']}`,
         bgcolor: theme.palette.warning['800'],
         padding: '12px',
-
         margin: '20px',
         borderRadius: '16px',
         height: '64px',

src/components/youthNet/tempConfigs.ts

@@ -212,13 +212,15 @@ export const youthList = [
     age: 14,
     joinOn: 'Join on 15 Jan, 2025',
     image: '',
+    showMore: true,
     showAvtar: true,
   },
   {
     name: 'Divya Sharma',
     age: 17,
     joinOn: 'Join on 15 Jan, 2025',
     image: '',
+    showMore: true,
     showAvtar: true,
   },
 ];

src/pages/youthboard/villages/index.tsx

@@ -21,21 +21,39 @@ import withRole from '@/components/withRole';
 import { TENANT_DATA } from '../../../../app.config';
 import Dropdown from '@/components/youthNet/DropDown';
 import { useRouter } from 'next/router';
+import BottomDrawer from '@/components/youthNet/BottomDrawer';
 
 const Index = () => {
   const { t } = useTranslation();
   const theme = useTheme<any>();
   const router = useRouter();
   const [value, setValue] = useState<number>(1);
   const [searchInput, setSearchInput] = useState('');
+  const [toggledUser, setToggledUser] = useState('');
+  const [openDrawer, setOpenDrawer] = useState(false);
 
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setValue(newValue);
   };
 
   const handleUserClick = (name: any) => {
     console.log('Clicked user:', name);
-    router.push(`/youthboard/student/${name}`);
+    router.push(`/youthboard/volunteer-profile/${name}`);
+  };
+
+  const handleToggledUserClick = (name: any) => {
+    console.log('Toggled user:', name);
+    setToggledUser(name);
+    setOpenDrawer((prev) => !prev);
+  };
+
+  const handleMarkAsVolunteer = () => {
+    console.log('Marked as Volunteer');
+    setOpenDrawer(false);
+  };
+
+  const handleToggleClose = () => {
+    setOpenDrawer(false);
   };
 
   return (
@@ -51,7 +69,7 @@ const Index = () => {
           <Tabs
             value={value}
             onChange={handleChange}
-            textColor="inherit" // Use "inherit" to apply custom color
+            textColor="inherit"
             aria-label="secondary tabs example"
             sx={{
               fontSize: '14px',
@@ -86,20 +104,12 @@ const Index = () => {
       <Box>
         {value === 1 && (
           <>
-            {/* <Grid
-              px={'18px'}
-              spacing={2}
-              mt={1}
-              sx={{ display: 'flex', alignItems: 'center' }}
-              container
-            > */}
             <Box
               display={'flex'}
               flexDirection={'row'}
               sx={{
                 pr: '20px',
               }}
-              // justifyContent={'space-around'}
             >
               <SearchBar
                 onSearch={setSearchInput}
@@ -207,7 +217,6 @@ const Index = () => {
               sx={{
                 pr: '20px',
               }}
-              // justifyContent={'space-around'}
             >
               <SearchBar
                 onSearch={setSearchInput}
@@ -227,8 +236,16 @@ const Index = () => {
                 layout="list"
                 users={youthList}
                 onUserClick={handleUserClick}
+                onToggleUserClick={handleToggledUserClick}
               />
             </Box>
+            <BottomDrawer
+              open={openDrawer}
+              onClose={handleToggleClose}
+              title={toggledUser}
+              buttonLabel={t('YOUTHNET_PROFILE.MARK_AS_VOLUNTEER')}
+              onAction={handleMarkAsVolunteer}
+            />
           </>
         )}
       </Box>