diff --git a/frontend/src/app/alerts.tsx b/frontend/src/app/alerts.tsx
index 77aabd8..9115065 100644
--- a/frontend/src/app/alerts.tsx
+++ b/frontend/src/app/alerts.tsx
@@ -1,15 +1,67 @@
-import { View, Text } from "react-native";
+import { ScrollView, Text } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+import { COLORS } from "../constants/colors";
+
+import SectionTitle from "../components/SectionTitle";
+import AlertItem from "@/components/Alertltem";
export default function AlertsScreen() {
return (
-
- Alertas
-
+
+
+
+
+ Estado actual de recolección
+
+
+
+
+
+
+
+
+
+
+
);
-}
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/frontend/src/app/index.tsx b/frontend/src/app/index.tsx
index 752dd59..7aef6a6 100644
--- a/frontend/src/app/index.tsx
+++ b/frontend/src/app/index.tsx
@@ -1,15 +1,56 @@
-import { View, Text } from "react-native";
+import { ScrollView, View, Text } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+import { COLORS } from "../constants/colors";
+
+import SectionTitle from "../components/SectionTitle";
+import EtaCard from "../components/EtaCard";
+import QuickAction from "../components/QuickAction";
export default function HomeScreen() {
return (
-
- Inicio
-
+
+
+
+
+ Monitoreo inteligente de recolección
+
+
+
+
+
+
+
+
+
+
+
+
+
);
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/Alertltem.tsx b/frontend/src/components/Alertltem.tsx
index 6022048..fb7428c 100644
--- a/frontend/src/components/Alertltem.tsx
+++ b/frontend/src/components/Alertltem.tsx
@@ -1,59 +1,183 @@
-import { View, Text, StyleSheet } from 'react-native';
-import { Colors, Spacing } from '../constants/theme';
+import {
+ View,
+ Text,
+ StyleSheet,
+} from "react-native";
+
+import { Ionicons } from "@expo/vector-icons";
+
+import { Colors, Spacing } from "../constants/theme";
type AlertItemProps = {
- message: string;
- type?: 'success' | 'warning' | 'danger';
+ title: string;
+ description: string;
+ time: string;
+ type?: "started" | "near" | "danger" | "completed";
};
export default function AlertItem({
- message,
- type = 'success',
+ title,
+ description,
+ time,
+ type = "started",
}: AlertItemProps) {
-
const theme = Colors.light;
const getColor = () => {
- switch (type) {
- case 'success':
- return '#22C55E';
- case 'warning':
- return '#FACC15';
- case 'danger':
- return '#EF4444';
- default:
- return theme.textSecondary;
- }
- };
+ switch (type) {
+ case "started":
+ return "#B8C4BE";
+
+ case "near":
+ return "#22C55E";
+
+ case "danger":
+ return "#EF4444";
+
+ case "completed":
+ return "#B8C4BE";
+
+ default:
+ return "#9CA3AF";
+ }
+};
+
+const getIcon = () => {
+ switch (type) {
+ case "started":
+ return "navigate";
+
+ case "near":
+ return "time-outline";
+
+ case "danger":
+ return "warning-outline";
+
+ case "completed":
+ return "checkmark-done";
+
+ default:
+ return "notifications";
+ }
+};
return (
-
-
-
- {message}
-
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+ {time}
+
+
+
+
+ {description}
+
+
);
}
const styles = StyleSheet.create({
container: {
- flexDirection: 'row',
- padding: Spacing.three,
- marginHorizontal: Spacing.three,
- marginVertical: Spacing.one,
- borderRadius: 12,
- backgroundColor: '#F0F0F3',
- alignItems: 'center',
+ flexDirection: "row",
+
+ padding: 18,
+
+ marginBottom: 16,
+
+ borderRadius: 22,
+
+ alignItems: "flex-start",
+
+ shadowColor: "#000",
+
+ shadowOffset: {
+ width: 0,
+ height: 6,
+ },
+
+ shadowOpacity: 0.05,
+
+ shadowRadius: 10,
+
+ elevation: 4,
},
- bar: {
- width: 6,
- height: '100%',
- borderRadius: 4,
- marginRight: Spacing.two,
+
+ iconContainer: {
+ width: 42,
+ height: 42,
+
+ borderRadius: 21,
+
+ justifyContent: "center",
+ alignItems: "center",
+
+ marginRight: 14,
},
- text: {
- fontSize: 14,
+
+ content: {
flex: 1,
},
+
+ header: {
+ flexDirection: "row",
+ justifyContent: "space-between",
+ marginBottom: 6,
+ },
+
+ title: {
+ fontSize: 16,
+ fontWeight: "700",
+ },
+
+ time: {
+ fontSize: 12,
+ color: "#9CA3AF",
+ },
+
+ description: {
+ fontSize: 14,
+ lineHeight: 20,
+ },
});
\ No newline at end of file
diff --git a/frontend/src/components/QuickAction.tsx b/frontend/src/components/QuickAction.tsx
index 916a6b7..6489785 100644
--- a/frontend/src/components/QuickAction.tsx
+++ b/frontend/src/components/QuickAction.tsx
@@ -3,13 +3,15 @@ import {
Text,
StyleSheet,
View,
-} from 'react-native';
+} from "react-native";
-import { Colors, Spacing } from '../constants/theme';
+import { Ionicons } from "@expo/vector-icons";
+
+import { Colors, Spacing } from "../constants/theme";
type QuickActionProps = {
title: string;
- icon: string;
+ icon: any;
onPress?: () => void;
};
@@ -18,7 +20,6 @@ export default function QuickAction({
icon,
onPress,
}: QuickActionProps) {
-
const theme = Colors.light;
return (
@@ -32,9 +33,11 @@ export default function QuickAction({
onPress={onPress}
>
-
- {icon}
-
+