From fe213da7000df31dae9bab626312c4a93fad9591 Mon Sep 17 00:00:00 2001 From: kang Date: Thu, 23 Apr 2026 16:53:02 +0800 Subject: [PATCH] feat: add SampleReport.tsx (was missed in previous commit, untracked) --- src/components/SampleReport.tsx | 238 ++++++++++++++++++++++++++++++++ 1 file changed, 238 insertions(+) create mode 100644 src/components/SampleReport.tsx diff --git a/src/components/SampleReport.tsx b/src/components/SampleReport.tsx new file mode 100644 index 0000000..79737b6 --- /dev/null +++ b/src/components/SampleReport.tsx @@ -0,0 +1,238 @@ +import { motion } from "framer-motion"; +import { + Car, + Clock, + Sparkles, + AlertTriangle, + Wrench, + Share2, +} from "lucide-react"; + +const SAMPLE = { + vehicle: "2018 Honda Civic 1.5L Turbo", + mileage: "108,432", + scannedAgo: "2 min ago", + analysisTime: "9.8 sec", + healthScore: 78, + healthGrade: "B+", + healthLabel: "Good", + issues: [ + { + dtc: "P0420", + title: "Catalytic Converter Degradation", + desc: + "Catalyst efficiency is below threshold. Common on 2016–2018 Civics past 80k miles. Not urgent, but worth budgeting for.", + severityLabel: "Plan within 2 weeks", + severityColor: "#F59E0B", + cost: "$400 – $650", + }, + { + dtc: "P0171", + title: "Lean Fuel Condition (Bank 1)", + desc: + "Engine is running lean — likely a vacuum leak or dirty MAF sensor. Cheap to diagnose, cheap to fix.", + severityLabel: "Easy fix", + severityColor: "#10B981", + cost: "$80 – $120", + }, + { + dtc: "P0496", + title: "EVAP Flow During Non-Purge", + desc: + "Likely a stuck purge valve. Often resolved with a $20 part and 30 minutes of labor.", + severityLabel: "Easy fix", + severityColor: "#10B981", + cost: "$40 – $80", + }, + ], + aiSummary: + "Your Civic is in solid shape for 108k miles. The catalytic converter is the only item I'd plan to address in the next two weeks — it's not urgent, but past 80k miles on the 1.5L turbo it's worth budgeting for. The lean condition and EVAP code are quick, cheap fixes you can ask your mechanic to bundle into the same visit.", + totalLow: 520, + totalHigh: 850, +} as const; + +export default function SampleReport() { + return ( +
+ {/* Section header */} + + + SAMPLE REPORT · LIVE PREVIEW + +

+ What you'll actually see. +

+

+ A complete AI repair report — exactly what shows up on your phone + after a 10-second scan. No login. No app install. +

+ + + {/* Report container */} + + {/* Top strip — vehicle + scan timestamp */} +
+
+
+ Vehicle +
+
+ {SAMPLE.vehicle} +
+
+ {SAMPLE.mileage} mi +
+
+
+
+ Scanned +
+
+ {SAMPLE.scannedAgo} +
+
+ analysis time: {SAMPLE.analysisTime} +
+
+
+ + {/* Body grid */} +
+ {/* Health score card */} +
+
+ HEALTH SCORE +
+
+
+
+ {SAMPLE.healthScore} +
+
/100
+
+
+ + {SAMPLE.healthGrade} · {SAMPLE.healthLabel} + +
+
+ {/* Decorative ring */} +
+
+ + {/* AI Summary card */} +
+
+ AI SUMMARY +
+

+ {SAMPLE.aiSummary} +

+
+ + Generated from 706 GB of vehicle-specific repair knowledge +
+
+ + {/* Issues — full width */} +
+
+
+ 3 ISSUES FOUND +
+ + PRIORITY ORDER + +
+
    + {SAMPLE.issues.map((issue) => ( +
  • + + {issue.dtc} + +
    +
    + {issue.title} +
    +

    + {issue.desc} +

    +
    +
    +
    + {issue.cost} +
    +
    + + {issue.severityLabel} +
    +
    +
    • + ))} +
+
+
+ + {/* Bottom strip — total + CTAs */} +
+
+
+ TOTAL ESTIMATED REPAIR COST +
+
+ ${SAMPLE.totalLow}{" "} + – $ + {SAMPLE.totalHigh} +
+
+ +
+ +
+ ); +}