frontend: introduce components for each history cards

Pedro Lucas Porcellis porcellis@eletrotupi.com 22 days ago 9964dafa6ca2a967df3965c0aebbd9e474e93d3a

Parents: 4cbb518

2 file(s) changed

frontend/components/history/MoodHistoryCard.tsx +114 -0
frontend/components/history/SleepRecordCard.tsx +116 -0

frontend/components/history/MoodHistoryCard.tsx

@@ -0,0 +1,114 @@
  + // components/history/cards/MoodHistoryCard.tsx
  + import { View, Text, StyleSheet } from 'react-native';
  + import { MaterialIcons } from '@expo/vector-icons';
  + import { Card } from '@/components/ui/Cards';
  + import { Badge } from '@/components/ui/Badge';
  + import type { HistoryCard } from '@/lib/history/types';
  + import type { MoodEntry } from '@/lib/api';
  + import { Spacing } from '@/constants/theme';
  + import { getMood } from '@/constants/moods';
  + import { format } from 'date-fns';
  + 
  + function inferBadge(anxiety: number, stress: number, energy: number) {
  +   if (anxiety >= 7) return { label: 'Ansiedade alta', variant: 'red'    } as const
  +   if (stress  >= 7) return { label: 'Estresse alto',  variant: 'orange' } as const
  +   if (energy  <= 3) return { label: 'Energia baixa',  variant: 'yellow' } as const
  + 
  +   return undefined
  + }
  + 
  + // TODO: Perhaps we could move these into the constants instead and use it everywhere?
  + const MOOD_META: Record<string, { color: string; bg: string }> = {
  +   GREAT:   { color: '#16a34a', bg: '#dcfce7' },
  +   GOOD:    { color: '#2563eb', bg: '#dbeafe' },
  +   NEUTRAL: { color: '#d97706', bg: '#fef3c7' },
  +   SAD:     { color: '#7c3aed', bg: '#ede9fe' },
  +   ANGRY:   { color: '#dc2626', bg: '#fee2e2' },
  + }
  + 
  + type Props = { card: HistoryCard & { raw: MoodEntry } }
  + 
  + export function MoodHistoryCard({ card }: Props) {
  +   const meta = MOOD_META[card.raw.selectedMood] ?? MOOD_META.NEUTRAL
  +   const badge = inferBadge(card.raw.anxietyLevel, card.raw.stressLevel, card.raw.energyLevel)
  +   const time = format(card.timestamp, 'HH:mm')
  +   const moodDef = getMood(card.raw.selectedMood.toLowerCase());
  + 
  +   return (
  +     <Card style={styles.card}>
  +       <View style={styles.row}>
  +         <View style={[styles.iconWrap, { backgroundColor: meta.bg }]}>
  +           <Text style={styles.moodIconEmoji}>{moodDef?.icon ?? '😐'}</Text>
  + 
  +           {false && (<MaterialIcons name={meta.icon} size={22} color={meta.color} />)}
  +         </View>
  +         <View style={styles.body}>
  +           <View style={styles.titleRow}>
  +             <Text style={styles.title}>{moodDef.label}</Text>
  +             <Text style={styles.time}>{time}</Text>
  +           </View>
  +           {card.raw.annotation ? (
  +             <Text style={styles.summary} numberOfLines={2}>
  +               {card.raw.annotation?.trim()}
  +             </Text>
  +           ) : null}
  +           {badge ? (
  +             <Badge label={badge.label}
  +                    variant={badge.variant}
  +                    style={styles.badge}
  +             /> : null
  +           )}
  +         </View>
  +       </View>
  +     </Card>
  +   )
  + }
  + 
  + const styles = StyleSheet.create({
  +   card: {
  +     padding: Spacing.cardGap
  +   },
  +   row: {
  +     flexDirection: 'row',
  +     alignItems: 'flex-start',
  +     gap: 12
  +   },
  +   iconWrap: {
  +     width: 40,
  +     height: 40,
  +     borderRadius: 20,
  +     alignItems: 'center',
  +     justifyContent: 'center',
  +     marginTop: 1
  +   },
  +   body: { flex: 1 },
  +   titleRow: {
  +     flexDirection: 'row',
  +     justifyContent: 'space-between',
  +     alignItems: 'center',
  +     marginBottom: 2
  +   },
  +   title: {
  +     fontSize: 15,
  +     fontWeight: '600'
  +   },
  +   moodIconEmoji: {
  +     fontSize: 26,
  +   },
  +   time: {
  +     fontSize: 13,
  +     opacity: 0.45
  +   },
  +   summary: {
  +     fontSize: 13,
  +     opacity: 0.6,
  +     lineHeight: 18,
  +     marginBottom: 6,
  +     fontStyle: 'italic'
  +   },
  +   badge: {
  +     alignSelf: 'flex-start',
  +     marginTop: 4,
  +     maxWidth: '50%'
  +   }
  + })

frontend/components/history/SleepRecordCard.tsx

@@ -0,0 +1,116 @@
  + import { View, Text, StyleSheet } from 'react-native'
  + import { MaterialIcons } from '@expo/vector-icons'
  + import { Card } from '@/components/ui/Cards'
  + import { Badge } from '@/components/ui/Badge'
  + import type { SleepRecord } from '@/lib/api'
  + import { Spacing } from '@/constants/theme';
  + 
  + function sleepBadge(hours: number) {
  +   if (hours >= 7) return { label: 'Excelente', variant: 'green'  } as const
  +   if (hours >= 5) return { label: 'Regular', variant: 'yellow' } as const
  + 
  +   return {
  +     label: 'Ruim', variant: 'red'
  +   } as const
  + }
  + 
  + // TODO: Move this into the time utilities
  + function formatDuration(average: number) {
  +   const h = Math.floor(average)
  +   const m = Math.round((average - h) * 60)
  +   return `${h}h ${m.toString().padStart(2, '0')}min`
  + }
  + 
  + type Props = { card: HistoryCard & { raw: SleepRecord } }
  + 
  + export function SleepRecordCard({ card }: Props) {
  +   const badge    = sleepBadge(card.raw.average)
  +   const duration = formatDuration(card.raw.average)
  + 
  +   const time     = new Date(card.timestamp)
  +     .toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })
  + 
  +   return (
  +     <Card style={styles.card}>
  +       <View style={styles.row}>
  +         <View style={[styles.iconWrap, { backgroundColor: '#ede9fe' }]}>
  +           <MaterialIcons name="bedtime" size={22} color="#7c3aed" />
  +         </View>
  +         <View style={styles.body}>
  +           <View style={styles.titleRow}>
  +             <Text style={styles.title}>Sono</Text>
  +             <Text style={styles.time}>{time}</Text>
  +           </View>
  +           <View style={styles.durationRow}>
  +             <Text style={styles.duration}>{duration}</Text>
  +           </View>
  +           {card.raw.annotations ? (
  +             <Text style={styles.summary} numberOfLines={2}>
  +               {card.raw.annotations.trim()}
  +             </Text>
  +           ) : null}
  +           <Badge label={badge.label} variant={badge.variant} style={styles.badge} />
  +         </View>
  +       </View>
  +     </Card>
  +   )
  + }
  + 
  + const styles = StyleSheet.create({
  +   card: {
  +     padding: Spacing.cardGap
  +   },
  +   row:         {
  +     flexDirection: 'row',
  +     alignItems: 'flex-start',
  +     gap: 12
  +   },
  +   iconWrap: {
  +     width: 40,
  +     height: 40,
  +     borderRadius: 20,
  +     alignItems: 'center',
  +     justifyContent: 'center',
  +     marginTop: 1
  +   },
  +   body: {
  +     flex: 1
  +   },
  +   titleRow: {
  +     flexDirection: 'row',
  +     justifyContent: 'space-between',
  +     alignItems: 'center',
  +     marginBottom: 4
  +   },
  +   title: {
  +     fontSize: 15,
  +     fontWeight: '600'
  +   },
  +   time: {
  +     fontSize: 13,
  +     opacity: 0.45
  +   },
  +   durationRow: {
  +     flexDirection: 'row',
  +     alignItems: 'center',
  +     gap: 8,
  +     marginBottom: 4
  +   },
  +   duration: {
  +     fontSize: 13,
  +     fontWeight: '500',
  +     opacity: 0.75
  +   },
  +   summary: {
  +     fontSize: 13,
  +     opacity: 0.6,
  +     lineHeight: 18,
  +     marginTop: 4,
  +     fontStyle: 'italic'
  +   },
  +   badge: {
  +     alignSelf: 'flex-start',
  +     marginTop: 4,
  +     maxWidth: '50%'
  +   },
  + })