eletrotupi / tcc/ frontend/app/care-actions/post-appointment.tsxfa18535ea443601fc1f62853fabb636e0930bcb5
5.0 KB | 184 lines Raw
1
import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from "react-native";
2
import { router } from "expo-router";
3
import { Ionicons } from "@expo/vector-icons";
4
import { SafeAreaView } from "react-native-safe-area-context";
5
6
import { Button } from "@/components/ui/Button";
7
import { Card } from "@/components/ui/Cards";
8
import { Colors, Spacing, Typography, BorderRadius, Shadows } from "@/constants/theme";
9
10
export default function PostAppointment() {
11
  return (
12
    <SafeAreaView style={styles.safe}>
13
      <ScrollView
14
        contentContainerStyle={styles.scrollContent}
15
        scrollEventThrottle={16}
16
        showsVerticalScrollIndicator={false}
17
      >
18
        {/* Confirmation block */}
19
        <View style={styles.confirmationBlock}>
20
          <View style={styles.outerRing}>
21
            <View style={styles.innerCircle}>
22
              <Ionicons name="checkmark" size={32} color="#fff" />
23
            </View>
24
          </View>
25
          <Text style={styles.confirmTitle}>Consulta Salva!</Text>
26
          <Text style={styles.confirmSubtitle}>
27
            Sua consulta foi registrada com sucesso.
28
          </Text>
29
        </View>
30
31
        {/* Follow-up card */}
32
        <Card style={styles.followUpCard}>
33
          <Text style={styles.followUpTitle}>Algo surgiu na sessão?</Text>
34
          <Text style={styles.followUpSubtitle}>
35
            Aproveite para registrar enquanto está fresco
36
          </Text>
37
38
          <TouchableOpacity
39
            style={styles.optionRow}
40
            activeOpacity={0.7}
41
            onPress={() => router.replace("/triggers/new?category=THERAPY")}
42
          >
43
            <View style={[styles.optionIcon, { backgroundColor: "#ede9fe" }]}>
44
              <Ionicons name="flash-outline" size={22} color="#7c3aed" />
45
            </View>
46
            <View style={styles.optionText}>
47
              <Text style={styles.optionTitle}>Criar um gatilho</Text>
48
              <Text style={styles.optionDesc}>
49
                Registre algo que emergiu na sessão
50
              </Text>
51
            </View>
52
            <Ionicons
53
              name="chevron-forward"
54
              size={18}
55
              color={Colors.light.disabled}
56
            />
57
          </TouchableOpacity>
58
59
          <TouchableOpacity
60
            style={styles.optionRow}
61
            activeOpacity={0.7}
62
            onPress={() => router.replace("/new/entry")}
63
          >
64
            <View style={[styles.optionIcon, { backgroundColor: "#fef9c3" }]}>
65
              <Ionicons name="heart-outline" size={22} color="#ca8a04" />
66
            </View>
67
            <View style={styles.optionText}>
68
              <Text style={styles.optionTitle}>Registrar humor</Text>
69
              <Text style={styles.optionDesc}>
70
                Como você está se sentindo agora?
71
              </Text>
72
            </View>
73
            <Ionicons
74
              name="chevron-forward"
75
              size={18}
76
              color={Colors.light.disabled}
77
            />
78
          </TouchableOpacity>
79
        </Card>
80
81
        <Button
82
          title="Concluir"
83
          variant="ghost"
84
          onPress={() => router.replace("/(tabs)/actions")}
85
          style={styles.concludeButton}
86
        />
87
      </ScrollView>
88
    </SafeAreaView>
89
  );
90
}
91
92
const styles = StyleSheet.create({
93
  safe: {
94
    flex: 1,
95
    backgroundColor: Colors.light.background,
96
  },
97
  scrollContent: {
98
    paddingHorizontal: Spacing.containerPadding,
99
    paddingTop: 48,
100
    paddingBottom: 36,
101
  },
102
  confirmationBlock: {
103
    alignItems: "center",
104
    marginBottom: Spacing.sectionGap,
105
    gap: 12,
106
  },
107
  outerRing: {
108
    width: 88,
109
    height: 88,
110
    borderRadius: 44,
111
    backgroundColor: "#E7FDEF",
112
    alignItems: "center",
113
    justifyContent: "center",
114
  },
115
  innerCircle: {
116
    width: 64,
117
    height: 64,
118
    borderRadius: 32,
119
    backgroundColor: Colors.light.tint,
120
    alignItems: "center",
121
    justifyContent: "center",
122
  },
123
  confirmTitle: {
124
    ...Typography.headlineMd,
125
    fontWeight: "700",
126
    color: Colors.light.text,
127
    textAlign: "center",
128
  },
129
  confirmSubtitle: {
130
    ...Typography.bodyMd,
131
    color: Colors.light.textSecondary,
132
    textAlign: "center",
133
  },
134
  followUpCard: {
135
    padding: Spacing.cardGap,
136
    marginBottom: Spacing.sectionGap,
137
    gap: 12,
138
  },
139
  followUpTitle: {
140
    ...Typography.headlineMd,
141
    fontWeight: "700",
142
    color: Colors.light.text,
143
    marginBottom: 2,
144
  },
145
  followUpSubtitle: {
146
    ...Typography.bodyMd,
147
    color: Colors.light.textSecondary,
148
    marginBottom: 8,
149
  },
150
  optionRow: {
151
    flexDirection: "row",
152
    alignItems: "center",
153
    padding: Spacing.cardGap,
154
    backgroundColor: "#fff",
155
    borderRadius: BorderRadius.lg,
156
    borderWidth: 1,
157
    borderColor: Colors.light.divider,
158
    gap: 12,
159
    ...Shadows.sm,
160
  },
161
  optionIcon: {
162
    width: 44,
163
    height: 44,
164
    borderRadius: BorderRadius.md,
165
    alignItems: "center",
166
    justifyContent: "center",
167
  },
168
  optionText: {
169
    flex: 1,
170
    gap: 2,
171
  },
172
  optionTitle: {
173
    ...Typography.bodyMd,
174
    fontWeight: "600",
175
    color: Colors.light.text,
176
  },
177
  optionDesc: {
178
    ...Typography.labelSm,
179
    color: Colors.light.textSecondary,
180
  },
181
  concludeButton: {
182
    marginTop: 8,
183
  },
184
});