Merge pull request #615 from suvarnakale/release-1.1.0

Issue #PS-3276 feat: youthnet UI for villages and youth pages
tekdi · Jan 17, 2025 · 47d9310 · 47d9310
2 parents 4f8556a + a5aa32f
commit 47d9310
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 43 deletions.
diff --git a/src/components/youthNet/UserCard.tsx b/src/components/youthNet/UserCard.tsx
@@ -62,6 +62,7 @@ const UserCard: React.FC<UserCardProps> = ({
           {!image && name[0]}
         </Avatar>
       )}
+
       <Box ml={2} display={totalCount ? 'flex' : 'block'}>
         <Typography
           sx={{
@@ -107,27 +108,29 @@ const UserCard: React.FC<UserCardProps> = ({
             )}
 
             {totalCount && (
-              <Typography
-                variant="body2"
-                color="black"
-                // ml={5}
-                mt={'1rem'}
-                fontWeight={600}
-              >
-                {totalCount}
-                {newRegistrations && (
-                  <span
-                    style={{
-                      color:
-                        newRegistrations < 5
-                          ? theme.palette.error.main
-                          : theme.palette.success.main,
-                    }}
-                  >
-                    (+{newRegistrations})
-                  </span>
-                )}
-              </Typography>
+              <>
+                <Typography
+                  variant="body2"
+                  color="black"
+                  // ml={5}
+                  mt={'1rem'}
+                  fontWeight={600}
+                >
+                  {totalCount}
+                  {newRegistrations && (
+                    <span
+                      style={{
+                        color:
+                          newRegistrations < 5
+                            ? theme.palette.error.main
+                            : theme.palette.success.main,
+                      }}
+                    >
+                      (+{newRegistrations})
+                    </span>
+                  )}
+                </Typography>
+              </>
             )}
           </Box>
         </Box>

diff --git a/src/pages/youthboard/villages/index.tsx b/src/pages/youthboard/villages/index.tsx
@@ -14,6 +14,7 @@ import {
   youthList,
 } from '@/components/youthNet/tempConfigs';
 import { UserList } from '@/components/youthNet/UserCard';
+import DownloadIcon from '@mui/icons-material/Download';
 const index = () => {
   const { t } = useTranslation();
   const theme = useTheme<any>();
@@ -100,30 +101,67 @@ const index = () => {
                   { label: 'As of today, 5th Sep', value: 'today' },
                   { label: 'As of yesterday, 4th Sep', value: 'yesterday' },
                 ]}
-                // data="577 Youth & Volunteers"
               />
             </Box>
-            <Typography
-              sx={{
-                fontSize: '16px',
-                color: 'black',
-                marginLeft: '1rem',
-                padding: '5px 5px',
-              }}
-            >
-              52 Villages
-            </Typography>
-            <Typography
-              sx={{
-                fontSize: '16px',
-                color: 'textSecondary',
-                marginLeft: '2rem',
-                cursor: 'pointer',
-                padding: '5px 5px',
-              }}
-            >
-              Village Name
-            </Typography>
+            <Box display={'flex'} justifyContent={'space-between'}>
+              <Typography
+                sx={{
+                  fontSize: '16px',
+                  color: 'black',
+                  marginLeft: '2rem',
+                  padding: '5px 5px',
+                }}
+              >
+                52 Villages
+              </Typography>
+
+              <Box
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  cursor: 'pointer',
+                  padding: '5px 5px',
+                  color: '#0D599E',
+                  '&:hover': {
+                    color: '#074d82',
+                  },
+                }}
+              >
+                <Typography
+                  sx={{
+                    fontSize: '16px',
+                  }}
+                >
+                  CSV
+                </Typography>
+                <DownloadIcon />
+              </Box>
+            </Box>
+            <Box display={'flex'}>
+              <Typography
+                sx={{
+                  fontSize: '16px',
+                  color: 'textSecondary',
+                  marginLeft: '2rem',
+                  cursor: 'pointer',
+                  padding: '5px 5px',
+                }}
+              >
+                Village Name
+              </Typography>
+
+              <Typography
+                sx={{
+                  fontSize: '16px',
+                  color: 'textSecondary',
+                  marginLeft: '2rem',
+                  cursor: 'pointer',
+                  padding: '5px 5px',
+                }}
+              >
+                Total Count (+ New Registrations today)
+              </Typography>
+            </Box>
             <UserList users={villageList} />
             {/* </Grid> */}
           </>