Skip to content

Commit

Permalink
Update contractItem policy rendering
Browse files Browse the repository at this point in the history
  • Loading branch information
@NaryLozano
NaryLozano committed Jan 21, 2025
1 parent 11040f6 commit 892179b
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 61 deletions.
114 changes: 54 additions & 60 deletions src/app/dashboard/contracts/components/ContractItem.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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, selected }) {
function ContractItem ({ vc, price }) {
const maxLengthTitle = 70
const maxLengthDescription = 120
const name = vc.title.length > maxLengthTitle ? vc.title.substring(0, maxLengthTitle) + '...' : vc.title
Expand All @@ -16,14 +16,6 @@ function ContractItem ({ vc, price, selected }) {
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'>
Expand Down Expand Up @@ -53,58 +45,60 @@ function ContractItem ({ vc, price, selected }) {
</div>
</div>
</Accordion.Title>
{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>
<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>
</Accordion.Content>}
<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>
{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
1 change: 0 additions & 1 deletion src/app/dashboard/contracts/components/Contracts.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,6 @@ function Contracts ({ data }) {
vc={contract}
price={contract.price}
key={`${contract.title}-${contract.created_at}-${index + 1}`}
selected={selected}
/>
)
})}
Expand Down

0 comments on commit 892179b

Please sign in to comment.