From 1713781f2a1f650cbbedf5f521dbed522147b5c6 Mon Sep 17 00:00:00 2001
From: upendraTekdi <upendra_k@tekditechnologies.com>
Date: Tue, 21 May 2024 11:37:39 +0530
Subject: [PATCH 1/3] Issue #PS-314 feat: Learner details popup component

---
 src/components/ProfileField.tsx    |  25 +++++
 src/components/learner-details.tsx | 149 +++++++++++++++++++++++++++++
 2 files changed, 174 insertions(+)
 create mode 100644 src/components/ProfileField.tsx
 create mode 100644 src/components/learner-details.tsx

diff --git a/src/components/ProfileField.tsx b/src/components/ProfileField.tsx
new file mode 100644
index 00000000..3da0f22e
--- /dev/null
+++ b/src/components/ProfileField.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Grid, Box, Typography } from '@mui/material';
+
+interface ProfileFieldProps {
+  data: { label: string; value: string }[];
+}
+
+const ProfileField: React.FC<ProfileFieldProps> = ({ data }) => (
+  <Grid container spacing={2}>
+    {data?.map((item, index) => (
+      <Grid item xs={6} key={index} textAlign="left">
+        <Typography margin={0} variant="h5">
+          {item.label}
+        </Typography>
+        <Box display="flex">
+          <Typography variant="h5" margin={0} color="#4D4639">
+            {item.value}
+          </Typography>
+        </Box>
+      </Grid>
+    ))}
+  </Grid>
+);
+
+export default ProfileField;
diff --git a/src/components/learner-details.tsx b/src/components/learner-details.tsx
new file mode 100644
index 00000000..6ac8ebb4
--- /dev/null
+++ b/src/components/learner-details.tsx
@@ -0,0 +1,149 @@
+import React from 'react';
+import Modal from '@mui/material/Modal';
+import {
+  Box,
+  Button,
+  Divider,
+  Grid,
+  IconButton,
+  Typography,
+  useMediaQuery,
+  useTheme,
+} from '@mui/material';
+import { useTranslation } from 'next-i18next';
+import CloseIcon from '@mui/icons-material/Close';
+import PlaceOutlinedIcon from '@mui/icons-material/PlaceOutlined';
+import ProfileField from '@/components/ProfileField';
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+
+const LearnerDetails = () => {
+  const { t } = useTranslation();
+
+  const [open, setOpen] = React.useState(true);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  const dummyData = [
+    { label: 'Full Name', value: 'Ananya Gupta' },
+    { label: 'Age', value: '19' },
+    { label: 'Gender', value: 'Female' },
+    { label: 'Type Of Learner', value: 'Regular' },
+    { label: 'Enrollment Number', value: '1002365362' },
+    { label: 'Learner Primary work', value: 'Self Employed' },
+    { label: 'contact Number', value: '945454665' },
+  ];
+
+  const theme = useTheme<any>();
+  const isDesktop = useMediaQuery(theme.breakpoints.up('md'));
+
+  const style = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: isDesktop ? 500 : 400,
+    bgcolor: 'warning.A400',
+    p: 4,
+    textAlign: 'center',
+    height: 'auto',
+  };
+  return (
+    <div>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="edit-profile-modal"
+        aria-describedby="edit-profile-description"
+      >
+        <Box
+          sx={style}
+          gap="10px"
+          display="flex"
+          flexDirection="column"
+          borderRadius={'1rem'}
+        >
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}
+          >
+            <Typography
+              variant="h2"
+              style={{
+                textAlign: 'left',
+                color: '#4D4639',
+              }}
+            >
+              {t('PROFILE.LEARNER_DETAILS')}
+            </Typography>
+
+            <IconButton
+              edge="end"
+              color="inherit"
+              // onClick={handleClose}
+              aria-label="close"
+              style={{
+                justifyContent: 'flex-end',
+              }}
+            >
+              <CloseIcon cursor="pointer" />
+            </IconButton>
+          </Box>
+          <Divider />
+          <Box style={{ border: '1px solid gray', borderRadius: '16px' }} p={2}>
+            <ProfileField data={dummyData} />
+          </Box>
+
+          <Divider />
+          <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+            <Button
+              sx={{
+                // minWidth: '100%',
+
+                color: 'black',
+                backgroundColor: 'containedSecondary',
+                '&:hover': {
+                  backgroundColor: 'containedSecondary',
+                },
+                border: 'black',
+                borderRadius: '1px',
+              }}
+              onClick={handleClose}
+              variant="outlined"
+            >
+              {t('PROFILE.CLOSE')}
+            </Button>
+            <Button
+              sx={{
+                // minWidth: '100%',
+
+                color: 'black',
+                backgroundColor: 'containedSecondary',
+                '&:hover': {
+                  backgroundColor: 'containedSecondary',
+                },
+              }}
+              // onClick={handleUpdateClick}
+              variant="contained"
+            >
+              {t('PROFILE.VIEW_FULL_PROFILE')}
+            </Button>
+          </Box>
+        </Box>
+      </Modal>
+    </div>
+  );
+};
+
+export async function getStaticProps({ locale }: any) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ['common'])),
+      // Will be passed to the page component as props
+    },
+  };
+}
+
+export default LearnerDetails;

From b4e2b130b41e25b38c1a92ac51b236525ec165f7 Mon Sep 17 00:00:00 2001
From: upendraTekdi <upendra_k@tekditechnologies.com>
Date: Tue, 21 May 2024 20:06:45 +0530
Subject: [PATCH 2/3] Issue #PS-314 fix: profile api url updated

---
 src/services/ProfileService.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/services/ProfileService.ts b/src/services/ProfileService.ts
index 7e40cfc7..21e9514c 100644
--- a/src/services/ProfileService.ts
+++ b/src/services/ProfileService.ts
@@ -39,7 +39,7 @@ export const getUserDetails = async (
   userId: string,
   fieldValue: boolean
 ): Promise<any> => {
-  const apiUrl: string = `${process.env.NEXT_PUBLIC_BASE_URL}/users/${userId}?fieldvalue=${fieldValue}}`;
+  const apiUrl: string = `${process.env.NEXT_PUBLIC_BASE_URL}/users/${userId}?fieldvalue=${fieldValue}`;
   try {
     const response = await get(apiUrl);
     return response?.data;

From cfb8d1ab279a5e5924650d75fbe921bf52db7bec Mon Sep 17 00:00:00 2001
From: upendraTekdi <upendra_k@tekditechnologies.com>
Date: Tue, 21 May 2024 21:03:12 +0530
Subject: [PATCH 3/3] Issue #PS-314 feat: styles get from theme changes

---
 src/components/ProfileField.tsx    | 40 ++++++++++++++++++------------
 src/components/learner-details.tsx | 19 +++-----------
 2 files changed, 27 insertions(+), 32 deletions(-)

diff --git a/src/components/ProfileField.tsx b/src/components/ProfileField.tsx
index 3da0f22e..19ffc5a2 100644
--- a/src/components/ProfileField.tsx
+++ b/src/components/ProfileField.tsx
@@ -1,25 +1,33 @@
 import React from 'react';
 import { Grid, Box, Typography } from '@mui/material';
-
+import { useTheme, useThemeProps } from '@mui/material/styles';
 interface ProfileFieldProps {
   data: { label: string; value: string }[];
 }
 
-const ProfileField: React.FC<ProfileFieldProps> = ({ data }) => (
-  <Grid container spacing={2}>
-    {data?.map((item, index) => (
-      <Grid item xs={6} key={index} textAlign="left">
-        <Typography margin={0} variant="h5">
-          {item.label}
-        </Typography>
-        <Box display="flex">
-          <Typography variant="h5" margin={0} color="#4D4639">
-            {item.value}
+const ProfileField: React.FC<ProfileFieldProps> = ({ data }) => {
+  const theme = useTheme<any>();
+
+  return (
+    <Grid container spacing={2}>
+      {data?.map((item, index) => (
+        <Grid item xs={6} key={index} textAlign="left">
+          <Typography margin={0} variant="h5">
+            {item.label}
           </Typography>
-        </Box>
-      </Grid>
-    ))}
-  </Grid>
-);
+          <Box display="flex">
+            <Typography
+              variant="h5"
+              margin={0}
+              sx={{ color: theme.palette.warning['A400'] }}
+            >
+              {item.value}
+            </Typography>
+          </Box>
+        </Grid>
+      ))}
+    </Grid>
+  );
+};
 
 export default ProfileField;
diff --git a/src/components/learner-details.tsx b/src/components/learner-details.tsx
index 6ac8ebb4..7cd7fce0 100644
--- a/src/components/learner-details.tsx
+++ b/src/components/learner-details.tsx
@@ -73,7 +73,7 @@ const LearnerDetails = () => {
               variant="h2"
               style={{
                 textAlign: 'left',
-                color: '#4D4639',
+                color: theme.palette.warning['A400'],
               }}
             >
               {t('PROFILE.LEARNER_DETAILS')}
@@ -100,14 +100,7 @@ const LearnerDetails = () => {
           <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
             <Button
               sx={{
-                // minWidth: '100%',
-
-                color: 'black',
-                backgroundColor: 'containedSecondary',
-                '&:hover': {
-                  backgroundColor: 'containedSecondary',
-                },
-                border: 'black',
+                borderColor: theme.palette.warning['A400'],
                 borderRadius: '1px',
               }}
               onClick={handleClose}
@@ -117,13 +110,7 @@ const LearnerDetails = () => {
             </Button>
             <Button
               sx={{
-                // minWidth: '100%',
-
-                color: 'black',
-                backgroundColor: 'containedSecondary',
-                '&:hover': {
-                  backgroundColor: 'containedSecondary',
-                },
+                borderColor: theme.palette.warning['A400'],
               }}
               // onClick={handleUpdateClick}
               variant="contained"