diff --git a/apps/releaf/mobile/package.json b/apps/releaf/mobile/package.json
index ee0ec82..3a1f9a0 100644
--- a/apps/releaf/mobile/package.json
+++ b/apps/releaf/mobile/package.json
@@ -11,6 +11,7 @@
"@react-navigation/bottom-tabs": "^6.5.20",
"@react-navigation/native": "^6.1.17",
"@react-navigation/native-stack": "^6.9.26",
+ "date-fns": "^3.6.0",
"metro-config": "^0.80.3",
"nativewind": "^2.0.11",
"react": "18.2.0",
@@ -18,6 +19,7 @@
"react-native": "^0.73.2",
"react-native-date-picker": "^5.0.2",
"react-native-gesture-handler": "^2.16.1",
+ "react-native-heroicons": "^4.0.0",
"react-native-safe-area-context": "^4.10.1",
"react-native-screens": "^3.31.1",
"react-native-svg": "^14.1.0",
diff --git a/apps/releaf/mobile/src/app/box/Box.tsx b/apps/releaf/mobile/src/app/box/Box.tsx
index 5d8e987..0146b48 100644
--- a/apps/releaf/mobile/src/app/box/Box.tsx
+++ b/apps/releaf/mobile/src/app/box/Box.tsx
@@ -1,11 +1,11 @@
-import { View, Text, ScrollView, StyleSheet, FlatList } from 'react-native';
+import { View, Text, ScrollView, StyleSheet } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { TreeStateCard } from './components/TreeStateCard';
import { useCallback, useEffect, useState } from 'react';
import { Loading } from '../shared/Loading';
+import { BoxDetailsScreen } from './screens/BoxDetails';
import { BoxService } from '../infrastructure/services/box.service';
-import { BoxDetails } from '../infrastructure/entities/boxDetails';
const styles = StyleSheet.create({
title: {
@@ -31,7 +31,16 @@ export const Box = () => {
component={BoxScreen}
options={{ headerShown: false }}
/>
-
+
+
);
};
@@ -97,79 +106,3 @@ function BoxScreen({ navigation }) {
);
}
-
-function BoxDetailsScreen({ route, navigation }) {
- const { id } = route.params;
-
- const boxService = new BoxService();
-
- const [isLoading, setIsLoading] = useState(true);
- const [boxDetails, setBoxDetails] = useState(null);
-
- const fetchBoxes = useCallback(async () => {
- setIsLoading(true);
- try {
- const boxDetails: BoxDetails = await boxService.get(id);
- setBoxDetails(boxDetails);
- } catch (error) {
- console.error(error);
- }
- setIsLoading(false);
- }, []);
-
- useEffect((): void => {
- void fetchBoxes();
- }, [fetchBoxes]);
-
- if (isLoading) {
- return ;
- }
-
- return (
-
-
- Details Screen {boxDetails?.growthInfo?.seedsAverageInchHeight ?? -1}
-
-
- Seeds:
- }
- keyExtractor={(item) => item.name}
- />
-
-
-
-
- {boxDetails?.vitals?.temperature?.value ?? -1}
-
- temperature
-
-
-
- {boxDetails?.vitals?.soilMoisturePercent?.value ?? -1}
-
- soilMoisturePercent
-
-
-
- {boxDetails?.vitals?.luminosityPercent?.value ?? -1}
-
- luminosityPercent
-
-
-
- );
-}
-
-function SeedDisplay({ seed }) {
- return (
-
- {seed.name}
-
- );
-}
diff --git a/apps/releaf/mobile/src/app/box/screens/BoxDetails.tsx b/apps/releaf/mobile/src/app/box/screens/BoxDetails.tsx
new file mode 100644
index 0000000..08e85da
--- /dev/null
+++ b/apps/releaf/mobile/src/app/box/screens/BoxDetails.tsx
@@ -0,0 +1,162 @@
+import {
+ View,
+ Text,
+ TextInput,
+ ScrollView,
+ Button,
+ TouchableOpacity,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useCallback, useEffect, useState } from 'react';
+import { Loading } from '../../shared/Loading';
+import { BoxService } from '../../infrastructure/services/box.service';
+import { BoxDetails } from '../../infrastructure/entities/boxDetails';
+import { styled } from 'nativewind';
+import { differenceInDays, format } from 'date-fns';
+import { CalendarIcon } from 'react-native-heroicons/outline';
+import DatePicker from 'react-native-date-picker';
+
+const SSafeAreaView = styled(SafeAreaView);
+const SText = styled(Text);
+const SView = styled(View);
+const SCalendarIcon = styled(CalendarIcon);
+const STextInput = styled(TextInput);
+const SButton = styled(Button);
+const STouchableOpacity = styled(TouchableOpacity);
+
+export function BoxDetailsScreen({ route, navigation }) {
+ const { id } = route.params;
+
+ const [date, setDate] = useState(new Date());
+ const [open, setOpen] = useState(false);
+
+ const boxService = new BoxService();
+
+ const [isLoading, setIsLoading] = useState(true);
+ const [boxDetails, setBoxDetails] = useState(null);
+
+ const fetchBoxes = useCallback(async () => {
+ setIsLoading(true);
+ try {
+ const boxDetails: BoxDetails = await boxService.get(id);
+ setBoxDetails(boxDetails);
+ } catch (error) {
+ console.error(error);
+ }
+ setIsLoading(false);
+ }, []);
+
+ useEffect((): void => {
+ void fetchBoxes();
+ }, [fetchBoxes]);
+
+ if (isLoading) {
+ return ;
+ }
+
+ const save = () => {
+ console.log('save');
+ };
+
+ return (
+
+
+
+ Box ID: {id}
+
+ Tree Specie: {boxDetails.treeDefinitionId.value}
+
+
+ Number:
+ 20
+
+
+ Device ID:
+ Genparker xxxxx
+
+
+
+
+
+
+
+ {
+ setOpen(true);
+ }}
+ >
+
+ Germination Day
+
+
+
+
+ {format(date, 'dd-MMM-yyyy')}
+
+
+
+
+
+
+
+
+
+
+
+ Age: {differenceInDays(new Date(), date)} days
+
+
+ The age of your saplings is calculated based on the germination
+ date.
+
+
+
+
+
+ Average Height (Inch)
+
+
+
+
+
+
+
+
+ Save
+
+
+ navigation.goBack()}
+ >
+
+
+ Cancel
+
+
+
+
+
+ {
+ if (date <= new Date()) {
+ setDate(date);
+ }
+ setOpen(false);
+ }}
+ onCancel={() => {
+ setOpen(false);
+ }}
+ />
+
+
+ );
+}
diff --git a/apps/releaf/mobile/src/app/infrastructure/entities/boxDetails.ts b/apps/releaf/mobile/src/app/infrastructure/entities/boxDetails.ts
index 0803100..47dbf5c 100644
--- a/apps/releaf/mobile/src/app/infrastructure/entities/boxDetails.ts
+++ b/apps/releaf/mobile/src/app/infrastructure/entities/boxDetails.ts
@@ -1,9 +1,11 @@
import { GrowthInfo } from "./growthInfo";
import { Seed } from "./seed";
+import { StringValue } from "./stringValue";
import { Vitals } from "./vital";
export interface BoxDetails {
- id: string;
+ id: StringValue;
+ treeDefinitionId: StringValue;
growthInfo: GrowthInfo;
seeds: Seed[];
vitals: Vitals;
diff --git a/apps/releaf/mobile/src/app/infrastructure/entities/stringValue.ts b/apps/releaf/mobile/src/app/infrastructure/entities/stringValue.ts
new file mode 100644
index 0000000..5c5abd4
--- /dev/null
+++ b/apps/releaf/mobile/src/app/infrastructure/entities/stringValue.ts
@@ -0,0 +1,5 @@
+
+
+export interface StringValue {
+ value: string;
+}
\ No newline at end of file
diff --git a/apps/releaf/mobile/tailwind.config.js b/apps/releaf/mobile/tailwind.config.js
index 52ee142..ec36c16 100644
--- a/apps/releaf/mobile/tailwind.config.js
+++ b/apps/releaf/mobile/tailwind.config.js
@@ -21,7 +21,8 @@ module.exports = {
700: "#009959",
900: "#2C4E3C",
},
- orange: "#F28300"
+ orange: "#F28300",
+ black: "#000000",
}
},
borderRadius: {