sort/app/(tabs)/index.tsx

import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, StyleSheet, Alert, Image } from 'react-native';
import { useNavigation, NavigationProp, Link } from '@react-navigation/native';
// Update the import path to the correct one
import { RootStackParamList } from '../../types';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { DB } from '@/components/lib/db';
import { GestureHandlerRootView, ScrollView } from 'react-native-gesture-handler';

const LoginScreen = () => {
  const navigation = useNavigation<NavigationProp<RootStackParamList>>();
  const [username, setUsername] = useState('sales@rumahjo.com'); 
  const [password, setPassword] = useState('12345678');

  const handleLogin = async () => {
    try{
      DB(`SELECT * FROM "public".hr_employee WHERE work_email = '${username}' AND pin = '${password}'`)
      .then(async function(data){
        if(data && Array.isArray(data) && data.length>0){
          await AsyncStorage.setItem('login', JSON.stringify(data));
          navigation.navigate('home')
        }else{
          Alert.alert("Warning", "Pastikan username atau password sudah benar")
        }
      })
      .catch(function(err){
      })
    }catch(e){
      Alert.alert(JSON.stringify(e))
    }
  };

  const handleSignUp = () => {
    navigation.navigate('signup');
  };

  const handleForgotPassword = () => {
    Alert.alert("Lupa Password", "Untuk mengganti Password baru, Harap menghubungi admin kantor.");
  };

  return (
    <>
      <GestureHandlerRootView>
        <ScrollView>
          <View style={{ flex: 1, backgroundColor:'#2563eb'}}>
            <View style={{
                flexDirection:"column"
                , height:300
                , justifyContent:"center"
                , alignItems:"center"
              }}>
                <View style={{
                  width:"auto",
                  backgroundColor:"white",
                  padding: 10,
                  borderRadius: 20
                }}>
                  <Image
                    source={require('../../assets/images/logo.png')}
                    style={{ 
                      width: 75
                      , height: 75  
                    }}
                    resizeMode="contain"  // You can adjust this based on how you want the image to scale
                  />
                </View>
                <Text style={{
                  color:"white",
                  paddingVertical: 10,
                  fontWeight:"bold",
                  fontSize: 30
                }}>S.O.R.T</Text>
            </View>
            <View style={[styles.container]}>
              <Text style={{
                textAlign:"center"
                , fontSize:50
                , fontWeight:'bold'
                , color:"#2563eb"
              }}>Login</Text>
              <Text style={{
                textAlign:"center"
                , fontSize:18
                , fontWeight:'bold'
                , color:"#777"
                , marginVertical:20
              }}>Silahkan login ke akun anda</Text>
              <Text style={{
                textAlign:"left"
                , fontSize:18
                , fontWeight:'bold'
                , color:"#777"
                , marginTop:10
                , marginBottom: 10
                ,width:'100%'
              }}>EMAIL</Text>
              <TextInput
                style={styles.input}
                placeholder="youremail@gmail.com"
                value={username}
                onChangeText={setUsername}
              />
            <Text style={{
              textAlign: "left"
              , fontSize: 18
              , fontWeight: 'bold'
              , color: "#777"
              , marginBottom: 10
              , marginTop: 10
              , width: '100%'
            }}>PASSWORD</Text>
              <TextInput
                style={styles.input}
                placeholder="******"
                value={password}
                onChangeText={setPassword}
                secureTextEntry
              />
              <TouchableOpacity style={styles.button} onPress={handleLogin}>
                <Text style={styles.buttonText}>Log In</Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={handleForgotPassword}>
                <Text style={styles.forgotPasswordText}>Lupa Password?</Text>
              </TouchableOpacity>
              <View style={{flexDirection:"row"}}>
              <Text>Belum memiliki akun?</Text>
              <TouchableOpacity onPress={handleSignUp} style={{marginHorizontal:5}}>
                <Text style={{
                  color:"blue",
                  fontWeight:"bold"
                }}>Daftar disini!</Text>
              </TouchableOpacity>
              </View>
            </View>
          </View>
        </ScrollView>
      </GestureHandlerRootView>
    </>
  );
};

const styles = StyleSheet.create({
  primary:{
    backgroundColor:"#2563eb"
  },
  container: {
    flex: 1,
    paddingVertical:50,
    borderTopRightRadius:80,
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 60
  },
  appName: {
    fontSize: 36,
    color: '#fff',
    fontWeight: 'bold',
    marginBottom: 10,
  },
  title: {
    fontSize: 32,
    color: '#fff',
    marginBottom: 20,
  },
  input: {
    width: '100%',
    borderWidth: 2,
    borderColor:"#333",
    borderRadius: 10,
    padding: 15,
    shadowColor: "#000",
    marginBottom: 20,
    fontSize: 16,
  },
  button: {
    backgroundColor: '#2563eb',
    padding: 15,
    borderRadius: 10,
    width: '100%',
    alignItems: 'center',
    marginBottom: 10,
  },
  buttonSecondary: {
    borderWidth: 1,
    borderColor: '#fff',
  },
  buttonText: {
    fontSize: 18,
    color: 'white',
  },
  buttonTextSecondary: {
    color: '#fff',
  },
  forgotPasswordText: {
    color: '#777',
    fontSize: 16,
    marginBottom: 20,
    textDecorationLine: 'underline',
  },
});

export default LoginScreen;