320 lines
7.8 KiB
JavaScript
320 lines
7.8 KiB
JavaScript
import React, { useState } from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
Image,
|
|
StyleSheet,
|
|
TouchableOpacity,
|
|
Linking,
|
|
} from "react-native";
|
|
import { Ionicons } from "@expo/vector-icons"; // Import Ionicons untuk ikon panah
|
|
|
|
export default function DetailPengirimanAdmin({ route, navigation }) {
|
|
const { item } = route.params; // Mendapatkan data item dari navigation params
|
|
const [status, setStatus] = useState(item.status); // Menentukan status awal sesuai item
|
|
|
|
// Fungsi untuk menangani perubahan status
|
|
const handleUpdateStatus = (newStatus) => {
|
|
setStatus(newStatus); // Mengubah status pengiriman
|
|
};
|
|
|
|
// Timeline status pengiriman
|
|
const statusTimeline = {
|
|
diproses: {
|
|
title: "Diproses",
|
|
time: "23 Januari 2025, 15:12 WIB",
|
|
},
|
|
dikirim: {
|
|
title: "Dikirim",
|
|
time: "24 Januari 2025, 10:00 WIB",
|
|
},
|
|
diterima: {
|
|
title: "Diterima",
|
|
time: "25 Januari 2025, 13:00 WIB",
|
|
},
|
|
selesai: {
|
|
title: "Selesai",
|
|
time: "26 Januari 2025, 17:00 WIB",
|
|
},
|
|
};
|
|
|
|
// Fungsi untuk menghubungi penerima via WhatsApp
|
|
const handleContactRecipient = () => {
|
|
const phoneNumber = "628123456789"; // Ganti dengan nomor penerima yang terdaftar
|
|
const message = "Halo, ada update tentang pengiriman barang Anda."; // Pesan default yang ingin dikirim
|
|
|
|
const url = `whatsapp://send?phone=${phoneNumber}&text=${encodeURIComponent(
|
|
message
|
|
)}`;
|
|
|
|
// Mengecek apakah WhatsApp dapat dibuka
|
|
Linking.openURL(url).catch((err) => {
|
|
console.error("Error opening WhatsApp:", err);
|
|
});
|
|
};
|
|
|
|
const currentItem = {
|
|
...item,
|
|
statusDetails:
|
|
status === "diproses"
|
|
? "Barang sedang diproses oleh tim Dinas Lingkungan Hidup."
|
|
: status === "dikirim"
|
|
? "Barang telah dikirimkan kepada penerima."
|
|
: status === "diterima"
|
|
? "Barang telah diterima oleh penerima."
|
|
: "Pengiriman selesai.",
|
|
estimatedDate:
|
|
status === "diterima"
|
|
? "Pengiriman selesai, tidak ada tanggal estimasi lebih lanjut."
|
|
: "Diperkirakan tiba pada 30 Januari 2025.",
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.header}>
|
|
<TouchableOpacity
|
|
style={styles.backButton}
|
|
onPress={() => navigation.goBack()}
|
|
>
|
|
<Ionicons name="arrow-back" size={24} color="#333" />
|
|
</TouchableOpacity>
|
|
<Text style={styles.title}>DETAIL PENGIRIMAN BARANG</Text>
|
|
</View>
|
|
|
|
{/* Hubungi Penerima Button */}
|
|
<TouchableOpacity
|
|
style={styles.contactButton}
|
|
onPress={handleContactRecipient}
|
|
>
|
|
<Text style={styles.contactText}>Hubungi Penerima</Text>
|
|
</TouchableOpacity>
|
|
|
|
{/* Image */}
|
|
<Image source={currentItem.imageUri} style={styles.image} />
|
|
|
|
{/* Product Details */}
|
|
<View style={styles.productInfo}>
|
|
<Text style={styles.productName}>{currentItem.name}</Text>
|
|
<Text style={styles.productPoints}>{currentItem.points}</Text>
|
|
</View>
|
|
|
|
{/* Foto Profil Penerima */}
|
|
<View style={styles.recipientInfo}></View>
|
|
|
|
{/* Informasi Profil Penerima */}
|
|
<View style={styles.profileInfo}>
|
|
<Text style={styles.profileText}>
|
|
Alamat: Jl. Sudirman No.5, Bandung
|
|
</Text>
|
|
<Text style={styles.profileText}>Email: siti@example.com</Text>
|
|
<Text style={styles.profileText}>No. Telepon: 082123456789</Text>
|
|
</View>
|
|
|
|
{/* Status Progress */}
|
|
<View style={styles.statusContainer}>
|
|
<Text style={styles.statusTitle}>Proses Pengiriman</Text>
|
|
<View style={styles.statusTimeline}>
|
|
{Object.keys(statusTimeline).map((step, index) => (
|
|
<View
|
|
key={index}
|
|
style={status === step ? styles.activeStep : styles.step}
|
|
>
|
|
<Text style={styles.stepText}>{statusTimeline[step].title}</Text>
|
|
<Text style={styles.time}>{statusTimeline[step].time}</Text>
|
|
</View>
|
|
))}
|
|
</View>
|
|
</View>
|
|
|
|
{/* Status Detail */}
|
|
<View style={styles.statusDetail}>
|
|
<Text style={styles.statusDetails}>{currentItem.statusDetails}</Text>
|
|
</View>
|
|
|
|
{/* Estimated Delivery */}
|
|
<View style={styles.estimatedDelivery}>
|
|
<Text style={styles.estimatedText}>{currentItem.estimatedDate}</Text>
|
|
</View>
|
|
|
|
{/* Shipping Information */}
|
|
<View style={styles.shippingInfo}>
|
|
<Text style={styles.shippingDetails}>
|
|
{currentItem.shippingAddress}
|
|
</Text>
|
|
<Text style={styles.shippingTitle}>Jasa Pengiriman</Text>
|
|
<Text style={styles.shippingDetails}>JNE</Text>
|
|
<Text style={styles.shippingTitle}>No Resi</Text>
|
|
<Text style={styles.shippingDetails}>5679032190775</Text>
|
|
</View>
|
|
|
|
{/* Buttons to update the status */}
|
|
{status === "diproses" && (
|
|
<TouchableOpacity
|
|
style={styles.button}
|
|
onPress={() => handleUpdateStatus("dikirim")}
|
|
>
|
|
<Text style={styles.buttonText}>UPDATE STATUS: DIKIRIM</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
|
|
{status === "diterima" && (
|
|
<TouchableOpacity
|
|
style={styles.button}
|
|
onPress={() => handleUpdateStatus("selesai")}
|
|
>
|
|
<Text style={styles.buttonText}>UPDATE STATUS: SELESAI</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
padding: 16,
|
|
backgroundColor: "#fff",
|
|
},
|
|
header: {
|
|
marginTop: 40,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginBottom: 30,
|
|
},
|
|
backButton: {
|
|
marginRight: 10,
|
|
},
|
|
title: {
|
|
fontSize: 22,
|
|
fontWeight: "bold",
|
|
color: "#333",
|
|
},
|
|
contactButton: {
|
|
backgroundColor: "#4CAF50",
|
|
padding: 10,
|
|
borderRadius: 5,
|
|
marginBottom: 20,
|
|
alignItems: "center",
|
|
borderRadius: 20,
|
|
marginLeft: 120,
|
|
marginRight: 120,
|
|
},
|
|
contactText: {
|
|
color: "#fff",
|
|
fontSize: 14,
|
|
},
|
|
image: {
|
|
width: 100,
|
|
height: 100,
|
|
alignSelf: "center",
|
|
marginBottom: 16,
|
|
},
|
|
productInfo: {
|
|
alignItems: "center",
|
|
marginBottom: 16,
|
|
},
|
|
productName: {
|
|
fontSize: 18,
|
|
fontWeight: "bold",
|
|
alignItems: "flex-start",
|
|
},
|
|
productPoints: {
|
|
fontSize: 14,
|
|
color: "#777",
|
|
},
|
|
recipientInfo: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginBottom: 16,
|
|
justifyContent: "center",
|
|
},
|
|
recipientImage: {
|
|
width: 50,
|
|
height: 50,
|
|
borderRadius: 25,
|
|
marginRight: 10,
|
|
},
|
|
recipientName: {
|
|
fontSize: 16,
|
|
fontWeight: "bold",
|
|
},
|
|
profileInfo: {
|
|
marginBottom: 10,
|
|
justifyContent: "flex-start",
|
|
},
|
|
profileText: {
|
|
fontSize: 14,
|
|
color: "#777",
|
|
alignItems: "center",
|
|
alignContent: "center",
|
|
justifyContent: "center",
|
|
},
|
|
statusContainer: {
|
|
marginBottom: 16,
|
|
},
|
|
statusTitle: {
|
|
fontSize: 16,
|
|
fontWeight: "bold",
|
|
marginBottom: 8,
|
|
},
|
|
statusTimeline: {
|
|
flexDirection: "column",
|
|
alignItems: "flex-start",
|
|
},
|
|
step: {
|
|
marginBottom: 12,
|
|
},
|
|
activeStep: {
|
|
marginBottom: 12,
|
|
borderLeftWidth: 4,
|
|
borderColor: "#4CAF50",
|
|
paddingLeft: 12,
|
|
},
|
|
stepText: {
|
|
fontSize: 14,
|
|
fontWeight: "bold",
|
|
},
|
|
time: {
|
|
fontSize: 12,
|
|
color: "#777",
|
|
},
|
|
statusDetail: {
|
|
marginBottom: 16,
|
|
},
|
|
statusDetails: {
|
|
fontSize: 14,
|
|
color: "#777",
|
|
},
|
|
estimatedDelivery: {
|
|
marginBottom: 16,
|
|
alignItems: "center",
|
|
},
|
|
estimatedText: {
|
|
fontSize: 14,
|
|
fontStyle: "italic",
|
|
},
|
|
shippingInfo: {
|
|
marginBottom: 10,
|
|
},
|
|
shippingTitle: {
|
|
fontSize: 14,
|
|
fontWeight: "bold",
|
|
},
|
|
shippingDetails: {
|
|
fontSize: 14,
|
|
marginBottom: 8,
|
|
},
|
|
button: {
|
|
marginTop: 20,
|
|
backgroundColor: "#2f4f2f",
|
|
padding: 15,
|
|
borderRadius: 10,
|
|
alignItems: "center",
|
|
},
|
|
buttonText: {
|
|
color: "#fff",
|
|
fontSize: 16,
|
|
fontWeight: "bold",
|
|
},
|
|
});
|