Feat/dashboard provided contracts page v0

next.config.js

@@ -4,7 +4,7 @@ const nextConfig = {
   output: 'standalone',
   env: {
     BATCH_SIZE: process.env.BATCH_SIZE ?? '40',
-    CONTRACTS_PAGE_SIZE: process.env.CONTRACTS_PAGE_SIZE ?? '5',
+    CONTRACTS_PAGE_SIZE: process.env.CONTRACTS_PAGE_SIZE ?? '5'
   },
   async headers () {
     return [

src/app/dashboard/components/sidebar/FilterDatePicker.jsx

@@ -3,15 +3,15 @@ import { useState } from 'react'
 
 /**
  * Renders a date range picker for filtering contracts.
- * 
+ *
  * - Tracks the selected date range using state (`value`).
- * - Ensures the current selection is displayed in the `Datepicker` by passing 
+ * - Ensures the current selection is displayed in the `Datepicker` by passing
  *   the `value` prop; without it, the placeholder is shown instead.
  */
 const FilterDatepicker = () => {
   const [value, setValue] = useState()
 
-  //TODO: FIX -> When passing setValue directly to onchange there are too many re-renders and the app crashes
+  // TODO: FIX -> When passing setValue directly to onchange there are too many re-renders and the app crashes
   const handleChange = (value) => {
     setValue(value)
   }

src/app/dashboard/contracts/components/ButtonGroup.jsx

@@ -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>

src/app/dashboard/contracts/components/ContractItem.jsx

@@ -3,7 +3,7 @@ import { Accordion, Table, Button } from 'flowbite-react'
 import { HiOutlineCurrencyEuro, HiCalendar, HiDotsHorizontal, HiCheck, HiExclamationCircle, HiPlay } from 'react-icons/hi'
 import mockContractTransfer from '@/utils/data/mockContractTransfers.json'
 
-function ContractItem ({ vc, price }) {
+function ContractItem ({ vc, price, selected }) {
   const maxLengthTitle = 70
   const maxLengthDescription = 120
   const name = vc.title.length > maxLengthTitle ? vc.title.substring(0, maxLengthTitle) + '...' : vc.title
@@ -15,6 +15,15 @@ function ContractItem ({ vc, price }) {
   const validatedPrice = price ?? '0'
   const history = mockContractTransfer.transfer_history
   const historyData = ['', 'Status', 'Date', 'Transfer ID']
+  const policyConstrains = vc.policies
+    ? vc.policies[0]
+    : {
+        period: {
+          startDate: '00-00-00',
+          endDate: '00-00-00'
+        },
+        policyName: 'Not inforced'
+      }
 
   return (
     <Accordion collapseAll className=' min-w-fit overflow-auto m-5 shadow-md rounded-md'>
@@ -44,48 +53,58 @@ function ContractItem ({ vc, price }) {
             </div>
           </div>
         </Accordion.Title>
-        <Accordion.Content className='bg-white max-h-80 overflow-y-clip'>
-          <ul className='divide-y'>
-            <div className='grid grid-cols-3 w-full'>
-              <Button className='col-start-2 bg-sedimark-deep-blue hover:bg-sedimark-light-blue shadow-lg text-white rounded focus:ring-0 mb-4'>
-                <HiPlay size={24} className='mr-2' />
-                Start transfer
-              </Button>
-            </div>
-            <div className='overflow-x-auto mt-2'>
-              <Table className='mt-4'>
-                <Table.Head>
-                  {historyData.map((nameColumn, index) => {
-                    return (<Table.HeadCell className='bg-white p-0 pl-6' key={`${nameColumn}-${index}`}>{nameColumn}</Table.HeadCell>)
-                  })}
-                </Table.Head>
-                <Table.Body className='divide-y'>
-                  {history.map((asset, index) => {
-                    return (
-                      <Table.Row className='bg-white dark:border-gray-700 dark:bg-gray-800' key={`${asset.asset}-${index}`}>
-                        {asset.status === 'Completed' &&
-                          <Table.Cell className='max-w-fit'>
-                            <HiCheck size={20} />
-                          </Table.Cell>}
-                        {asset.status === 'In progress' &&
-                          <Table.Cell className='max-w-fit'>
-                            <HiDotsHorizontal size={20} />
-                          </Table.Cell>}
-                        {asset.status === 'Failed' &&
-                          <Table.Cell className='max-w-fit'>
-                            <HiExclamationCircle size={20} />
-                          </Table.Cell>}
-                        <Table.Cell className='whitespace-nowrap font-normal text-black dark:text-white'>{asset.status}</Table.Cell>
-                        <Table.Cell className='whitespace-nowrap font-normal text-black dark:text-white'>{asset.date}</Table.Cell>
-                        <Table.Cell className='whitespace-nowrap font-normal text-black dark:text-white'>{asset.transfer_id}</Table.Cell>
-                      </Table.Row>
-                    )
-                  })}
-                </Table.Body>
-              </Table>
+        {selected === 'consumed' &&
+          <Accordion.Content className='bg-white max-h-80 overflow-y-clip'>
+            <ul className='divide-y'>
+              <div className='grid grid-cols-3 w-full'>
+                <Button className='col-start-2 bg-sedimark-deep-blue hover:bg-sedimark-light-blue shadow-lg text-white rounded focus:ring-0 mb-4'>
+                  <HiPlay size={24} className='mr-2' />
+                  Start transfer
+                </Button>
+              </div>
+              <div className='overflow-x-auto mt-2'>
+                <Table className='mt-4'>
+                  <Table.Head>
+                    {historyData.map((nameColumn, index) => {
+                      return (<Table.HeadCell className='bg-white p-0 pl-6' key={`${nameColumn}-${index}`}>{nameColumn}</Table.HeadCell>)
+                    })}
+                  </Table.Head>
+                  <Table.Body className='divide-y'>
+                    {history.map((asset, index) => {
+                      return (
+                        <Table.Row className='bg-white dark:border-gray-700 dark:bg-gray-800' key={`${asset.asset}-${index}`}>
+                          {asset.status === 'Completed' &&
+                            <Table.Cell className='max-w-fit'>
+                              <HiCheck size={20} />
+                            </Table.Cell>}
+                          {asset.status === 'In progress' &&
+                            <Table.Cell className='max-w-fit'>
+                              <HiDotsHorizontal size={20} />
+                            </Table.Cell>}
+                          {asset.status === 'Failed' &&
+                            <Table.Cell className='max-w-fit'>
+                              <HiExclamationCircle size={20} />
+                            </Table.Cell>}
+                          <Table.Cell className='whitespace-nowrap font-normal text-black dark:text-white'>{asset.status}</Table.Cell>
+                          <Table.Cell className='whitespace-nowrap font-normal text-black dark:text-white'>{asset.date}</Table.Cell>
+                          <Table.Cell className='whitespace-nowrap font-normal text-black dark:text-white'>{asset.transfer_id}</Table.Cell>
+                        </Table.Row>
+                      )
+                    })}
+                  </Table.Body>
+                </Table>
+              </div>
+            </ul>
+          </Accordion.Content>}
+        {selected === 'provided' &&
+          <Accordion.Content className='bg-white max-h-80 overflow-y-clip'>
+            <div>
+              <h4 className='font-bold'>Policy constraints:</h4>
+              <ul>
+                <li className='text-sm mt-2 ml-4 list-disc'>{policyConstrains.policyName} : {policyConstrains.period.startDate.split('T')[0]} to {policyConstrains.period.endDate.split('T')[0]}</li>
+              </ul>
             </div>
-          </ul>
-        </Accordion.Content>
+          </Accordion.Content>}
       </Accordion.Panel>
     </Accordion>
   )

src/app/dashboard/contracts/components/Contracts.jsx

@@ -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) {
@@ -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>
@@ -46,6 +47,7 @@ function Contracts ({ data }) {
               vc={contract}
               price={contract.price}
               key={`${contract.title}-${contract.created_at}-${index + 1}`}
+              selected={selected}
             />
           )
         })}

src/app/dashboard/page.js

@@ -0,0 +1,7 @@
+import Dashboard from './components/Dashboard'
+
+export default function Page () {
+  return (
+    <Dashboard />
+  )
+}

src/utils/data/mockContract.json

@@ -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",
@@ -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",

src/utils/settings.js

@@ -12,8 +12,8 @@
  */
 const settings = {
   batchSize: process.env.BATCH_SIZE ?? 40,
-  contractsPageSize: process.env.CONTRACTS_PAGE_SIZE ?? 5,
-  }
+  contractsPageSize: process.env.CONTRACTS_PAGE_SIZE ?? 5
+}
 Object.freeze(settings)
 
 export default settings

tailwind.config.js

@@ -17,7 +17,7 @@ module.exports = {
           DEFAULT: '#32567A'
         },
         'sedimark-light-blue': {
-          DEFAULT: '#EBF5FF'
+          DEFAULT: '##EBF5FF'
         },
         'sedimark-light-gray': {
           DEFAULT: '#E5E7EB'