Skip to content

Commit

Permalink
Merge pull request #638 from Aar-if/subzero
Browse files Browse the repository at this point in the history 
Issue #PS-2827 feat:  YouthNet Dashboard components/screens implementations (UI only)
  • Loading branch information
@itsvick
itsvick authored Jan 23, 2025
2 parents 071e2a6 + 32194c3 commit 27aa193
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 100 deletions.
155 changes: 77 additions & 78 deletions src/components/youthNet/UserCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ type UserCardProps = {

type UserListProps = {
users: UserCardProps[];
layout?: 'list' | 'grid'; // Added layout prop
};

const UserCard: React.FC<UserCardProps> = ({
Expand All @@ -40,57 +41,55 @@ const UserCard: React.FC<UserCardProps> = ({
totalCount,
newRegistrations,
}) => {
// const displayAge = age && age !== '';
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)': {
border: `1px solid ${theme.palette.action.selected}`,
padding: '4px 10px',
borderRadius: '8px',
background: theme.palette.warning.A400,
},
}),
}}
>
<ListItem>
{showAvtar && (
<Avatar
src={image}
alt={name}
<Avatar
src={image}
alt={name}
sx={{
width: 48,
height: 48,
backgroundColor: image
? 'transparent'
: theme.palette.warning['800'],
fontSize: 18,
fontWeight: '400',
color: 'black',
border: `2px solid ${theme.palette.warning['800']}`,
boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
}}
>
{!image && name[0]}
</Avatar>
)}
<Box
ml={2}
width={'100%'}
sx={{
width: 48,
height: 48,
backgroundColor: image ? 'transparent' : '#f5f5f5',
fontSize: 18,
fontWeight: '400',
color: 'black',
border: '2px solid #CDC5BD',
boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
display: totalCount ? 'flex' : 'unset',
alignItems: totalCount ? 'center' : 'unset',
}}
>
{!image && name[0]}
</Avatar>
) }
<Box ml={2} width={'100%'}
sx={{
display : totalCount ? "flex" : "unset",
alignItems: totalCount ? "center" :'unset'
}}
>
<Typography
sx={{
fontSize: '16px',
color: '#0D599E',
color: theme.palette.secondary.main,
textDecoration: 'underline',
cursor: 'pointer',
padding: '5px 5px',
Expand All @@ -100,52 +99,45 @@ const UserCard: React.FC<UserCardProps> = ({
</Typography>
<Box display={'flex'} justifyContent={'space-between'} width={'100%'}>
<Box sx={{ display: 'flex', gap: '8px' }}>
{
age && (
<Typography variant="body2" color="textSecondary">
{age} y/o • {village || joinOn}
</Typography>
)
}

{isNew && (
<Typography variant="body2" color="#1A8825" fontWeight={600}>
NEW
{age && (
<Typography variant="body2" color="textSecondary">
{age} y/o • {village || joinOn}
</Typography>
)}
</Box>


{totalCount && (
{isNew && (
<Typography
variant="body2"
color="black"
// ml={5}
mt={'1rem'}
color={theme.palette.success.main}
fontWeight={600}
>
{totalCount}
{newRegistrations && (
<span
style={{
color:
newRegistrations < 5
? theme.palette.error.main
: theme.palette.success.main,
}}
>
(+{newRegistrations})
</span>
)}
NEW
</Typography>
)}
</Box>
{totalCount && (
<Typography
variant="body2"
color="black"
mt={'1rem'}
fontWeight={600}
>
{totalCount}
{newRegistrations && (
<span
style={{
color:
newRegistrations < 5
? theme.palette.error.main
: theme.palette.success.main,
}}
>
(+{newRegistrations})
</span>
)}
</Typography>
)}
{showMore && (
<MoreVertIcon
// onClick={(event) => {
// isMobile
// ? toggleDrawer('bottom', true, teacherUserId)(event)
// : handleMenuOpen(event, teacherUserId);
// }}
sx={{
fontSize: '24px',
color: theme.palette.warning['300'],
Expand All @@ -160,30 +152,37 @@ const UserCard: React.FC<UserCardProps> = ({
);
};

export const UserList: React.FC<UserListProps> = ({ users }) => {
return (
export const UserList: React.FC<UserListProps> = ({
users,
layout = 'grid',
}) => {
return layout === 'grid' ? (
<List>
<Grid container spacing={2}>
{users.map((user, index) => (
<React.Fragment key={index}>
<Grid item xs={12} sm={12} md={user.totalCount ? 12 : 6} lg={user.totalCount ? 12 : 4}>
<UserCard
name={user.name}
age={user.age}
village={user.village}
joinOn={user.joinOn}
image={user.image}
showAvtar={user.showAvtar}
isNew={user.isNew}
showMore={user.showMore}
totalCount={user.totalCount}
newRegistrations={user.newRegistrations}
/>
<Grid
item
xs={12}
sm={12}
md={user.totalCount ? 12 : 6}
lg={user.totalCount ? 12 : 4}
>
<UserCard {...user} />
</Grid>
{index < users.length - 1 && <Divider />}
</React.Fragment>
))}
</Grid>
</List>
) : (
<List>
{users.map((user, index) => (
<React.Fragment key={index}>
<UserCard {...user} />
{index < users.length - 1 && <Divider />}
</React.Fragment>
))}
</List>
);
};
4 changes: 2 additions & 2 deletions src/pages/youthboard/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@ const index = () => {
onClose={handleModalClose}
>
{' '}
<UserList users={users} />
<UserList users={users} layout="list" />
</SimpleModal>

<SimpleModal
Expand All @@ -178,7 +178,7 @@ const index = () => {
onClose={handleModalClose}
>
{' '}
<UserList users={users} />
<UserList users={users} layout="list" />
</SimpleModal>
<SimpleModal
modalTitle={t('YOUTHNET_DASHBOARD.VLLAGE_18')}
Expand Down
38 changes: 18 additions & 20 deletions src/pages/youthboard/villages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,8 +85,8 @@ const index = () => {
display={'flex'}
flexDirection={'row'}
gap={'2rem'}
mr={"20px"}
// justifyContent={'space-around'}
mr={'20px'}
// justifyContent={'space-around'}
>
<SearchBar
onSearch={setSearchInput}
Expand Down Expand Up @@ -147,7 +147,7 @@ const index = () => {
cursor: 'pointer',
padding: '5px 5px',
}}
className='one-line-text'
className="one-line-text"
>
Village Name
</Typography>
Expand All @@ -164,26 +164,28 @@ const index = () => {
Total Count (+ New Registrations today)
</Typography>
</Box>
<Box sx={{
px: '20px',
mt: '15px'
}}>
<UserList users={villageList} />
<Box
sx={{
px: '20px',
mt: '15px',
}}
>
<UserList layout="list" users={villageList} />
</Box>

</>
)}
</Box>
<Box>
{value === 2 && (
<>
<Box sx={{
px: '20px',
mt: '15px'
}}>
<UserList users={youthList} />
</Box>

<Box
sx={{
px: '20px',
mt: '15px',
}}
>
<UserList layout="list" users={youthList} />
</Box>
</>
)}
</Box>
Expand All @@ -199,7 +201,3 @@ export async function getStaticProps({ locale }: any) {
};
}
export default index;




0 comments on commit 27aa193

Please sign in to comment.