import { Head, router, usePage } from '@inertiajs/react'; import { useState } from 'react'; import { Target, Plus, Trash2, CheckCircle2 } from 'lucide-react'; type Metric = { key: string; name: string; unit: string }; type Goal = { id: number; name: string; metric_key: string; direction: string; target_value: number; current: number | null; unit: string; progress: number; achieved: boolean; due_date: string | null; status: string; }; function fmt(v: number | null, unit: string) { if (v === null) return '—'; if (unit === 'currency') return '$' + v.toLocaleString(); if (unit === 'percent') return v + '%'; return v.toLocaleString(); } export default function Goals() { const props = usePage().props as unknown as { goals: Goal[]; metrics: Metric[] }; const { goals, metrics } = props; const [form, setForm] = useState({ name: '', metric_key: '', direction: 'increase', target_value: '', due_date: '' }); const create = () => { if (!form.name || !form.metric_key || form.target_value === '') return; router.post('/goals', { ...form, target_value: parseFloat(form.target_value) }, { preserveScroll: true, onSuccess: () => setForm({ name: '', metric_key: '', direction: 'increase', target_value: '', due_date: '' }), }); }; return ( <>

Goals & OKRs

New goal

setForm({ ...form, name: e.target.value })} placeholder="Goal name" className="rounded-md border border-border bg-background px-3 py-2 text-sm sm:col-span-2" /> setForm({ ...form, target_value: e.target.value })} type="number" placeholder="Target value" className="rounded-md border border-border bg-background px-3 py-2 text-sm" /> setForm({ ...form, due_date: e.target.value })} type="date" className="rounded-md border border-border bg-background px-3 py-2 text-sm" />

{goals.map((g) => (

{g.name} {g.achieved && }

{fmt(g.current, g.unit)} of {fmt(g.target_value, g.unit)} target {g.due_date && ` · due ${g.due_date}`}

{g.progress}%

))} {goals.length === 0 && (

No goals yet. Set one above to track a metric against a target.

)}

); }