feat(open-spark): ui for open spark

1. ui implementation for dashboard app
2. ui implementation for date range component
3. ui implemenattion for buying prefference page
4. ui implenatation for myders page

apps/open-spark/components/currentTrade/CurrentTrade.tsx

@@ -0,0 +1,27 @@
+import { Input } from '@beckn-ui/molecules'
+import { Flex } from '@chakra-ui/react'
+import React from 'react'
+
+const CurrentTrade = ({ mockData }) => {
+  return (
+    <Flex
+      justifyContent="space-between"
+      alignItems="center"
+      columnGap={'20px'}
+    >
+      {mockData.map((item, index) => (
+        <Input
+          value={item.value}
+          key={index}
+          type="text"
+          handleChange={() => {
+            console.log(`${item.label} changed`)
+          }}
+          label={`${item.label}`}
+        />
+      ))}
+    </Flex>
+  )
+}
+
+export default CurrentTrade

apps/open-spark/components/currentTrade/EmptyCurrentTrade.tsx

@@ -0,0 +1,33 @@
+import { Typography } from '@beckn-ui/molecules'
+import BecknButton from '@beckn-ui/molecules/src/components/button'
+import { Box, Flex, Image } from '@chakra-ui/react'
+import React from 'react'
+import { Type } from 'react-toastify/dist/utils'
+
+const EmptyCurrentTrade = () => {
+  return (
+    <Flex
+      flexDir={'column'}
+      rowGap={'15px'}
+      mt={'20px'}
+    >
+      <Box>
+        <Image src="/images/emptyCurrentTrade.svg" />
+      </Box>
+      <Typography
+        text="No Trades Found!!"
+        fontSize="15px"
+        fontWeight="600"
+        sx={{ textAlign: 'center' }}
+      />
+      <Typography
+        text="Click on “Buy” to purchase energy"
+        fontSize="15px"
+        fontWeight="400"
+        sx={{ textAlign: 'center' }}
+      />
+    </Flex>
+  )
+}
+
+export default EmptyCurrentTrade

apps/open-spark/components/dateRangePicker/CustomeDateInput.tsx

@@ -0,0 +1,79 @@
+import { InputGroup, Input, InputRightElement, Box, Icon, FormLabel } from '@chakra-ui/react'
+import { FiCalendar } from 'react-icons/fi'
+import React from 'react'
+
+interface CustomeDateInputProps {
+  startDate: string
+  endDate: string
+  onCalendarClick: () => void
+}
+
+const CustomeDateInput = (props: CustomeDateInputProps) => {
+  const { startDate, endDate, onCalendarClick } = props
+  return (
+    <Box
+      width="300px"
+      position="relative"
+      mt={'2 px'}
+    >
+      <FormLabel
+        mb="8px"
+        display="block"
+        position="absolute"
+        zIndex={1}
+        top="11px"
+        pointerEvents="none"
+        color="#333"
+        transition="0.2s ease all"
+        sx={{
+          '&.floating': {
+            top: '-8px',
+            fontSize: '12px',
+            fontWeight: 500,
+            color: '#000000'
+          }
+        }}
+        className={startDate || endDate ? 'floating' : ''}
+      >
+        Select a Date
+      </FormLabel>
+      <InputGroup>
+        <Input
+          value={`${startDate || ''} - ${endDate || ''}`}
+          placeholder="Start Date - End Date"
+          readOnly
+          sx={{
+            fontSize: '15px',
+            display: 'block',
+            padding: '15px 0 0 0',
+            width: '100%',
+            height: '36px',
+            background: '#fff',
+            border: 'none',
+            borderBottom: '1px solid #BFBFBF',
+            boxSizing: 'border-box',
+            borderRadius: 'none',
+            _focus: {
+              outline: 'none',
+              borderBottom: '1px solid #4498E8'
+            }
+          }}
+        />
+        <InputRightElement
+          cursor="pointer"
+          onClick={onCalendarClick}
+          height="36px"
+          mt={'5px'}
+        >
+          <Icon
+            as={FiCalendar}
+            boxSize="20px"
+            color="#4498E8"
+          />
+        </InputRightElement>
+      </InputGroup>
+    </Box>
+  )
+}
+
+export default CustomeDateInput