Skip to content
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.

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

Feat/dashboard provided contracts page v0 #28

Merged
merged 14 commits into from
Jan 21, 2025
25 changes: 20 additions & 5 deletions src/app/dashboard/contracts/components/ButtonGroup.jsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,33 @@
import { HiDownload, HiUpload } from 'react-icons/hi'
import { Button } from 'flowbite-react'

function ButtonGroup () {
function ButtonGroup ({ setSelected, selected }) {
return (
<div className='flex justify-center mt-5'>
<Button className='w-48 h-20 items-center bg-sedimark-deep-blue hover:bg-sedimark-light-blue shadow-lg text-white rounded-r-none focus:ring-0'>
<Button
className={`w-48 h-20 items-center shadow-lg rounded-r-none focus:ring-0 ${
selected === 'consumed'
? 'bg-sedimark-deep-blue hover:bg-sedimark-light-blue text-white'
: 'bg-white hover:bg-gray-200 text-black'
}`}
onClick={() => setSelected('consumed')}
>

<div className='flex flex-col items-center text-center'>
<HiDownload size={20} color='white' />
<HiDownload size={20} color={selected === 'consumed' ? 'white' : 'black'} />
Consumed
</div>
</Button>
<Button className='w-48 h-20 items-center bg-white text-black shadow-lg rounded-l-none focus:ring-0'>
<Button
className={`w-48 h-20 items-center shadow-lg rounded-l-none focus:ring-0 ${
selected === 'provided'
? 'bg-sedimark-deep-blue hover:bg-sedimark-light-blue text-white'
: 'bg-white hover:bg-gray-200 text-black'
}`}
onClick={() => setSelected('provided')}
>
<div className='flex flex-col items-center text-center'>
<HiUpload size={20} />
<HiUpload size={20} color={selected === 'provided' ? 'white' : 'black'} />
Provided
</div>
</Button>
Expand Down
13 changes: 13 additions & 0 deletions src/app/dashboard/contracts/components/ContractItem.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ function ContractItem ({ vc, price }) {
const validatedPrice = price ?? '0'
const history = mockContractTransfer.transfer_history
const historyData = ['', 'Status', 'Date', 'Transfer ID']
const policyConstrains = vc.policies

return (
<Accordion collapseAll className=' min-w-fit overflow-auto m-5 shadow-md rounded-md'>
Expand Down Expand Up @@ -86,6 +87,18 @@ function ContractItem ({ vc, price }) {
</div>
</ul>
</Accordion.Content>
{policyConstrains && policyConstrains.length > 0 && (
<Accordion.Content className='bg-white max-h-80 overflow-y-clip'>
<div>
<h4 className='font-bold'>Policy constraints:</h4>
{policyConstrains.map((policy, index) => (
<li key={index} className='text-sm mt-2 ml-4 list-disc'>
{policy.policyName}: {policy.period.startDate.split('T')[0]} to {policy.period.endDate.split('T')[0]}
</li>
))}
</div>
</Accordion.Content>
)}
</Accordion.Panel>
</Accordion>
)
Expand Down
7 changes: 4 additions & 3 deletions src/app/dashboard/contracts/components/Contracts.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ function calculateItemsPerPage (currentPage, size, data, setContracts) {
function Contracts ({ data }) {
const [currentPage, setCurrentPage] = useState(1)
const [contracts, setContracts] = useState([])
const [selected, setSelected] = useState('consumed')

useEffect(() => {
if (data) {
Expand All @@ -33,10 +34,10 @@ function Contracts ({ data }) {
const onPageChange = (page) => setCurrentPage(page)

return (
<div className='flex flex-row bg-sedimark-light-blue overflow-auto'>
<div className='flex flex-row overflow-auto'>
<SidebarDashboard />
<div className='w-full'>
<ButtonGroup />
<div className='w-full bg-sedimark-light-blue'>
<ButtonGroup setSelected={setSelected} selected={selected} />
<div className=' flex flex-row justify-center mr-52 mt-10 mb-8'>
<Pagination currentPage={currentPage} totalPages={totalPagesToDisplay === 0 ? 1 : totalPagesToDisplay} onPageChange={onPageChange} className='h-8 flex items-center ml-48' />
</div>
Expand Down
7 changes: 7 additions & 0 deletions src/app/dashboard/page.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import Dashboard from './components/Dashboard'

export default function Page () {
return (
<Dashboard />
)
}
22 changes: 20 additions & 2 deletions src/utils/data/mockContract.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,16 @@
"health "
],
"location": "London, UK",
"description": "This dataset provides comprehensive data on various climate metrics for the year 2022. It includes detailed information on temperature changes, precipitation patterns, and carbon emissions. The data is sourced from the National Oceanic and Atmospheric Administration (NOAA) and is designed to support research and policy-making efforts related to climate change. Users can analyze trends over time and compare data across different regions to gain insights into the impacts of climate change."
"description": "This dataset provides comprehensive data on various climate metrics for the year 2022. It includes detailed information on temperature changes, precipitation patterns, and carbon emissions. The data is sourced from the National Oceanic and Atmospheric Administration (NOAA) and is designed to support research and policy-making efforts related to climate change. Users can analyze trends over time and compare data across different regions to gain insights into the impacts of climate change.",
"policies": [
{
"period": {
"startDate": "2024-11-03T16:07:15.142Z",
"endDate": "2024-11-09T16:07:15.142Z"
},
"policyName": "POLICY EVALUATION TIME"
}
]
},
{
"title": "Eviden HPC",
Expand Down Expand Up @@ -64,7 +73,16 @@
"sustainability"
],
"location": "Berlin, Germany",
"description": "Explore global renewable energy adoption trends, including solar, wind, and hydroelectric power data from 2023."
"description": "Explore global renewable energy adoption trends, including solar, wind, and hydroelectric power data from 2023.",
"policies": [
{
"period": {
"startDate": "2024-11-03T16:07:15.142Z",
"endDate": "2024-11-09T16:07:15.142Z"
},
"policyName": "POLICY EVALUATION TIME"
}
]
},
{
"title": "Urban Mobility Insights",
Expand Down