diff --git a/frontend/src/pages/LawyerDisputeDashBoard/DisputeTab.jsx b/frontend/src/pages/LawyerDisputeDashBoard/DisputeTab.jsx index 6df8ce0..335477b 100644 --- a/frontend/src/pages/LawyerDisputeDashBoard/DisputeTab.jsx +++ b/frontend/src/pages/LawyerDisputeDashBoard/DisputeTab.jsx @@ -1,53 +1,9 @@ import React, { useState, useEffect } from 'react'; -// import arrowDown from './assets/arrow-down.svg'; import { useNavigate } from 'react-router-dom'; import useAxiosPrivate from '../../hooks/useAxiosPrivate'; import styled, { keyframes } from 'styled-components'; -const DataTemp = [ - { - ID: 2314028, - Name: 'Raya Enterprises', - Email: 'rayaenterprises.ng', - PhoneNo: '070456780', - Website: 'rayaenterprises.ng', - Dispute: 'Closed', - }, - { - ID: 2314028, - Name: 'Raya Enterprises', - Email: 'rayaenterprises.ng', - PhoneNo: '070456782', - Website: 'rayaenterprises.ng', - Dispute: 'Closed', - }, - { - ID: 2314028, - Name: 'Raya Enterprises', - Email: 'rayaenterprises.ng', - PhoneNo: '070456780', - Website: 'rayaenterprises.ng', - Dispute: 'Open', - }, - { - ID: 2314028, - Name: 'Raya Enterprises', - Email: 'rayaenterprises.ng', - PhoneNo: '070456780', - Website: 'rayaenterprises.ng', - Dispute: 'Closed', - }, - { - ID: 2314028, - Name: 'Raya Enterprises', - Email: 'rayaenterprises.ng', - PhoneNo: '070456780', - Website: 'rayaenterprises.ng', - Dispute: 'Closed', - }, -]; export const DisputeTab = (props) => { - const hideForMobile = `${props.width <= 800 ? 'hidden' : 'block'}`; const router = useNavigate(); const ApiPrivate = useAxiosPrivate(); @@ -85,23 +41,25 @@ export const DisputeTab = (props) => { router(`/lawyer-dispute-details?requestId=${id} `)} > - + {index + 1} - {badReviewerEmail} - {complaint} + {badReviewerEmail} + {complaint} {' '} {status === 1 ? 'Closed' : 'Open'}{' '} - + router(`/lawyer-dispute-details?requestId=${id}`)} + + >View Details + + ); }) @@ -134,5 +92,24 @@ const Status = styled.td` align-self: center; @media (max-width: 600px) { display: flex; + font-size: .8rem; } -`; +` +const Emailtab = styled.td` + @media (max-width: 768px) { + display: none; + } +` +const TabRow = styled.tr ` +@media (max-width: 600px) { + gap:0%; + justify-content:space-between; + } +` +const Complaint = styled.td` + @media (max-width: 600px) { + ${'' /* display: none; */} + font-size:.8rem; + } +` +; \ No newline at end of file diff --git a/frontend/src/pages/LawyerDisputeDashBoard/Disputes.jsx b/frontend/src/pages/LawyerDisputeDashBoard/Disputes.jsx index 9ac6feb..c9ac89d 100644 --- a/frontend/src/pages/LawyerDisputeDashBoard/Disputes.jsx +++ b/frontend/src/pages/LawyerDisputeDashBoard/Disputes.jsx @@ -1,46 +1,19 @@ import React, { useState, useEffect } from 'react'; import { DisputeTab } from './DisputeTab'; -import { DisputeTabCopy } from './DisputeTab copy'; -import DataTable from './DisputeTab copy'; -// import { useLocation } from 'react-router-dom'; -// import Sidebarr from '../../components/LawyerDashboard/Sidebarr'; import styled from 'styled-components'; import LawyerDashboardLayout from '../../layout/lawyerDashboardLayout'; -import useAxiosPrivate from '../../hooks/useAxiosPrivate'; const DisputeDashboard = () => { - const ApiPrivate = useAxiosPrivate(); - const [show, setShow] = useState(false); - // const [width, setWidth] = useState(window.innerWidth); - // useEffect(() => { - // window.addEventListener('resize', () => { - // setWidth(window.innerWidth); - // }); - // }, []); - - const getDispute = () => { - try { - const response = ApiPrivate.get('api/disputes/lawyer/').then((res) => { - if (res.data.length > 0) { - setShow(true); - } - }); - - console.log(response?.data); - } catch (err) { - if (err?.response?.status) { - } - console.log(err); - } - }; + const [width, setWidth] = useState(window.innerWidth); useEffect(() => { - getDispute(); - }, []); - // const hideMobile = `${width <= 800 ? 'hidden' : 'block'}`; + window.addEventListener('resize', () => { + setWidth(window.innerWidth); + }); + }, [window.innerWidth]); return ( <> - {/* +

@@ -48,16 +21,16 @@ const DisputeDashboard = () => {

- - - - - - - - +
IDEmailComplaintStatus
+ + ID + Email + + Complaint + + Status +
-
@@ -65,99 +38,71 @@ const DisputeDashboard = () => { -
*/} - - {show ? ( -
-

- My Disputes -

-
-
- ) : ( - '' - )} - - {/*
- - - - - - - - - -
IDEmailComplaintStatus
*/} - - - {show ? ( - - - - - - - - - - ) : ( - '' - )} - -
  IDEmailComplaintStatus
- ); }; -// const DisputeContainer = styled.div` -// @media (max-width: 1000px) { -// margin-left: 0px; -// } -// `; +const DisputeContainer = styled.div` + font-family: 'Lato', sans-serif; + @media (max-width: 1000px) { + margin-left: 0px; + } +`; const Wrapper = styled.div` - box-shadow: 2px 2px 6px #00000040; - border-radius: 4px; - // padding: 5px; - h1{ - padding-top: 15px; - padding-left: 5px; + box-shadow: 2px 2px 8px #00000040; + padding: 1em 1.5em; + border-radius: 1em; + @media (max-width: 1000px) { + padding: .8em.5em; + } + ` +const Id = styled.th` + @media (max-width: 400px) { + font-size: .8rem; + } + +` +const Status =styled.th` + @media (max-width: 400px) { + font-size: .8rem; } - table{ - width: 100%; - thead{ - font-weight: 700; - background: #F7F7F7; - height: 10vh; - } - tr{ - margin: 10px; - } +` +const EmailHead = styled.th` + @media (max-width: 768px) { + display: none; + } +`; +const Complaint = styled.th` + @media (max-width: 600px) { + gap: 30%; + } + @media (max-width: 400px) { + font-size: .8rem; + } - td{ - max-width: 20px; - } - // .emailtd{ - // max-width: 30px; - // } - @media screen and (max-width: 543px){ - .com-none{ - display: none; - } - @media screen and (min-width: 544px){ - .emailtd{ - max-width: 50px; - } - } - @media screen and (max-width: 330px){ - .comtd{ - display none; - } - } +`; +const TabRow = styled.tr` + @media (max-width: 768px) { + gap: 16%; + } + @media (max-width: 600px) { + gap: 20%; + } + @media (max-width: 500px) { + gap: 10%; + } + @media (max-width: 400px) { + gap: 12%; + } + @media (max-width: 370px) { + gap: 5%; + } + @media (max-width: 350px) { + gap: 5%; } `; -export default DisputeDashboard; + +export default DisputeDashboard; \ No newline at end of file