Multi-user via PocketID: account linking, group gating, admin user management
PocketID OIDC already auto-provisioned users keyed by pocketid_sub, and the data layer was already fully user-scoped. This adds the missing pieces for running real multi-user: - auth.py callback: link by email to an existing un-linked account (so the admin keeps their data when first signing in by passkey), collision-safe username generation, and request the `groups` scope. - Group gating: optional pocketid_allowed_group (admin-config or POCKETID_ALLOWED_GROUP env); users lacking the group are rejected at the callback and redirected to /login?auth_error=not_authorized. - New admin users API (app/api/users.py): list users, promote/demote admin (guards against demoting/locking out the last admin or yourself), and delete a user with ordered bulk deletes of all their data + on-disk files. - ProfilePage: allowed-group field; LoginPage: rejected-login message; Layout: admin-only Users nav; new UsersPage. Resync milevault_export to current source (it had drifted many features behind — missing garmin_sync, npm-ci Dockerfile and @polyline-codec that broke its own CI) and add POCKETID_ALLOWED_GROUP to .env.example. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Link, useNavigate } from 'react-router-dom'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'
|
||||
import { startOfWeek, format, subWeeks, eachWeekOfInterval, subDays } from 'date-fns'
|
||||
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from 'recharts'
|
||||
import { startOfWeek, format, subWeeks, eachWeekOfInterval, subDays, addDays } from 'date-fns'
|
||||
import api from '../utils/api'
|
||||
import StatCard from '../components/ui/StatCard'
|
||||
import {
|
||||
@@ -9,7 +9,69 @@ import {
|
||||
formatDate, sportIcon, formatSleep,
|
||||
} from '../utils/format'
|
||||
|
||||
function bbLevelColor(level) {
|
||||
if (level == null) return '#6b7280'
|
||||
if (level >= 75) return '#3b82f6'
|
||||
if (level >= 50) return '#22c55e'
|
||||
if (level >= 25) return '#f59e0b'
|
||||
return '#ef4444'
|
||||
}
|
||||
|
||||
function MiniBodyBattery({ bb }) {
|
||||
if (!bb?.end_level && !bb?.charged) return null
|
||||
const { charged, drained, start_level, end_level, values } = bb
|
||||
const color = bbLevelColor(end_level)
|
||||
const sparkData = Array.isArray(values)
|
||||
? values.map(([ts, level]) => ({ ts, level }))
|
||||
: []
|
||||
return (
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-800 p-4 h-full">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="text-sm font-medium text-gray-300">Body Battery</h3>
|
||||
<Link to="/health" className="text-xs text-blue-400 hover:underline">View →</Link>
|
||||
</div>
|
||||
<div className="flex items-baseline gap-3 flex-wrap">
|
||||
{end_level != null && (
|
||||
<span className="text-3xl font-bold" style={{ color }}>{Math.round(end_level)}</span>
|
||||
)}
|
||||
{charged != null && (
|
||||
<span className="text-sm font-semibold text-green-400">+{charged}</span>
|
||||
)}
|
||||
{drained != null && (
|
||||
<span className="text-sm font-semibold text-orange-400">-{drained}</span>
|
||||
)}
|
||||
</div>
|
||||
{start_level != null && end_level != null && (
|
||||
<p className="text-xs text-gray-500 mt-1">{start_level} → {end_level} today</p>
|
||||
)}
|
||||
{sparkData.length >= 2 && (
|
||||
<div className="mt-3">
|
||||
<ResponsiveContainer width="100%" height={60}>
|
||||
<AreaChart data={sparkData} margin={{ top: 2, right: 0, bottom: 0, left: 0 }}>
|
||||
<defs>
|
||||
<linearGradient id="bbGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor={color} stopOpacity={0.3} />
|
||||
<stop offset="95%" stopColor={color} stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<Area type="monotone" dataKey="level" stroke={color} strokeWidth={1.5}
|
||||
fill="url(#bbGrad)" dot={false} isAnimationActive={false} />
|
||||
<Tooltip
|
||||
contentStyle={{ background: '#111827', border: '1px solid #374151', borderRadius: 6, fontSize: 11 }}
|
||||
labelFormatter={ts => format(new Date(ts), 'HH:mm')}
|
||||
formatter={v => [`${Math.round(v)}`, 'Battery']}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function WeeklyChart({ activities }) {
|
||||
const navigate = useNavigate()
|
||||
|
||||
if (!activities?.length) return (
|
||||
<div className="flex items-center justify-center h-36 text-gray-600 text-sm">No activities yet</div>
|
||||
)
|
||||
@@ -23,26 +85,39 @@ function WeeklyChart({ activities }) {
|
||||
|
||||
const data = weeks.map(weekStart => {
|
||||
const weekKey = format(weekStart, 'MMM d')
|
||||
const weekEnd = new Date(weekStart)
|
||||
weekEnd.setDate(weekEnd.getDate() + 7)
|
||||
const weekEnd = addDays(weekStart, 7)
|
||||
const km = activities
|
||||
.filter(a => {
|
||||
const t = new Date(a.start_time)
|
||||
return t >= weekStart && t < weekEnd
|
||||
})
|
||||
.reduce((s, a) => s + (a.distance_m || 0) / 1000, 0)
|
||||
return { week: weekKey, km: parseFloat(km.toFixed(2)) }
|
||||
return {
|
||||
week: weekKey,
|
||||
km: parseFloat(km.toFixed(2)),
|
||||
weekStartISO: format(weekStart, 'yyyy-MM-dd'),
|
||||
weekEndISO: format(weekEnd, 'yyyy-MM-dd'),
|
||||
}
|
||||
})
|
||||
|
||||
const handleBarClick = (entry) => {
|
||||
if (entry?.activePayload?.[0]?.payload) {
|
||||
const { weekStartISO, weekEndISO } = entry.activePayload[0].payload
|
||||
navigate(`/activities?from=${weekStartISO}&to=${weekEndISO}`)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<ResponsiveContainer width="100%" height={140}>
|
||||
<BarChart data={data} margin={{ top: 4, right: 4, bottom: 4, left: 0 }} barSize={20}>
|
||||
<BarChart data={data} margin={{ top: 4, right: 4, bottom: 4, left: 0 }} barSize={20}
|
||||
onClick={handleBarClick} style={{ cursor: 'pointer' }}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#1f2937" vertical={false} />
|
||||
<XAxis dataKey="week" tick={{ fontSize: 10, fill: '#6b7280' }} axisLine={false} tickLine={false} />
|
||||
<YAxis tick={{ fontSize: 10, fill: '#6b7280' }} axisLine={false} tickLine={false} width={28}
|
||||
tickFormatter={v => `${v.toFixed(0)}`} />
|
||||
<Tooltip contentStyle={{ background: '#111827', border: '1px solid #374151', borderRadius: 8, fontSize: 12 }}
|
||||
formatter={(v) => [`${v.toFixed(1)} km`, 'Distance']} />
|
||||
formatter={(v) => [`${v.toFixed(1)} km`, 'Distance']}
|
||||
cursor={{ fill: 'rgba(59,130,246,0.1)' }} />
|
||||
<Bar dataKey="km" fill="#3b82f6" radius={[3, 3, 0, 0]} isAnimationActive={false} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
@@ -73,8 +148,12 @@ export default function DashboardPage() {
|
||||
queryFn: () => api.get('/records/', { params: { sport_type: 'running' } }).then(r => r.data),
|
||||
})
|
||||
|
||||
const { data: ytdStats } = useQuery({
|
||||
queryKey: ['ytd-stats'],
|
||||
queryFn: () => api.get('/activities/stats/ytd').then(r => r.data),
|
||||
})
|
||||
|
||||
const latest = healthSummary?.latest
|
||||
const totalDistance = recentActivities?.reduce((s, a) => s + (a.distance_m || 0), 0) ?? 0
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
@@ -84,19 +163,23 @@ export default function DashboardPage() {
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
|
||||
<StatCard label="Recent activities" value={recentActivities?.length ?? 0} />
|
||||
<StatCard label="Total distance" value={formatDistance(totalDistance)} accent="blue" />
|
||||
<StatCard label="Running this year" value={ytdStats ? `${ytdStats.running_km.toFixed(0)} km` : '--'} accent="blue" />
|
||||
<StatCard label="Cycling this year" value={ytdStats ? `${ytdStats.cycling_km.toFixed(0)} km` : '--'} accent="orange" />
|
||||
<StatCard label="Resting HR" value={formatHeartRate(latest?.resting_hr)} accent="red" />
|
||||
<StatCard label="Sleep" value={formatSleep(latest?.sleep_duration_s)} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
||||
<div className="lg:col-span-2 bg-gray-900 rounded-xl border border-gray-800 p-4">
|
||||
<h3 className="text-sm font-medium text-gray-300 mb-3">Weekly distance (km)</h3>
|
||||
<WeeklyChart activities={allActivities} />
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-800 p-4 space-y-3">
|
||||
<div className="lg:col-span-1">
|
||||
<MiniBodyBattery bb={latest?.body_battery} />
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-1 bg-gray-900 rounded-xl border border-gray-800 p-4 space-y-3">
|
||||
<h3 className="text-sm font-medium text-gray-300">Health today</h3>
|
||||
{latest ? (
|
||||
<>
|
||||
|
||||
Reference in New Issue
Block a user