Add calendar filter

src/pages/Dashboard/DeviceUptime/DeviceUptime.tsx

@@ -1,7 +1,10 @@
-import { Shadow, Text } from '@status-im/components';
+import { Calendar, Shadow, Text } from '@status-im/components';
 import { Stack, XStack, YStack } from 'tamagui';
 import UptimeChart from '../UptimeChart/UptimeChart';
 import Icon from '../../../components/General/Icon';
+import { useState } from 'react';
+import { DateRange } from 'react-day-picker'
+import { getMonthIndicesFromRange } from '../../../utilities';
 
 const data: DataItem[] = [
 
@@ -71,7 +74,26 @@ interface DataItem {
     pa: number;
     pv: number;
 }
+
 const DeviceUptime = () => {
+    const [isCalendarVisible, setIsCalendarVisible] = useState(false)
+    const [dateRange, setDateRange] = useState<DateRange>({ from: undefined, to: undefined })
+    const [startMonth, endMonth] = getMonthIndicesFromRange(dateRange)
+    
+    const handleRangeSelect = (
+        range: DateRange | undefined,
+        // @NOTE: You can take selectedDay: Date,
+    ) => {
+        if (!range) {
+            setDateRange({ from: undefined, to: undefined })
+            return
+        }
+        setDateRange(range)
+        if (range.from && range.to) {
+            setIsCalendarVisible(false)
+        }
+    }
+
     return (
         <Shadow
             variant="$2"
@@ -80,14 +102,56 @@ const DeviceUptime = () => {
             }}
         >
             <YStack space={'$3'} width={'560px'} height={'156px'} padding={'$3'}>
-                <YStack>
+                <XStack justifyContent={'space-between'}>
-                    <Text size={15} weight={'semibold'}> Device Uptime</Text>
+                    <YStack>
-                    <XStack style={{ alignItems: 'end', }} space={'$2'} >
+                        <Text size={15} weight={'semibold'}>
-                        <Text size={27} weight={'semibold'}>98%</Text>
+                            Balance
-                        <Icon src='/icons/positive.svg' width={13}></Icon>
+                        </Text>
-                        <Text size={13} color="#E95460" >1.56%</Text>
+                        <XStack
+                            style={{ alignItems: 'end' }}
+                            space={'$1'}
+                            onClick={() => setIsCalendarVisible(true)}
+                        >
+                            <Text size={27} weight={'semibold'}>
+                                24,273
+                            </Text>
+                            <Text size={11} color="#23ADA0">
+                                1.56%
+                            </Text>
+                        </XStack>
+                    </YStack>
+                    <XStack
+                        onClick={() => setIsCalendarVisible(prev => !prev)}
+                        style={{
+                            border: '2px solid #09101C14',
+                            height: 'fit-content',
+                            padding: '3px',
+                            borderRadius: '10px',
+                        }}
+                    >
+                        <Text size={13} weight={'semibold'}>
+                            {dateRange?.from ? dateRange.from.toLocaleDateString() + '  ->' : 'Start Date -> '}{' '}
+                        </Text>
+                        <Text size={13} weight={'semibold'}>
+                            {dateRange?.to ? dateRange.to.toLocaleDateString() : ' End Date'}
+                        </Text>
+                        <Icon src="/icons/edit.svg" />
                     </XStack>
-                </YStack>
+                    {isCalendarVisible && (
+                        <Calendar
+                            style={{
+                                backgroundColor: 'white',
+                                position: 'absolute',
+                                zIndex: 1000,
+                                top: '100%',
+                                right: '0',
+                            }}
+                            mode="range"
+                            selected={dateRange}
+                            onSelect={handleRangeSelect}
+                        />
+                    )}
+                </XStack>
                 <XStack height={'50%'} justifyContent="center" alignItems="center">
                     <Stack style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '504px', height: '100%' }}>
                         <UptimeChart data={data} />