feat: polish UI, fix top inset, and add check-up correctness stats

src/tabs/CheckupTab.js

@@ -2,7 +2,14 @@ import React from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { styles } from '../styles';
 
-export default function CheckupTab({ checkupSession, answerCheckupYes, openFixModal, createFreshCheckupSession, saveCheckup }) {
+export default function CheckupTab({
+  checkupSession,
+  checkupStats,
+  answerCheckupYes,
+  openFixModal,
+  createFreshCheckupSession,
+  saveCheckup,
+}) {
   return (
     <View style={styles.section}>
       <View style={styles.sectionRow}>
@@ -12,6 +19,20 @@ export default function CheckupTab({ checkupSession, answerCheckupYes, openFixMo
         </Pressable>
       </View>
 
+      {!!checkupSession.length && (
+        <View style={styles.statsRow}>
+          <View style={[styles.statPill, styles.statPillCorrect]}>
+            <Text style={styles.statPillText}>Correct: {checkupStats.correct}</Text>
+          </View>
+          <View style={[styles.statPill, styles.statPillBad]}>
+            <Text style={styles.statPillText}>Bad: {checkupStats.bad}</Text>
+          </View>
+          <View style={[styles.statPill, styles.statPillPending]}>
+            <Text style={styles.statPillText}>Pending: {checkupStats.pending}</Text>
+          </View>
+        </View>
+      )}
+
       {checkupSession.length === 0 ? <Text style={styles.muted}>No items for this trip yet.</Text> : null}
 
       {checkupSession.map((entry) => (
@@ -30,7 +51,13 @@ export default function CheckupTab({ checkupSession, answerCheckupYes, openFixMo
             <Pressable style={styles.answerNo} onPress={() => openFixModal(entry.itemId)}>
               <Text style={styles.answerText}>No</Text>
             </Pressable>
-            <View style={[styles.answerStateDot, entry.confirmed ? styles.answerStateDotOn : null]} />
+            <View
+              style={[
+                styles.answerStateDot,
+                entry.result === 'correct' ? styles.answerStateDotOn : null,
+                entry.result === 'bad' ? styles.answerStateDotBad : null,
+              ]}
+            />
           </View>
         </View>
       ))}