First commit of the new app

2026-05-26 09:18:37 +01:00
parent 295d1bda21
commit b427fb0f85
110 changed files with 6483 additions and 833 deletions
--- a/assets/components/reserva/ValorReservaCard.tsx
+++ b/assets/components/reserva/ValorReservaCard.tsx
@@ -0,0 +1,72 @@
+import CircleCheckIcon from '@/assets/icons/circle-check-solid.svg';
+import { colors } from '@/assets/styles/colors';
+import { ReservaData } from '@/assets/types';
+import styles from '@/styles/screens/reserva/detail.styles';
+import { Text, View } from 'react-native';
+
+type Props = {
+  reserva: ReservaData;
+};
+
+const formatEuro = (value: string) => {
+  const n = parseFloat(value || '0');
+  return `€${n.toLocaleString('pt-PT', {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  })}`;
+};
+
+export function ValorReservaCard({ reserva }: Props) {
+  const total = parseFloat(reserva.precoTotalFinal || '0');
+  const pago = parseFloat(reserva.valorPago || '0');
+  const emFalta = parseFloat(reserva.valorAPagar || '0');
+  const isFullyPaid = emFalta <= 0;
+  const percent = isFullyPaid
+    ? 100
+    : total > 0
+      ? Math.min(100, Math.max(0, (pago / total) * 100))
+      : 0;
+
+  return (
+    <View style={styles.valorSection}>
+      <Text style={styles.sectionTitle}>Valor da Reserva</Text>
+
+      <View style={styles.valorInnerCard}>
+        <Text style={styles.valorAmount}>{formatEuro(reserva.precoTotalFinal)}</Text>
+        <Text style={styles.valorAmountLabel}>Valor Total</Text>
+
+        <Text style={styles.valorPagoLine}>Pago {formatEuro(reserva.valorPago)}</Text>
+
+        <View style={styles.valorProgressTrack}>
+          {percent > 0 && (
+            <View
+              style={[
+                styles.valorProgressFill,
+                { width: `${percent}%`, minWidth: 14 },
+              ]}>
+              <View style={styles.valorProgressDot} />
+            </View>
+          )}
+        </View>
+
+        <View style={[styles.valorFaltaRow, isFullyPaid && styles.valorFaltaRowPago]}>
+          {isFullyPaid ? (
+            <View style={styles.valorPagoStatus}>
+              <CircleCheckIcon width={18} height={18} fill={colors.success} />
+              <Text style={styles.valorFaltaLabel}>Pago</Text>
+            </View>
+          ) : (
+            <>
+              <Text style={styles.valorFaltaLabel}>Em Falta</Text>
+              <View style={styles.valorFaltaBadge}>
+                <Text style={styles.valorFaltaBadgeText}>
+                  {formatEuro(reserva.valorAPagar)}
+                </Text>
+              </View>
+            </>
+          )}
+        </View>
+      </View>
+    </View>
+  );
+}