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.

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

fix(open-spark): fix styling in comp in dashboard, trade, my der page #2769

Merged
merged 1 commit into from
Dec 14, 2024
Merged

fix(open-spark): fix styling in comp in dashboard, trade, my der page #2769

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
17 changes: 14 additions & 3 deletions apps/open-spark/components/energyPurchaseForm/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
VStack
} from '@chakra-ui/react'
import { QuestionOutlineIcon } from '@chakra-ui/icons'
import React, { useState } from 'react'
import React, { useEffect, useState } from 'react'
import { FaMinus, FaPlus } from 'react-icons/fa6'
import BecknButton from '@beckn-ui/molecules/src/components/button/Button'
import axios from 'axios'
Expand Down Expand Up @@ -49,10 +49,21 @@ export default function EnergyPurchaseForm({ preferenceType }: EnergyPurchaseFor
const bearerToken = Cookies.get('authToken') || ''
const router = useRouter()

const [energyUnits, setEnergyUnits] = useState(0)
const [pricePerUnit, setPricePerUnit] = useState(0)
const [tradeId, setTradeId] = useState<string>()
const [energyUnits, setEnergyUnits] = useState<number>(0)
const [pricePerUnit, setPricePerUnit] = useState<number>(0)
const [preferences, setPreferences] = useState({ solar: false, trustedSource: false })

useEffect(() => {
const { tradeId, quantity, price, preferencesTags } = router.query
if (tradeId && quantity && price) {
setTradeId(tradeId as string)
setEnergyUnits(Number(quantity))
setPricePerUnit(Number(price))
setPreferences(JSON.parse(preferencesTags as any))
}
}, [])

const handleInputChange = (setter: React.Dispatch<React.SetStateAction<number>>, value: number) =>
setter(Math.max(0, value))

Expand Down
150 changes: 84 additions & 66 deletions apps/open-spark/pages/dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -268,23 +268,38 @@ const Dashboard = () => {
>
<HStack>
<Typography
text="Current Trade"
text={role === ROLE.PRODUCER ? 'My Preferences' : 'Current Trade'}
fontSize="15"
fontWeight="600"
/>
<QuestionOutlineIcon />
</HStack>
{currentTradeData.length < 0 ? (
{currentTradeData.length === 0 ? (
<></>
) : (
<LiaPenSolid
onClick={() => router.push(role === ROLE.PRODUCER ? '/sellingPreference' : '/buyingPreference')}
onClick={() =>
router.push({
pathname: role === ROLE.PRODUCER ? '/sellingPreference' : '/buyingPreference',
query: {
tradeId: currentTradeData[0]?.id,
quantity: currentTradeData[0].quantity,
price: currentTradeData[0].price,
preferencesTags: JSON.stringify({
solar: preferencesTags.includes('Solar Energy'),
trustedSource: preferencesTags.includes('Trusted Source')
})
}
})
}
/>
)}
</Flex>
{currentTradeData.length < 0 ? (
<EmptyCurrentTrade />
) : (
</Box>
{currentTradeData.length === 0 ? (
<EmptyCurrentTrade />
) : (
<>
<CurrentTrade
data={[
{
Expand All @@ -303,73 +318,76 @@ const Dashboard = () => {
}
]}
/>
)}
</Box>
{preferencesTags.length > 0 && (
<Box>
<Typography
text="Preferences"
fontSize="14px"
fontWeight="600"
sx={{ marginBottom: '10px' }}
/>
<Flex
gap={'10px'}
flexWrap={'wrap'}
>
{preferencesTags.map((tag, index) => (
<Tag
key={index}
borderRadius="md"
variant="outline"
colorScheme="gray"
padding={'4px 8px'}
>
<TagLabel>{tag}</TagLabel>
{/* <TagCloseButton onClick={() => handleRemoveTag(tag)} /> */}
</Tag>
))}
</Flex>
</Box>
)}
{role !== ROLE.PRODUCER && (
<Box mt={'10px'}>
<DetailCard>
<Flex
justifyContent={'space-between'}
alignItems={'center'}
mb={'20px'}
>

{preferencesTags.length > 0 && (
<Box>
<Typography
text="Current Status"
text="Preferences"
fontSize="14px"
fontWeight="600"
sx={{ marginBottom: '10px' }}
/>
<Typography
text={latestStatus?.status === 'RECEIVED' ? 'Pending' : 'Completed'}
fontSize="12px"
fontWeight="600"
color={latestStatus?.status === 'RECEIVED' ? '#BD942B' : '#5EC401'}
/>
</Flex>
<Divider />
<Box mt={'10px'}>
{currentStatusData.length > 0 ? (
currentStatusData.map((data, index) => (
<OrderStatusProgress
<Flex
gap={'10px'}
flexWrap={'wrap'}
>
{preferencesTags.map((tag, index) => (
<Tag
key={index}
label={data.label}
statusTime={data.statusTime!}
noLine={data.noLine}
lastElement={data.lastElement}
borderRadius="md"
variant="outline"
colorScheme="gray"
padding={'4px 8px'}
>
<TagLabel>{tag}</TagLabel>
{/* <TagCloseButton onClick={() => handleRemoveTag(tag)} /> */}
</Tag>
))}
</Flex>
</Box>
)}
{role !== ROLE.PRODUCER && (
<Box mt={'10px'}>
<DetailCard>
<Flex
justifyContent={'space-between'}
alignItems={'center'}
mb={'20px'}
>
<Typography
text="Current Status"
fontSize="14px"
fontWeight="600"
/>
))
) : (
<Text>No status updates available</Text>
)}
{latestStatus?.status && (
<Typography
text={latestStatus?.status === 'RECEIVED' ? 'Pending' : 'Completed'}
fontSize="12px"
fontWeight="600"
color={latestStatus?.status === 'RECEIVED' ? '#BD942B' : '#5EC401'}
/>
)}
</Flex>
<Divider />
<Box mt={'10px'}>
{currentStatusData.length > 0 ? (
currentStatusData.map((data, index) => (
<OrderStatusProgress
key={index}
label={data.label}
statusTime={data.statusTime!}
noLine={data.noLine}
lastElement={data.lastElement}
/>
))
) : (
<Text>No status updates available</Text>
)}
</Box>
</DetailCard>
</Box>
</DetailCard>
</Box>
)}
</>
)}
</Box>
<BecknButton
Expand Down
1 change: 1 addition & 0 deletions apps/open-spark/pages/myDers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ const MyDers = () => {
return (
<Box
maxWidth={{ base: '100vw', md: '30rem', lg: '40rem' }}
margin="calc(0rem + 0px) auto auto auto"
backgroundColor="white"
>
<DeviceList
Expand Down
6 changes: 3 additions & 3 deletions apps/open-spark/pages/tradeDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,8 +88,8 @@ const TradeDetails = () => {
flexDirection={'column'}
>
<Typography
text={`Date: ${formatDate(tradeDetails?.date!, 'dd/mm/yyyy')}`}
fontSize="15px"
text={`Date: ${formatDate(tradeDetails?.date!, 'dd/MM/yyyy')}`}
fontSize="16px"
fontWeight="500"
/>
<CurrentTrade
Expand Down Expand Up @@ -168,7 +168,7 @@ const TradeDetails = () => {
)}
</Flex>
</Flex>
<Box marginTop={'1rem'}>
<Box padding={'1rem 0.5rem'}>
<Accordion
accordionHeader={'History'}
isDisabled={true}
Expand Down