screen gula done (might check with login)

screens/ScreenGula.js

@@ -1,21 +1,410 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import React, { useState, useRef, useEffect } from "react";
+import {
+  View,
+  Text,
+  Image,
+  StyleSheet,
+  TouchableOpacity,
+  Animated,
+  BackHandler,
+  FlatList,
+  ScrollView,
+  TextInput,
+} from "react-native";
+import axios from "axios";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import Container from "../components/Container";
+import CardRecord from "../components/CardRecord";
 
 const ScreenGula = ({ navigation }) => {
+  const [token, setToken] = useState(null);
+
+  const [profileId, setProfileId] = useState(null);
+  const [profileName, setProfileName] = useState(null);
+  const [profileSex, setProfileSex] = useState(null);
+  const [profileDob, setProfileDob] = useState(null);
+  const [profileAge, setProfileAge] = useState(null);
+
+  const [result, setResult] = useState(""); // Glucose level
+  const [unit, setUnit] = useState("mg/dL"); // Unit (mg/dL or mmol/L)
+  const [method, setMethod] = useState("CBG"); // Method (CBG, FBG, OGTT, etc.)
+  const [location, setLocation] = useState(""); // Test location
+  const [tool, setTool] = useState(""); // Device/tool used
+
+  const [recordList, setRecordList] = useState([]);
+
+  const getToken = async () => {
+    const savedToken = await AsyncStorage.getItem("auth_token");
+    if (savedToken !== null) {
+      setToken(savedToken);
+    } else {
+      //   navigation.navigate("Profile");
+    }
+  };
+
+  const HttpRequest = (url, body, conf, handle) => {
+    // string, object, object
+    axios
+      .post(url, body, conf)
+      .then((response) => {
+        handle(response.data);
+      })
+      .catch((error) => {
+        console.error("Terjadi kesalahan:", error.stack);
+      });
+  };
+
+  const handleProfileDetail = (data) => {
+    if (data.status === "success") {
+      setProfileId(data.data.id);
+      setProfileName(data.data.name);
+      setProfileSex(data.data.sex);
+      setProfileDob(data.data.dob);
+      if (data.data.dob !== null) {
+        const tanggalLahir = new Date(data.data.dob);
+        const today = new Date();
+        const umur = today.getFullYear() - tanggalLahir.getFullYear();
+        const bulanSekarang = today.getMonth() - tanggalLahir.getMonth();
+        let umurTerupdate;
+        if (
+          bulanSekarang < 0 ||
+          (bulanSekarang === 0 && today.getDate() < tanggalLahir.getDate())
+        ) {
+          umurTerupdate = umur - 1;
+        } else {
+          umurTerupdate = umur;
+        }
+        setProfileAge(umurTerupdate);
+      }
+    }
+  };
+
+  const fetchProfileDetail = async () => {
+    try {
+      const url = "https://uas.ditaajipratama.net/api/checkcare/profile/detail";
+      const body = {};
+      const auth_token = await AsyncStorage.getItem("auth_token");
+      const config = {
+        headers: {
+          Authorization: `Bearer ${auth_token}`,
+        },
+      };
+      console.log(`Bearer ${auth_token}`);
+      console.log(token);
+      if (auth_token !== null) {
+        HttpRequest(url, body, config, handleProfileDetail);
+      }
+    } catch (error) {
+      console.log(error.stack);
+    }
+  };
+
+  const quickResult = (result, unit, method) => {
+    var title = "Cek Gula Darah";
+    var message = "Masukkan hasil pemeriksaan gula darah";
+    var image = require("../img/thermometer.png"); // You'll change this
+    var category = "unknown";
+
+    const glucoseValue = parseFloat(result) || 0;
+
+    if (glucoseValue === 0) {
+      title = "Cek Gula Darah";
+      message = "Masukkan hasil pemeriksaan gula darah";
+      category = "input";
+    } else {
+      // Convert mmol/L to mg/dL if needed for consistent comparison
+      let glucoseInMgDl = glucoseValue;
+      if (unit === "mmol/L") {
+        glucoseInMgDl = glucoseValue * 18;
+      }
+
+      // Determine category based on method and glucose level
+      if (method === "FBG" || method === "Puasa") {
+        // Fasting Blood Glucose
+        if (glucoseInMgDl < 70) {
+          title = "Hipoglikemia";
+          message = "Gula darah rendah - Segera konsumsi makanan manis";
+          category = "low";
+        } else if (glucoseInMgDl >= 70 && glucoseInMgDl <= 100) {
+          title = "Gula Darah Normal";
+          message = "Gula darah puasa dalam batas normal";
+          category = "normal";
+        } else if (glucoseInMgDl >= 100 && glucoseInMgDl <= 125) {
+          title = "Prediabetes";
+          message = "Gula darah puasa sedikit tinggi - Perhatikan pola makan";
+          category = "prediabetes";
+        } else if (glucoseInMgDl >= 126) {
+          title = "Diabetes";
+          message = "Gula darah puasa tinggi - Konsultasi dengan dokter";
+          category = "diabetes";
+        }
+      } else {
+        // Random/Post-meal glucose
+        if (glucoseInMgDl < 70) {
+          title = "Hipoglikemia";
+          message = "Gula darah rendah - Segera konsumsi makanan manis";
+          category = "low";
+        } else if (glucoseInMgDl < 140) {
+          title = "Gula Darah Normal";
+          message = "Gula darah dalam batas normal";
+          category = "normal";
+        } else if (glucoseInMgDl >= 140 && glucoseInMgDl <= 199) {
+          title = "Prediabetes";
+          message = "Gula darah sedikit tinggi - Perhatikan pola makan";
+          category = "prediabetes";
+        } else if (glucoseInMgDl >= 200) {
+          title = "Diabetes";
+          message = "Gula darah tinggi - Konsultasi dengan dokter";
+          category = "diabetes";
+        }
+      }
+    }
+
+    return { title, message, image, category };
+  };
+
+  const reqRecordList = async () => {
+    try {
+      const url = "https://uas.ditaajipratama.net/api/checkcare/glucose/list";
+      const body = {};
+      const auth_token = await AsyncStorage.getItem("auth_token");
+      const config = {
+        headers: {
+          Authorization: `Bearer ${auth_token}`,
+        },
+      };
+      const handle = (data) => {
+        setRecordList(data);
+      };
+      if (auth_token !== null) {
+        HttpRequest(url, body, config, handle);
+      }
+    } catch (error) {
+      console.log(error.stack);
+    }
+  };
+
+  const reqAdd = async () => {
+    try {
+      const url = "https://uas.ditaajipratama.net/api/checkcare/glucose/add";
+      const body = {
+        result,
+        unit,
+        method,
+        location,
+        tool,
+      };
+      const auth_token = await AsyncStorage.getItem("auth_token");
+      const config = {
+        headers: {
+          Authorization: `Bearer ${auth_token}`,
+        },
+      };
+      const handle = (data) => {
+        reqRecordList();
+        setResult("");
+        setUnit("mg/dL");
+        setMethod("CBG");
+        setLocation("");
+        setTool("");
+      };
+      if (auth_token !== null) {
+        HttpRequest(url, body, config, handle);
+      }
+    } catch (error) {
+      console.log(error.stack);
+    }
+  };
+
+  const ListItem = ({ item }) => {
+    const quickRes = quickResult(item.result, item.unit, item.method);
     return (
-    <View style={styles.container}>
-      <Text>Ini halaman Cek Gula Darah</Text>
-      <StatusBar style="auto" />
-    </View>
+      <CardRecord key="{item.id}">
+        <Text style={styles.resultDate}>{item.when}</Text>
+        <Text style={styles.resultValue}>
+          {item.result} {item.unit} ({item.method})
+        </Text>
+        <Text style={[styles.resultStatus]}>{quickRes.title}</Text>
+      </CardRecord>
     );
-}
+  };
+
+  useEffect(() => {
+    getToken();
+    fetchProfileDetail();
+    reqRecordList();
+  }, []);
+
+  return (
+    <Container>
+      <View style={styles.headerRow}>
+        <View style={styles.illustrationContainer}>
+          <Image
+            source={quickResult(result, unit, method).image}
+            style={styles.illustration}
+            resizeMode="contain"
+          />
+        </View>
+        <View style={styles.textContainer}>
+          <Text style={styles.title}>
+            {quickResult(result, unit, method).title}
+          </Text>
+          <Text style={styles.datetime}>
+            {`Gula: ${result || 0} ${unit} (${method})`}
+          </Text>
+          <Text style={styles.description}>
+            {quickResult(result, unit, method).message}
+          </Text>
+        </View>
+      </View>
+
+      <View style={styles.inputColumn}>
+        <View style={styles.inputRow}>
+          <TextInput
+            style={styles.inputForm}
+            placeholder="Hasil (angka)"
+            placeholderTextColor="#888"
+            keyboardType="numeric"
+            onChangeText={(text) => setResult(text)}
+            value={result}
+          />
+          <TextInput
+            style={styles.inputForm}
+            placeholder="Unit"
+            placeholderTextColor="#888"
+            onChangeText={(text) => setUnit(text)}
+            value={unit}
+          />
+        </View>
+
+        <View style={styles.inputRow}>
+          <TextInput
+            style={styles.inputForm}
+            placeholder="Metode (CBG/FBG/OGTT)"
+            placeholderTextColor="#888"
+            onChangeText={(text) => setMethod(text)}
+            value={method}
+          />
+          <TextInput
+            style={styles.inputForm}
+            placeholder="Lokasi"
+            placeholderTextColor="#888"
+            onChangeText={(text) => setLocation(text)}
+            value={location}
+          />
+        </View>
+
+        <TextInput
+          style={styles.inputFormTool}
+          placeholder="Alat yang digunakan"
+          placeholderTextColor="#888"
+          onChangeText={(text) => setTool(text)}
+          value={tool}
+        />
+
+        <TouchableOpacity style={styles.inputButtonSubmit} onPress={reqAdd}>
+          <Text style={styles.submitText}>Submit</Text>
+        </TouchableOpacity>
+      </View>
+
+      <View style={{ flex: 2 }}>
+        <FlatList
+          data={recordList}
+          renderItem={({ item }) => <ListItem item={item} />}
+          keyExtractor={(item, index) => index.toString()}
+        />
+      </View>
+    </Container>
+  );
+};
 
 const styles = StyleSheet.create({
-  container: {
+  headerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  illustration: {
+    width: 100,
+    height: 100,
+  },
+  illustrationContainer: {
+    marginRight: 16,
+  },
+  textContainer: {
     flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: "bold",
+    color: "#111",
+  },
+  datetime: {
+    fontSize: 12,
+    color: "#444",
+    marginVertical: 4,
+  },
+  description: {
+    fontSize: 14,
+    color: "#333",
+    maxWidth: 320,
+    marginBottom: 16,
+  },
+  inputColumn: {
+    width: "100%",
+    marginBottom: 10,
+  },
+  inputRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    width: "100%",
+    marginBottom: 10,
+  },
+  inputForm: {
+    flex: 1,
+    borderWidth: 1,
+    borderColor: "#ccc",
+    borderRadius: 30,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    marginHorizontal: 6,
+    backgroundColor: "#fff",
+    color: "#333",
+  },
+  inputFormTool: {
+    borderWidth: 1,
+    borderColor: "#ccc",
+    borderRadius: 30,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    marginVertical: 6,
+    backgroundColor: "#fff",
+    color: "#333",
+  },
+  inputButtonSubmit: {
+    borderRadius: 30,
+    paddingVertical: 12,
+    marginVertical: 6,
+    backgroundColor: "#007bff",
+  },
+  submitText: {
+    textAlign: "center",
+    color: "#fff",
+    fontWeight: "600",
+  },
+  resultDate: {
+    flex: 1,
+    color: "#333",
+  },
+  resultValue: {
+    flex: 1,
+    textAlign: "center",
+    color: "#111",
+    fontWeight: "500",
+  },
+  resultStatus: {
+    flex: 1,
+    textAlign: "right",
+    fontWeight: "bold",
   },
 });
 

screens/ScreenPuasa.js

@@ -1,22 +1,349 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import React, { useState, useRef, useEffect } from "react";
+import {
+  View,
+  Text,
+  Image,
+  StyleSheet,
+  TouchableOpacity,
+  Animated,
+  BackHandler,
+  FlatList,
+  ScrollView,
+  TextInput,
+} from "react-native";
+import axios from "axios";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import Container from "../components/Container";
+import CardRecord from "../components/CardRecord";
 
-const ScreenPuasa = ({ navigation }) => {
+const ScreenFasting = ({ navigation }) => {
+  const [token, setToken] = useState(null);
+
+  const [profileId, setProfileId] = useState(null);
+  const [profileName, setProfileName] = useState(null);
+  const [profileSex, setProfileSex] = useState(null);
+  const [profileDob, setProfileDob] = useState(null);
+  const [profileAge, setProfileAge] = useState(null);
+
+  const [whenLastEat, setWhenLastEat] = useState(""); // YYYY-MM-DD HH:MM:SS
+  const [whenLastDrink, setWhenLastDrink] = useState(""); // YYYY-MM-DD HH:MM:SS
+
+  const [recordList, setRecordList] = useState([]);
+
+  const getToken = async () => {
+    const savedToken = await AsyncStorage.getItem("auth_token");
+    if (savedToken !== null) {
+      setToken(savedToken);
+    } else {
+      //   navigation.navigate("Profile");
+    }
+  };
+
+  const HttpRequest = (url, body, conf, handle) => {
+    // string, object, object
+    axios
+      .post(url, body, conf)
+      .then((response) => {
+        handle(response.data);
+      })
+      .catch((error) => {
+        console.error("Terjadi kesalahan:", error.stack);
+      });
+  };
+
+  const handleProfileDetail = (data) => {
+    if (data.status === "success") {
+      setProfileId(data.data.id);
+      setProfileName(data.data.name);
+      setProfileSex(data.data.sex);
+      setProfileDob(data.data.dob);
+      if (data.data.dob !== null) {
+        const tanggalLahir = new Date(data.data.dob);
+        const today = new Date();
+        const umur = today.getFullYear() - tanggalLahir.getFullYear();
+        const bulanSekarang = today.getMonth() - tanggalLahir.getMonth();
+        let umurTerupdate;
+        if (
+          bulanSekarang < 0 ||
+          (bulanSekarang === 0 && today.getDate() < tanggalLahir.getDate())
+        ) {
+          umurTerupdate = umur - 1;
+        } else {
+          umurTerupdate = umur;
+        }
+        setProfileAge(umurTerupdate);
+      }
+    }
+  };
+
+  const fetchProfileDetail = async () => {
+    try {
+      const url = "https://uas.ditaajipratama.net/api/checkcare/profile/detail";
+      const body = {};
+      const auth_token = await AsyncStorage.getItem("auth_token");
+      const config = {
+        headers: {
+          Authorization: `Bearer ${auth_token}`,
+        },
+      };
+      console.log(`Bearer ${auth_token}`);
+      console.log(token);
+      if (auth_token !== null) {
+        HttpRequest(url, body, config, handleProfileDetail);
+      }
+    } catch (error) {
+      console.log(error.stack);
+    }
+  };
+
+  const calculateFastingDuration = (lastEatTime, lastDrinkTime) => {
+    if (!lastEatTime && !lastDrinkTime) return 0;
+
+    const now = new Date();
+    const lastEat = lastEatTime ? new Date(lastEatTime) : null;
+    const lastDrink = lastDrinkTime ? new Date(lastDrinkTime) : null;
+
+    // Use the more recent time (shorter fasting period)
+    let lastIntake = null;
+    if (lastEat && lastDrink) {
+      lastIntake = lastEat > lastDrink ? lastEat : lastDrink;
+    } else if (lastEat) {
+      lastIntake = lastEat;
+    } else if (lastDrink) {
+      lastIntake = lastDrink;
+    }
+
+    if (!lastIntake) return 0;
+
+    const diffMs = now - lastIntake;
+    const diffHours = diffMs / (1000 * 60 * 60);
+    return Math.max(0, diffHours);
+  };
+
+  const quickResult = (whenLastEat, whenLastDrink) => {
+    var title = "Cek Puasa";
+    var message = "Masukkan waktu makan dan minum terakhir";
+    var image = require("../assets/illustration/menu/medicine.png"); // You'll change this
+
+    const fastingHours = calculateFastingDuration(whenLastEat, whenLastDrink);
+
+    if (fastingHours === 0) {
+      title = "Cek Puasa";
+      message = "Masukkan waktu makan dan minum terakhir";
+    } else if (fastingHours < 12) {
+      title = "Puasa Pendek";
+      message = `Anda telah berpuasa selama ${fastingHours.toFixed(1)} jam`;
+    } else if (fastingHours >= 12 && fastingHours < 16) {
+      title = "Intermittent Fasting";
+      message = `Anda telah berpuasa selama ${fastingHours.toFixed(1)} jam`;
+    } else if (fastingHours >= 16 && fastingHours < 24) {
+      title = "Extended Fasting";
+      message = `Anda telah berpuasa selama ${fastingHours.toFixed(1)} jam`;
+    } else {
+      title = "Puasa Panjang";
+      message = `Anda telah berpuasa selama ${fastingHours.toFixed(
+        1
+      )} jam - Konsultasi dengan dokter`;
+    }
+
+    return { title, message, image, fastingHours };
+  };
+
+  const reqRecordList = async () => {
+    try {
+      const url = "https://uas.ditaajipratama.net/api/checkcare/fasting/list";
+      const body = {};
+      const auth_token = await AsyncStorage.getItem("auth_token");
+      const config = {
+        headers: {
+          Authorization: `Bearer ${auth_token}`,
+        },
+      };
+      const handle = (data) => {
+        setRecordList(data);
+      };
+      if (auth_token !== null) {
+        HttpRequest(url, body, config, handle);
+      }
+    } catch (error) {
+      console.log(error.stack);
+    }
+  };
+
+  const reqAdd = async () => {
+    try {
+      const url = "https://uas.ditaajipratama.net/api/checkcare/fasting/add";
+      const body = {
+        when_last_eat: whenLastEat,
+        when_last_drink: whenLastDrink,
+      };
+      const auth_token = await AsyncStorage.getItem("auth_token");
+      const config = {
+        headers: {
+          Authorization: `Bearer ${auth_token}`,
+        },
+      };
+      const handle = (data) => {
+        reqRecordList();
+        setWhenLastEat("");
+        setWhenLastDrink("");
+      };
+      if (auth_token !== null) {
+        HttpRequest(url, body, config, handle);
+      }
+    } catch (error) {
+      console.log(error.stack);
+    }
+  };
+
+  const ListItem = ({ item }) => {
+    const result = quickResult(item.when_last_eat, item.when_last_drink);
     return (
-    <View style={styles.container}>
-      <Text>Ini halaman Puasa</Text>
-      <StatusBar style="auto" />
-    </View>
+      <CardRecord key="{item.id}">
+        <Text style={styles.resultDate}>{item.when}</Text>
+        <Text style={styles.resultValue}>
+          Puasa: {result.fastingHours.toFixed(1)} jam
+        </Text>
+        <Text style={[styles.resultStatus]}>{result.title}</Text>
+      </CardRecord>
     );
-}
+  };
+
+  useEffect(() => {
+    getToken();
+    fetchProfileDetail();
+    reqRecordList();
+  }, []);
+
+  return (
+    <Container>
+      <View style={styles.headerRow}>
+        <View style={styles.illustrationContainer}>
+          <Image
+            source={quickResult(whenLastEat, whenLastDrink).image}
+            style={styles.illustration}
+            resizeMode="contain"
+          />
+        </View>
+        <View style={styles.textContainer}>
+          <Text style={styles.title}>
+            {quickResult(whenLastEat, whenLastDrink).title}
+          </Text>
+          <Text style={styles.datetime}>
+            {`Durasi: ${quickResult(
+              whenLastEat,
+              whenLastDrink
+            ).fastingHours.toFixed(1)} jam`}
+          </Text>
+          <Text style={styles.description}>
+            {quickResult(whenLastEat, whenLastDrink).message}
+          </Text>
+        </View>
+      </View>
+
+      <View style={styles.inputColumn}>
+        <TextInput
+          style={styles.inputForm}
+          placeholder="Makan terakhir (YYYY-MM-DD HH:MM:SS)"
+          placeholderTextColor="#888"
+          onChangeText={(text) => setWhenLastEat(text)}
+          value={whenLastEat}
+        />
+        <TextInput
+          style={styles.inputForm}
+          placeholder="Minum terakhir (YYYY-MM-DD HH:MM:SS)"
+          placeholderTextColor="#888"
+          onChangeText={(text) => setWhenLastDrink(text)}
+          value={whenLastDrink}
+        />
+
+        <TouchableOpacity style={styles.inputButtonSubmit} onPress={reqAdd}>
+          <Text style={styles.submitText}>Submit</Text>
+        </TouchableOpacity>
+      </View>
+
+      <View style={{ flex: 2 }}>
+        <FlatList
+          data={recordList}
+          renderItem={({ item }) => <ListItem item={item} />}
+          keyExtractor={(item, index) => index.toString()}
+        />
+      </View>
+    </Container>
+  );
+};
 
 const styles = StyleSheet.create({
-  container: {
+  headerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  illustration: {
+    width: 100,
+    height: 100,
+  },
+  illustrationContainer: {
+    marginRight: 16,
+  },
+  textContainer: {
     flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: "bold",
+    color: "#111",
+  },
+  datetime: {
+    fontSize: 12,
+    color: "#444",
+    marginVertical: 4,
+  },
+  description: {
+    fontSize: 14,
+    color: "#333",
+    maxWidth: 320,
+    marginBottom: 16,
+  },
+  inputColumn: {
+    width: "100%",
+    marginBottom: 10,
+  },
+  inputForm: {
+    borderWidth: 1,
+    borderColor: "#ccc",
+    borderRadius: 30,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    marginVertical: 6,
+    backgroundColor: "#fff",
+    color: "#333",
+  },
+  inputButtonSubmit: {
+    borderRadius: 30,
+    paddingVertical: 12,
+    marginVertical: 6,
+    backgroundColor: "#007bff",
+  },
+  submitText: {
+    textAlign: "center",
+    color: "#fff",
+    fontWeight: "600",
+  },
+  resultDate: {
+    flex: 1,
+    color: "#333",
+  },
+  resultValue: {
+    flex: 1,
+    textAlign: "center",
+    color: "#111",
+    fontWeight: "500",
+  },
+  resultStatus: {
+    flex: 1,
+    textAlign: "right",
+    fontWeight: "bold",
   },
 });
 
-export default ScreenPuasa;
+export default ScreenFasting;

screens/ScreenTensi.js

@@ -1,21 +1,392 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import React, { useState, useRef, useEffect } from "react";
+import {
+  View,
+  Text,
+  Image,
+  StyleSheet,
+  TouchableOpacity,
+  Animated,
+  BackHandler,
+  FlatList,
+  ScrollView,
+  TextInput,
+} from "react-native";
+import axios from "axios";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import Container from "../components/Container";
+import CardRecord from "../components/CardRecord";
 
 const ScreenTensi = ({ navigation }) => {
+  const [token, setToken] = useState(null);
+
+  const [profileId, setProfileId] = useState(null);
+  const [profileName, setProfileName] = useState(null);
+  const [profileSex, setProfileSex] = useState(null);
+  const [profileDob, setProfileDob] = useState(null);
+  const [profileAge, setProfileAge] = useState(null);
+
+  const [sys, setSys] = useState(""); // Systolic
+  const [dia, setDia] = useState(""); // Diastolic
+  const [pulse, setPulse] = useState(""); // Pulse rate
+  const [note, setNote] = useState(""); // Additional notes
+
+  const [recordList, setRecordList] = useState([]);
+
+  const getToken = async () => {
+    const savedToken = await AsyncStorage.getItem("auth_token");
+    if (savedToken !== null) {
+      setToken(savedToken);
+    } else {
+      //   navigation.navigate("Profile");
+    }
+  };
+
+  const HttpRequest = (url, body, conf, handle) => {
+    // string, object, object
+    axios
+      .post(url, body, conf)
+      .then((response) => {
+        handle(response.data);
+      })
+      .catch((error) => {
+        console.error("Terjadi kesalahan:", error.stack);
+      });
+  };
+
+  const handleProfileDetail = (data) => {
+    if (data.status === "success") {
+      setProfileId(data.data.id);
+      setProfileName(data.data.name);
+      setProfileSex(data.data.sex);
+      setProfileDob(data.data.dob);
+      if (data.data.dob !== null) {
+        const tanggalLahir = new Date(data.data.dob);
+        const today = new Date();
+        const umur = today.getFullYear() - tanggalLahir.getFullYear();
+        const bulanSekarang = today.getMonth() - tanggalLahir.getMonth();
+        let umurTerupdate;
+        if (
+          bulanSekarang < 0 ||
+          (bulanSekarang === 0 && today.getDate() < tanggalLahir.getDate())
+        ) {
+          umurTerupdate = umur - 1;
+        } else {
+          umurTerupdate = umur;
+        }
+        setProfileAge(umurTerupdate);
+      }
+    }
+  };
+
+  const fetchProfileDetail = async () => {
+    try {
+      const url = "https://uas.ditaajipratama.net/api/checkcare/profile/detail";
+      const body = {};
+      const auth_token = await AsyncStorage.getItem("auth_token");
+      const config = {
+        headers: {
+          Authorization: `Bearer ${auth_token}`,
+        },
+      };
+      console.log(`Bearer ${auth_token}`);
+      console.log(token);
+      if (auth_token !== null) {
+        HttpRequest(url, body, config, handleProfileDetail);
+      }
+    } catch (error) {
+      console.log(error.stack);
+    }
+  };
+
+  const quickResult = (sys, dia, pulse) => {
+    var title = "Cek Tekanan Darah";
+    var message = "Masukkan tekanan darah dan nadi Anda";
+    var image = require("../img/thermometer.png"); // You'll change this
+    var category = "unknown";
+
+    const sysNum = parseInt(sys) || 0;
+    const diaNum = parseInt(dia) || 0;
+    const pulseNum = parseInt(pulse) || 0;
+
+    if (sysNum === 0 && diaNum === 0 && pulseNum === 0) {
+      title = "Cek Tekanan Darah";
+      message = "Masukkan tekanan darah dan nadi Anda";
+      category = "input";
+    } else {
+      // Blood pressure categories
+      if (sysNum >= 180 || diaNum >= 120) {
+        title = "Krisis Hipertensi";
+        message = "Tekanan darah sangat tinggi - Segera ke dokter!";
+        category = "emergency";
+      } else if (sysNum >= 140 || diaNum >= 90) {
+        title = "Hipertensi Tingkat 2";
+        message = "Tekanan darah tinggi - Konsultasi dengan dokter";
+        category = "high2";
+      } else if (sysNum >= 130 || diaNum >= 80) {
+        title = "Hipertensi Tingkat 1";
+        message = "Tekanan darah sedikit tinggi - Perhatikan pola hidup";
+        category = "high1";
+      } else if (sysNum >= 120 && diaNum < 80) {
+        title = "Tekanan Darah Meningkat";
+        message = "Tekanan darah mulai meningkat - Jaga pola hidup sehat";
+        category = "elevated";
+      } else if (sysNum < 120 && diaNum < 80) {
+        title = "Tekanan Darah Normal";
+        message = "Tekanan darah Anda dalam batas normal";
+        category = "normal";
+      } else if (sysNum < 90 || diaNum < 60) {
+        title = "Tekanan Darah Rendah";
+        message = "Tekanan darah rendah - Perhatikan gejala pusing";
+        category = "low";
+      }
+
+      // Pulse check
+      if (pulseNum > 0) {
+        if (pulseNum < 60) {
+          message += " | Nadi lambat (bradycardia)";
+        } else if (pulseNum > 100) {
+          message += " | Nadi cepat (tachycardia)";
+        } else {
+          message += " | Nadi normal";
+        }
+      }
+    }
+
+    return { title, message, image, category };
+  };
+
+  const reqRecordList = async () => {
+    try {
+      const url = "https://uas.ditaajipratama.net/api/checkcare/tension/list";
+      const body = {};
+      const auth_token = await AsyncStorage.getItem("auth_token");
+      const config = {
+        headers: {
+          Authorization: `Bearer ${auth_token}`,
+        },
+      };
+      const handle = (data) => {
+        setRecordList(data);
+      };
+      if (auth_token !== null) {
+        HttpRequest(url, body, config, handle);
+      }
+    } catch (error) {
+      console.log(error.stack);
+    }
+  };
+
+  const reqAdd = async () => {
+    try {
+      const url = "https://uas.ditaajipratama.net/api/checkcare/tension/add";
+      const body = {
+        sys: parseInt(sys) || 0,
+        dia: parseInt(dia) || 0,
+        pulse: parseInt(pulse) || 0,
+        note,
+      };
+      const auth_token = await AsyncStorage.getItem("auth_token");
+      const config = {
+        headers: {
+          Authorization: `Bearer ${auth_token}`,
+        },
+      };
+      const handle = (data) => {
+        reqRecordList();
+        setSys("");
+        setDia("");
+        setPulse("");
+        setNote("");
+      };
+      if (auth_token !== null) {
+        HttpRequest(url, body, config, handle);
+      }
+    } catch (error) {
+      console.log(error.stack);
+    }
+  };
+
+  const ListItem = ({ item }) => {
+    const result = quickResult(item.sys, item.dia, item.pulse);
     return (
-    <View style={styles.container}>
-      <Text>Ini halaman Tensi</Text>
-      <StatusBar style="auto" />
-    </View>
+      <CardRecord key="{item.id}">
+        <Text style={styles.resultDate}>{item.when}</Text>
+        <Text style={styles.resultValue}>
+          {item.sys}/{item.dia} mmHg | {item.pulse} bpm
+        </Text>
+        <Text style={[styles.resultStatus]}>{result.title}</Text>
+      </CardRecord>
     );
-}
+  };
+
+  useEffect(() => {
+    getToken();
+    fetchProfileDetail();
+    reqRecordList();
+  }, []);
+
+  return (
+    <Container>
+      <View style={styles.headerRow}>
+        <View style={styles.illustrationContainer}>
+          <Image
+            source={quickResult(sys, dia, pulse).image}
+            style={styles.illustration}
+            resizeMode="contain"
+          />
+        </View>
+        <View style={styles.textContainer}>
+          <Text style={styles.title}>{quickResult(sys, dia, pulse).title}</Text>
+          <Text style={styles.datetime}>
+            {`Tekanan: ${sys || 0}/${dia || 0} mmHg | Nadi: ${pulse || 0} bpm`}
+          </Text>
+          <Text style={styles.description}>
+            {quickResult(sys, dia, pulse).message}
+          </Text>
+        </View>
+      </View>
+
+      <View style={styles.inputColumn}>
+        <View style={styles.inputRow}>
+          <TextInput
+            style={styles.inputForm}
+            placeholder="Sistol (mmHg)"
+            placeholderTextColor="#888"
+            keyboardType="numeric"
+            onChangeText={(text) => setSys(text)}
+            value={sys}
+          />
+          <TextInput
+            style={styles.inputForm}
+            placeholder="Diastol (mmHg)"
+            placeholderTextColor="#888"
+            keyboardType="numeric"
+            onChangeText={(text) => setDia(text)}
+            value={dia}
+          />
+          <TextInput
+            style={styles.inputForm}
+            placeholder="Nadi (bpm)"
+            placeholderTextColor="#888"
+            keyboardType="numeric"
+            onChangeText={(text) => setPulse(text)}
+            value={pulse}
+          />
+        </View>
+
+        <TextInput
+          style={styles.inputFormNote}
+          placeholder="Catatan (opsional)"
+          placeholderTextColor="#888"
+          onChangeText={(text) => setNote(text)}
+          value={note}
+          multiline
+        />
+
+        <TouchableOpacity style={styles.inputButtonSubmit} onPress={reqAdd}>
+          <Text style={styles.submitText}>Submit</Text>
+        </TouchableOpacity>
+      </View>
+
+      <View style={{ flex: 2 }}>
+        <FlatList
+          data={recordList}
+          renderItem={({ item }) => <ListItem item={item} />}
+          keyExtractor={(item, index) => index.toString()}
+        />
+      </View>
+    </Container>
+  );
+};
 
 const styles = StyleSheet.create({
-  container: {
+  headerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  illustration: {
+    width: 100,
+    height: 100,
+  },
+  illustrationContainer: {
+    marginRight: 16,
+  },
+  textContainer: {
     flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: "bold",
+    color: "#111",
+  },
+  datetime: {
+    fontSize: 12,
+    color: "#444",
+    marginVertical: 4,
+  },
+  description: {
+    fontSize: 14,
+    color: "#333",
+    maxWidth: 320,
+    marginBottom: 16,
+  },
+  inputColumn: {
+    width: "100%",
+    marginBottom: 10,
+  },
+  inputRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    width: "100%",
+    marginBottom: 10,
+  },
+  inputForm: {
+    flex: 1,
+    borderWidth: 1,
+    borderColor: "#ccc",
+    borderRadius: 30,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    marginHorizontal: 6,
+    backgroundColor: "#fff",
+    color: "#333",
+  },
+  inputFormNote: {
+    borderWidth: 1,
+    borderColor: "#ccc",
+    borderRadius: 15,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    marginVertical: 6,
+    backgroundColor: "#fff",
+    color: "#333",
+    minHeight: 60,
+  },
+  inputButtonSubmit: {
+    borderRadius: 30,
+    paddingVertical: 12,
+    marginVertical: 6,
+    backgroundColor: "#007bff",
+  },
+  submitText: {
+    textAlign: "center",
+    color: "#fff",
+    fontWeight: "600",
+  },
+  resultDate: {
+    flex: 1,
+    color: "#333",
+  },
+  resultValue: {
+    flex: 1,
+    textAlign: "center",
+    color: "#111",
+    fontWeight: "500",
+  },
+  resultStatus: {
+    flex: 1,
+    textAlign: "right",
+    fontWeight: "bold",
   },
 });