Skip to content

Commit

Permalink
Merge pull request #658 from Aar-if/seven
Browse files Browse the repository at this point in the history 
Issue #PS-3725 feat: Adding Mentor Lead components on Dashboard
  • Loading branch information
@itsvick
itsvick authored Jan 30, 2025
2 parents 17c59ee + 8998e42 commit 7b43c7d
Show file tree
Hide file tree
Showing 2 changed files with 177 additions and 209 deletions.
346 changes: 137 additions & 209 deletions src/pages/youthboard/villages/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
import Header from '@/components/Header';
import BackHeader from '@/components/youthNet/BackHeader';
import { Box, Grid, Tab, Tabs, TextField, Typography } from '@mui/material';
import { Box, Tab, Tabs, Typography } from '@mui/material';
import { useTranslation } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import React, { useState } from 'react';
import React, { useEffect, useState } from 'react';
import { useTheme } from '@mui/material/styles';
import SearchBar from '@/components/Searchbar';
import SortBy from '@/components/youthNet/SortBy';
import YouthAndVolunteers from '@/components/youthNet/YouthAndVolunteers';
import {
DROPDOWN_NAME,
users,
VILLAGE_OPTIONS,
villageList,
youthList,
Expand All @@ -22,243 +21,172 @@ import { TENANT_DATA } from '../../../../app.config';
import Dropdown from '@/components/youthNet/DropDown';
import { useRouter } from 'next/router';
import BottomDrawer from '@/components/youthNet/BottomDrawer';
import Loader from '@/components/Loader';
import {
fetchBlockData,
fetchDistrictData,
} from '@/services/youthNet/Dashboard/VillageServices';

interface FilterSectionProps {
districtData: { DISTRICT_NAME: string; DISTRICT_OPTIONS: string[] } | null;
blockData: { BLOCK_NAME: string; BLOCK_OPTIONS: string[] } | null;
}

const FilterSection = ({ districtData, blockData }: FilterSectionProps) => (
<Box display={'flex'} flexDirection={'row'} sx={{ p: '20px' }}>
<Box sx={{ width: '50%', mr: '20px' }}>
{districtData ? (
<Dropdown
name={districtData?.DISTRICT_NAME}
values={districtData?.DISTRICT_OPTIONS}
defaultValue={districtData?.DISTRICT_OPTIONS[0]}
onSelect={(value) => console.log('Selected:', value)}
/>
) : (
<Loader showBackdrop />
)}
</Box>
<Box sx={{ width: '50%' }}>
{blockData ? (
<Dropdown
name={blockData?.BLOCK_NAME}
values={blockData?.BLOCK_OPTIONS}
defaultValue={blockData?.BLOCK_OPTIONS[0]}
onSelect={(value) => console.log('Selected:', value)}
/>
) : (
<Loader showBackdrop />
)}
</Box>
</Box>
);

const Index = () => {
const { t } = useTranslation();
const theme = useTheme<any>();
const router = useRouter();
const [value, setValue] = useState<number>(1);
const [value, setValue] = useState(1);
const [searchInput, setSearchInput] = useState('');
const [toggledUser, setToggledUser] = useState('');
const [openDrawer, setOpenDrawer] = useState(false);
const [districtData, setDistrictData] = useState(null);
const [blockData, setBlockData] = useState(null);

useEffect(() => {
const getData = async () => {
setDistrictData(await fetchDistrictData());
setBlockData(await fetchBlockData());
};
getData();
}, []);

const handleChange = (event: React.SyntheticEvent, newValue: number) => {
const handleChange = (_event: React.SyntheticEvent, newValue: number) =>
setValue(newValue);
};

const handleUserClick = (name: any) => {
console.log('Clicked user:', name);
const handleUserClick = (name: string) =>
router.push(`/youthboard/volunteer-profile/${name}`);
};

const handleToggledUserClick = (name: any) => {
console.log('Toggled user:', name);
interface HandleToggledUserClick {
(name: string): void;
}

const handleToggledUserClick: HandleToggledUserClick = (name) => {
setToggledUser(name);
setOpenDrawer((prev) => !prev);
};

const handleMarkAsVolunteer = () => {
console.log('Marked as Volunteer');
setOpenDrawer(false);
};

const handleToggleClose = () => {
setOpenDrawer(false);
};

return (
<Box minHeight="100vh">
<Box>
<Header />
</Box>
<Header />
<Box ml={2}>
<BackHeader headingOne={t('DASHBOARD.VILLAGES_AND_YOUTH')} />
</Box>
<Box sx={{ width: '100%' }}>
{value && (
<Tabs
value={value}
onChange={handleChange}
textColor="inherit"
aria-label="secondary tabs example"
sx={{
fontSize: '14px',
borderBottom: (theme) => `1px solid #EBE1D4`,

'& .MuiTab-root': {
color: theme.palette.warning['A200'],
padding: '0 20px',
flexGrow: 1,
},
'& .Mui-selected': {
color: theme.palette.warning['A200'],
},
'& .MuiTabs-indicator': {
display: 'flex',
justifyContent: 'center',
backgroundColor: theme.palette.primary.main,
borderRadius: '100px',
height: '3px',
},
'& .MuiTabs-scroller': {
overflowX: 'unset !important',
},
}}
>
<Tab value={1} label={t('DASHBOARD.VILLAGES')} />
<Tab value={2} label={t('DASHBOARD.YOUTH_VOLUNTEERS')} />
</Tabs>
)}
</Box>

<Box>
{value === 1 && (
<>
<Box
display={'flex'}
flexDirection={'row'}
sx={{
pr: '20px',
}}
>
<SearchBar
onSearch={setSearchInput}
value={searchInput}
placeholder={t('DASHBOARD.SEARCH_VILLAGES')}
fullWidth={true}
/>
<SortBy />
</Box>
<Box>
<YouthAndVolunteers
selectOptions={[
{ label: 'As of today, 5th Sep', value: 'today' },
{ label: 'As of yesterday, 4th Sep', value: 'yesterday' },
]}
/>
</Box>
<Box display={'flex'} justifyContent={'space-between'}>
<Typography
sx={{
fontSize: '16px',
color: 'black',
marginLeft: '2rem',
}}
>
52 Villages
</Typography>

<Box
sx={{
display: 'flex',
alignItems: 'center',
cursor: 'pointer',
pr: '20px',
color: '#0D599E',
'&:hover': {
color: '#074d82',
},
}}
>
<Typography
sx={{
fontSize: '16px',
}}
>
CSV
</Typography>
<DownloadIcon />
</Box>
</Box>
<Box display={'flex'} mt={2} justifyContent={'space-between'}>
<Typography
sx={{
fontSize: '16px',
color: 'textSecondary',
marginLeft: '2rem',
cursor: 'pointer',
pr: '20px',
}}
className="one-line-text"
>
Village Name
</Typography>

<Typography
sx={{
fontSize: '16px',
color: 'textSecondary',
cursor: 'pointer',
pr: '20px',
}}
>
Total Count (+ New Registrations today)
</Typography>
</Box>
<Box
sx={{
pr: '20px',
mt: '15px',
}}
>
<UserList layout="list" users={villageList} />
</Box>
</>
)}
</Box>
<Box>
{value === 2 && (
<>
<Box
sx={{
px: '20px',
mt: '15px',
}}
>
<Dropdown
name={DROPDOWN_NAME}
values={VILLAGE_OPTIONS}
onSelect={(value) => console.log('Selected:', value)}
/>
</Box>
<Box
display={'flex'}
flexDirection={'row'}
sx={{
pr: '20px',
}}
>
<SearchBar
onSearch={setSearchInput}
value={searchInput}
placeholder={t('DASHBOARD.SEARCH_VILLAGES')}
fullWidth={true}
/>
<SortBy />
</Box>
<Tabs
value={value}
onChange={handleChange}
textColor="inherit"
sx={{ borderBottom: `1px solid #EBE1D4` }}
>
<Tab value={1} label={t('DASHBOARD.VILLAGES')} />
<Tab value={2} label={t('DASHBOARD.YOUTH_VOLUNTEERS')} />
</Tabs>
{TENANT_DATA.LEADER && (
<FilterSection districtData={districtData} blockData={blockData} />
)}
{value === 1 ? (
<Box>
<Box display="flex" flexDirection="row" pr={2}>
<SearchBar
onSearch={setSearchInput}
value={searchInput}
placeholder={t('DASHBOARD.SEARCH_VILLAGES')}
fullWidth
/>
<SortBy />
</Box>
<YouthAndVolunteers
selectOptions={[
{ label: 'As of today, 5th Sep', value: 'today' },
{ label: 'As of yesterday, 4th Sep', value: 'yesterday' },
]}
/>
<Box display="flex" justifyContent="space-between">
<Typography sx={{ fontSize: '16px', color: 'black', ml: 2 }}>
52 Villages
</Typography>
<Box
sx={{
px: '20px',
mt: '15px',
display: 'flex',
alignItems: 'center',
cursor: 'pointer',
pr: 2,
color: '#0D599E',
'&:hover': { color: '#074d82' },
}}
>
<UserList
layout="list"
users={youthList}
onUserClick={handleUserClick}
onToggleUserClick={handleToggledUserClick}
/>
<Typography sx={{ fontSize: '16px' }}>CSV</Typography>
<DownloadIcon />
</Box>
<BottomDrawer
open={openDrawer}
onClose={handleToggleClose}
title={toggledUser}
buttonLabel={t('YOUTHNET_PROFILE.MARK_AS_VOLUNTEER')}
onAction={handleMarkAsVolunteer}
</Box>
<UserList layout="list" users={villageList} />
</Box>
) : (
<Box px={2}>
<Dropdown
name={DROPDOWN_NAME}
values={VILLAGE_OPTIONS}
defaultValue={VILLAGE_OPTIONS[0]}
onSelect={(value) => console.log('Selected:', value)}
/>
<Box display="flex" flexDirection="row" pr={2}>
<SearchBar
onSearch={setSearchInput}
value={searchInput}
placeholder={t('DASHBOARD.SEARCH_VILLAGES')}
fullWidth
/>
</>
)}
</Box>
<SortBy />
</Box>
<UserList
layout="list"
users={youthList}
onUserClick={handleUserClick}
onToggleUserClick={handleToggledUserClick}
/>
<BottomDrawer
open={openDrawer}
onClose={() => setOpenDrawer(false)}
title={toggledUser}
buttonLabel={t('YOUTHNET_PROFILE.MARK_AS_VOLUNTEER')}
onAction={() => setOpenDrawer(false)}
/>
</Box>
)}
</Box>
);
};

export async function getStaticProps({ locale }: any) {
return {
props: {
...(await serverSideTranslations(locale, ['common'])),
// Will be passed to the page component as props
},
};
return { props: { ...(await serverSideTranslations(locale, ['common'])) } };
}

export default withRole(TENANT_DATA.YOUTHNET)(Index);
Loading

0 comments on commit 7b43c7d

Please sign in to comment.