Skip to content

Dispute Layout #358

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
IdrisDY wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

Dispute Layout #358

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 31 additions & 54 deletions frontend/src/pages/LawyerDisputeDashBoard/DisputeTab.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();

Expand Down Expand Up @@ -85,23 +41,25 @@ export const DisputeTab = (props) => {
<tbody
className="w-full"
key={index + 1}
onClick={() => router(`/lawyer-dispute-details?requestId=${id} `)}
>
<tr className="flex hover:bg-[#E4E4E54D] rounded-md cursor-pointer pt-2 pb-2 justify-between border-b px-2 items-end ">
<TabRow className="flex hover:bg-[#E4E4E54D] gap-[10%] rounded-md pt-2 pb-2 md:gap-[6%] border-b px-2 items-center ">
<td className="w-[5%]">{index + 1}</td>
<td className="text-left">{badReviewerEmail}</td>
<td className="text-left w-[25%]">{complaint}</td>
<Emailtab className="text-left w-[25%] break-normal">{badReviewerEmail}</Emailtab>
<Complaint className="text-left w-[25%]">{complaint}</Complaint>
<Status
className={`${
status === 1 ? 'text-green-900' : 'text-red-900'
} ${
status === 1 ? 'bg-[#D1FADF]' : 'bg-[#FECDCA]'
} px-[1] py-[1] rounded-sm w-[80px] flex items-center justify-center w-[10%] text-center`}
status === 1 ? 'text-[#2A47CB]' : 'text-[#F16F04]'
} px-1 py-1 rounded-sm flex items-center font-semibold justify-center text-center`}
>
{' '}
{status === 1 ? 'Closed' : 'Open'}{' '}
</Status>
</tr>
<td className=" cursor-pointer text-[12px] md:text-[16px] text-[#233ba9] "
onClick={() => router(`/lawyer-dispute-details?requestId=${id}`)}

>View Details </td>

</TabRow>
</tbody>
);
})
Expand Down Expand Up @@ -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;
}
`
;
197 changes: 71 additions & 126 deletions frontend/src/pages/LawyerDisputeDashBoard/Disputes.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,163 +1,108 @@
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 (
<>
<LawyerDashboardLayout>
{/* <DisputeContainer className="px-1 mt-12 ">
<DisputeContainer className="px-1 mt-12 ">
<Wrapper>
<header>
<h1 className="text-2xl leading-2 pb-4 font-semibold ">
My Disputes
</h1>
<hr />
</header>

<table className="table w-full">
<tr className="flex justify-between w-full leading text-lg font-light bg-[#E4E4E54D] px-3 py-2 ">
<th>ID</th>
<th>Email</th>
<th>Complaint</th>
<th>Status</th>
</tr>
<table className="table w-full bg-[#E4E4E54D] ">
<TabRow className="flex gap-[11%] md:gap-[8%] w-full leading text-md md:text-lg font-light px-3 py-2 ">
<Id className=" md :w-[5%]">ID</Id>
<EmailHead className="md:w-[23%] text-left">Email</EmailHead>
<Complaint className="md:w-[24%] text-left">
Complaint
</Complaint>
<Status className=" md:w-[5%] w-[10%]">Status</Status>
</TabRow>
</table>

<main className="mt-5">
<table className="table w-full">
<DisputeTab width={width} />
</table>
</main>
</Wrapper>
</DisputeContainer>
<br /> */}
<Wrapper>
{show ? (
<header>
<h1 className="text-2xl leading-2 pb-4 font-semibold ">
My Disputes
</h1>
<hr />
</header>
) : (
''
)}

{/* <table>
<thead>
<tr>
<th>ID</th>
<th>Email</th>
<th>Complaint</th>
<th>Status</th>
</tr>
</thead>
<DisputeTabCopy />
</table> */}

<table>
{show ? (
<thead>
<tr>
<td className="idtd">&nbsp;&nbsp;ID</td>
<td className="emailtd com-none">Email</td>
<td className="comtd">Complaint</td>
<td>Status</td>
<td></td>
</tr>
</thead>
) : (
''
)}
<DataTable />
</table>
</Wrapper>
</LawyerDashboardLayout>
</>
);
};

// 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;