How to Integrate Bolt.new with Apple HealthKit

1-- Run this in your Supabase SQL editor
2CREATE TABLE health_metrics (
3  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
4  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE NOT NULL,
5  metric_type TEXT NOT NULL,
6  value FLOAT8 NOT NULL,
7  unit TEXT NOT NULL,
8  start_date TIMESTAMPTZ NOT NULL,
9  end_date TIMESTAMPTZ NOT NULL,
10  source_name TEXT DEFAULT 'Apple Health',
11  synced_at TIMESTAMPTZ DEFAULT NOW()
12);
13
14-- Index for efficient date-range queries per user
15CREATE INDEX idx_health_metrics_user_date
16  ON health_metrics(user_id, metric_type, start_date DESC);
17
18-- Enable Row Level Security
19ALTER TABLE health_metrics ENABLE ROW LEVEL SECURITY;
20
21CREATE POLICY "Users can read own health data"
22  ON health_metrics FOR SELECT
23  USING (auth.uid() = user_id);
24
25CREATE POLICY "Users can insert own health data"
26  ON health_metrics FOR INSERT
27  WITH CHECK (auth.uid() = user_id);
28
29-- Daily aggregated view for dashboard queries
30CREATE VIEW daily_health_summary AS
31SELECT
32  user_id,
33  metric_type,
34  DATE(start_date) AS day,
35  SUM(value) AS daily_total,
36  AVG(value) AS daily_avg,
37  COUNT(*) AS sample_count
38FROM health_metrics
39GROUP BY user_id, metric_type, DATE(start_date);

1// app/api/health/parse-export/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { XMLParser } from 'fast-xml-parser';
4
5const MAX_FILE_SIZE = 50 * 1024 * 1024; // 50MB
6
7interface HealthRecord {
8  '@_type': string;
9  '@_value': string;
10  '@_unit': string;
11  '@_startDate': string;
12  '@_endDate': string;
13}
14
15interface DailyMetric {
16  date: string;
17  value: number;
18}
19
20function toDateString(isoDate: string): string {
21  return isoDate.split(' ')[0]; // '2024-03-15 08:30:00 +0000' → '2024-03-15'
22}
23
24export async function POST(request: NextRequest) {
25  const formData = await request.formData();
26  const file = formData.get('healthExport') as File | null;
27
28  if (!file) {
29    return NextResponse.json({ error: 'No file uploaded' }, { status: 400 });
30  }
31  if (file.size > MAX_FILE_SIZE) {
32    return NextResponse.json({ error: 'File exceeds 50MB limit' }, { status: 400 });
33  }
34
35  const text = await file.text();
36  const parser = new XMLParser({ ignoreAttributes: false, attributeNamePrefix: '@_' });
37  const parsed = parser.parse(text);
38  const records: HealthRecord[] = parsed?.HealthData?.Record ?? [];
39
40  const stepsByDay: Record<string, number> = {};
41  const heartRateByDay: Record<string, number[]> = {};
42  const restingHRByDay: Record<string, number[]> = {};
43  const caloriesByDay: Record<string, number> = {};
44
45  for (const record of records) {
46    const day = toDateString(record['@_startDate']);
47    const value = parseFloat(record['@_value']);
48    if (isNaN(value)) continue;
49
50    switch (record['@_type']) {
51      case 'HKQuantityTypeIdentifierStepCount':
52        stepsByDay[day] = (stepsByDay[day] ?? 0) + value;
53        break;
54      case 'HKQuantityTypeIdentifierHeartRate':
55        (heartRateByDay[day] ??= []).push(value);
56        break;
57      case 'HKQuantityTypeIdentifierRestingHeartRate':
58        (restingHRByDay[day] ??= []).push(value);
59        break;
60      case 'HKQuantityTypeIdentifierActiveEnergyBurned':
61        caloriesByDay[day] = (caloriesByDay[day] ?? 0) + value;
62        break;
63    }
64  }
65
66  const toSortedArray = (map: Record<string, number>): DailyMetric[] =>
67    Object.entries(map)
68      .map(([date, value]) => ({ date, value: Math.round(value) }))
69      .sort((a, b) => a.date.localeCompare(b.date));
70
71  const avgToArray = (map: Record<string, number[]>): DailyMetric[] =>
72    Object.entries(map)
73      .map(([date, vals]) => ({ date, value: Math.round(vals.reduce((a, b) => a + b, 0) / vals.length) }))
74      .sort((a, b) => a.date.localeCompare(b.date));
75
76  return NextResponse.json({
77    stepsByDay: toSortedArray(stepsByDay),
78    heartRateByDay: avgToArray(heartRateByDay),
79    restingHRByDay: avgToArray(restingHRByDay),
80    caloriesByDay: toSortedArray(caloriesByDay),
81    recordCount: records.length,
82  });
83}

1// app/components/HealthChart.tsx
2'use client';
3import {
4  LineChart, Line, XAxis, YAxis, CartesianGrid,
5  Tooltip, ResponsiveContainer, ReferenceLine
6} from 'recharts';
7
8interface DataPoint { date: string; value: number; }
9
10interface HealthChartProps {
11  data: DataPoint[];
12  title: string;
13  unit: string;
14  color?: string;
15  goalValue?: number;
16  goalLabel?: string;
17}
18
19export function HealthChart({
20  data, title, unit, color = '#3b82f6', goalValue, goalLabel
21}: HealthChartProps) {
22  const formatDate = (dateStr: string) => {
23    const d = new Date(dateStr + 'T00:00:00');
24    return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
25  };
26
27  return (
28    <div className="bg-white rounded-xl p-5 shadow-sm border border-gray-100">
29      <h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-4">
30        {title}
31      </h3>
32      <ResponsiveContainer width="100%" height={200}>
33        <LineChart data={data} margin={{ top: 5, right: 10, left: 0, bottom: 5 }}>
34          <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
35          <XAxis
36            dataKey="date"
37            tickFormatter={formatDate}
38            tick={{ fontSize: 11, fill: '#9ca3af' }}
39            interval="preserveStartEnd"
40          />
41          <YAxis tick={{ fontSize: 11, fill: '#9ca3af' }} />
42          <Tooltip
43            formatter={(value: number) => [`${value.toLocaleString()} ${unit}`, title]}
44            labelFormatter={formatDate}
45          />
46          {goalValue && (
47            <ReferenceLine
48              y={goalValue}
49              stroke="#10b981"
50              strokeDasharray="4 4"
51              label={{ value: goalLabel ?? `Goal: ${goalValue}`, fontSize: 11, fill: '#10b981' }}
52            />
53          )}
54          <Line
55            type="monotone"
56            dataKey="value"
57            stroke={color}
58            strokeWidth={2}
59            dot={false}
60            activeDot={{ r: 4 }}
61          />
62        </LineChart>
63      </ResponsiveContainer>
64    </div>
65  );
66}

1// lib/supabase.ts
2import { createClient } from '@supabase/supabase-js';
3
4const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
5const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
6
7export const supabase = createClient(supabaseUrl, supabaseAnonKey);
8
9// lib/health-queries.ts
10import { supabase } from './supabase';
11
12export async function getHealthSummary(userId: string, days: number = 30) {
13  const since = new Date();
14  since.setDate(since.getDate() - days);
15
16  const { data, error } = await supabase
17    .from('daily_health_summary')
18    .select('metric_type, day, daily_total, daily_avg')
19    .eq('user_id', userId)
20    .gte('day', since.toISOString().split('T')[0])
21    .order('day', { ascending: true });
22
23  if (error) throw new Error(error.message);
24
25  const stepsByDay = data
26    ?.filter(r => r.metric_type === 'HKQuantityTypeIdentifierStepCount')
27    .map(r => ({ date: r.day, value: Math.round(r.daily_total) })) ?? [];
28
29  const heartRateByDay = data
30    ?.filter(r => r.metric_type === 'HKQuantityTypeIdentifierHeartRate')
31    .map(r => ({ date: r.day, value: Math.round(r.daily_avg) })) ?? [];
32
33  return { stepsByDay, heartRateByDay };
34}