From 951b6dbaf9d3da78c056cafbde17167887f73594 Mon Sep 17 00:00:00 2001 From: rohan09-raj Date: Fri, 26 Aug 2022 02:04:49 +0530 Subject: admin UI fixes --- admin/package.json | 1 + admin/src/components/Accordion/Accordion.jsx | 121 ++++++++++++++------- .../src/components/Accordion/Accordion.module.css | 6 +- admin/src/components/Header/Header.jsx | 18 +-- admin/src/components/Modal/Modal.jsx | 78 +++++++++++++ admin/src/components/Modal/Modal.module.css | 21 ++++ .../EnrollmentRequests/EnrollmentRequests.jsx | 9 +- admin/src/pages/UpdateRequests/UpdateRequests.jsx | 22 ++-- admin/src/services/apiservice.js | 5 + admin/yarn.lock | 13 +++ client/src/components/Card/Card.jsx | 2 +- client/src/components/Card/Card.module.css | 6 +- 12 files changed, 237 insertions(+), 65 deletions(-) create mode 100644 admin/src/components/Modal/Modal.jsx create mode 100644 admin/src/components/Modal/Modal.module.css diff --git a/admin/package.json b/admin/package.json index c2a745d..346489b 100644 --- a/admin/package.json +++ b/admin/package.json @@ -5,6 +5,7 @@ "dependencies": { "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", + "@mui/lab": "^5.0.0-alpha.96", "@mui/material": "^5.10.2", "@mui/styles": "^5.10.2", "@testing-library/jest-dom": "^5.16.5", diff --git a/admin/src/components/Accordion/Accordion.jsx b/admin/src/components/Accordion/Accordion.jsx index 08c46b1..c885d0b 100644 --- a/admin/src/components/Accordion/Accordion.jsx +++ b/admin/src/components/Accordion/Accordion.jsx @@ -2,54 +2,91 @@ import React, {useState} from 'react'; import {Button} from '@mui/material'; import styles from './Accordion.module.css'; +import PopUpModal from '../Modal/Modal'; const Accordion = ({name, user}) => { const [isActive, setIsActive] = useState(false); + const [open, setOpen] = React.useState(false); + const handleOpen = () => setOpen(true); + return ( -
-
setIsActive(!isActive)} - > -

{name}

-
❯
-
- {isActive && ( -
-
-
Name
{user.name}
-
Gender
{user.gender}
-
Date of Birth
{user.dob}
-
Mobile Number
{user.mobile}
-
Email
{user.email}
-
Address
{user.address.houseNo},{user.address.street}, - {user.address.locality},{user.address.landmark}, - {user.address.village},{user.address.district.name}, - {user.address.state.name},{user.address.pincode}
-
Indian Resident
{user.indianResident ? 'Yes' : 'No'}
-
-
- - - -
+ <> +
+
setIsActive(!isActive)} + > +

{name}

+ + Date of Birth: {user.dob} + + + Mobile Number: {user.mobile} + +
❯
- )} -
+ {isActive && ( +
+
+
+ Name
{user.name} +
+
+ Gender
{user.gender} +
+
+ Date of Birth
{user.dob} +
+
+ Mobile Number
{user.mobile} +
+
+ Email
{user.email} +
+
+ Address
{user.address.houseNo}, + {user.address.street},{user.address.locality}, + {user.address.landmark},{user.address.village}, + {user.address.district.name},{user.address.state.name}, + {user.address.pincode} +
+
+ Indian Resident
{' '} + {user.indianResident ? 'Yes' : 'No'} +
+
+
+ + + +
+
+ )} +
+ + ); }; diff --git a/admin/src/components/Accordion/Accordion.module.css b/admin/src/components/Accordion/Accordion.module.css index 0cf2603..347a405 100644 --- a/admin/src/components/Accordion/Accordion.module.css +++ b/admin/src/components/Accordion/Accordion.module.css @@ -5,7 +5,7 @@ .accordion__title { display: flex; - flex-direction: row; + align-items: center; justify-content: space-between; cursor: pointer; background-color: #2c3e50; @@ -23,6 +23,10 @@ padding: 1rem; } +.accordion__subheading { + font-size: 1.1rem; +} + .accordion__content { display: flex; justify-content: center; diff --git a/admin/src/components/Header/Header.jsx b/admin/src/components/Header/Header.jsx index a6e8523..fc0cf91 100644 --- a/admin/src/components/Header/Header.jsx +++ b/admin/src/components/Header/Header.jsx @@ -1,13 +1,17 @@ -import React from 'react' -import styles from './Header.module.css' +import React from 'react'; +import styles from './Header.module.css'; -const Header = ({ subheading }) => { +const Header = ({subheading}) => { return (
- +

{subheading}

- ) -} + ); +}; -export default Header +export default Header; diff --git a/admin/src/components/Modal/Modal.jsx b/admin/src/components/Modal/Modal.jsx new file mode 100644 index 0000000..ffe0167 --- /dev/null +++ b/admin/src/components/Modal/Modal.jsx @@ -0,0 +1,78 @@ +import React from 'react'; +import {Modal, Box} from '@mui/material'; +import styles from './Modal.module.css'; +import Tab from '@mui/material/Tab'; +import TabContext from '@mui/lab/TabContext'; +import TabList from '@mui/lab/TabList'; +import TabPanel from '@mui/lab/TabPanel'; + +const PopUpModal = ({documents, open, setOpen}) => { + const style = { + position: 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: 1000, + bgcolor: 'background.paper', + borderRadius: '10px', + boxShadow: 24, + p: 4, + }; + + const [value, setValue] = React.useState('1'); + + const handleChange = (event, newValue) => { + setValue(newValue); + }; + + const handleClose = () => setOpen(false); + + return ( +
+ + + + + + + + + + + + + + + + + + + + + + +
+ ); +}; + +export default PopUpModal; diff --git a/admin/src/components/Modal/Modal.module.css b/admin/src/components/Modal/Modal.module.css new file mode 100644 index 0000000..fd5e327 --- /dev/null +++ b/admin/src/components/Modal/Modal.module.css @@ -0,0 +1,21 @@ +.modal { + margin: 0px 15px; + position: absolute; + top: 100px; + right: 250px; +} + +.modal__title { + text-align: center; + margin: 20px 0px 40px; + font-size: var(--font-medium-large); +} + +.modal__image { + width: 50%; +} + +.modal__content { + width: 50%; + font-size: var(--font-medium-sm); +} diff --git a/admin/src/pages/EnrollmentRequests/EnrollmentRequests.jsx b/admin/src/pages/EnrollmentRequests/EnrollmentRequests.jsx index 22eb2c9..4ae5a85 100644 --- a/admin/src/pages/EnrollmentRequests/EnrollmentRequests.jsx +++ b/admin/src/pages/EnrollmentRequests/EnrollmentRequests.jsx @@ -10,6 +10,7 @@ import { import {useQuery, useMutation} from 'react-query'; import {useNavigate} from 'react-router-dom'; import BackButton from '../../components/BackButton/BackButton'; +import {sendMessage} from '../../services/apiservice'; import styles from './EnrollmentRequests.module.css'; @@ -28,6 +29,10 @@ const EnrollmentRequests = () => { }, }); + const setConfirm = useMutation((payload) => { + sendMessage(payload); + }); + return (
@@ -46,7 +51,9 @@ const EnrollmentRequests = () => {
)) diff --git a/admin/src/pages/UpdateRequests/UpdateRequests.jsx b/admin/src/pages/UpdateRequests/UpdateRequests.jsx index 07b3579..91629bd 100644 --- a/admin/src/pages/UpdateRequests/UpdateRequests.jsx +++ b/admin/src/pages/UpdateRequests/UpdateRequests.jsx @@ -49,16 +49,18 @@ const UpdateRequests = () => { data?.data.map((item) => (
-
)) ) : ( diff --git a/admin/src/services/apiservice.js b/admin/src/services/apiservice.js index c000755..2075239 100644 --- a/admin/src/services/apiservice.js +++ b/admin/src/services/apiservice.js @@ -28,3 +28,8 @@ export const updatingUsers = async () => { const response = await apiClient.get(`/users/updating`); return response; }; + +export const sendMessage = async (payload) => { + const response = await apiClient.post('/message', payload); + return response; +}; diff --git a/admin/yarn.lock b/admin/yarn.lock index ca1a2ea..6075bf0 100644 --- a/admin/yarn.lock +++ b/admin/yarn.lock @@ -1611,6 +1611,19 @@ resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.10.2.tgz#d54811df1d2d26ce87c0648e0e17061a41fe292c" integrity sha512-1guoGvL3QZ7VjA3y9zye9Rpm+jz18rVZIo3AauTGyW5ntDMxr/cR0M18nuc/NH2KqpMt+coh4NwPEO1uPuKM5w== +"@mui/lab@^5.0.0-alpha.96": + version "5.0.0-alpha.96" + resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.96.tgz#f34e6c86ff4c1fc9a87592c8428b0771d3c1c970" + integrity sha512-hA3nef9cV50eIljPA/otQ6CrDeI276UGRJmVw6YZzSBtUeGuE9FY411VOZeST4I4OM88RD3lwiRbN5aTX5Nn3g== + dependencies: + "@babel/runtime" "^7.17.2" + "@mui/base" "5.0.0-alpha.94" + "@mui/system" "^5.10.2" + "@mui/utils" "^5.9.3" + clsx "^1.2.1" + prop-types "^15.8.1" + react-is "^18.2.0" + "@mui/material@^5.10.2": version "5.10.2" resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.10.2.tgz#e440c7839bff31c9bb075ce12eaebac83b4f1d9e" diff --git a/client/src/components/Card/Card.jsx b/client/src/components/Card/Card.jsx index 89b89b3..d0210f8 100644 --- a/client/src/components/Card/Card.jsx +++ b/client/src/components/Card/Card.jsx @@ -4,7 +4,7 @@ import styles from './Card.module.css' const Card = ({ title, image, onClick }) => { return (
- +

{title}

) diff --git a/client/src/components/Card/Card.module.css b/client/src/components/Card/Card.module.css index 54dd471..d34a159 100644 --- a/client/src/components/Card/Card.module.css +++ b/client/src/components/Card/Card.module.css @@ -1,8 +1,8 @@ @import '../../styles/GlobalVariables.css'; .card { - height: 500px; - width: 500px; + height: 400px; + width: 400px; display: flex; flex-direction: column; justify-content: center; @@ -13,7 +13,7 @@ transition: 0.2s all; cursor: pointer; color: var(--color-black); - font-size: 2.25rem; + font-size: 1.5rem; text-decoration: none; } -- cgit v1.2.3-73-gaa49b