Jakob WennbergandClaude Opus 4.6
5d66dd6bfc
* fix: prevent Chrome auto-translate from crashing React during onboarding
Chrome auto-translate modifies DOM text nodes when it detects a Swedish
page (lang="sv") in a browser set to English. React does not expect
external DOM mutations and throws, crashing the entire component tree
into global-error.tsx on every step transition.
Add translate="no" and <meta name="google" content="notranslate"> to
suppress browser translation. Also fix timezone-unsafe date parsing in
fiscal period validation (new Date("YYYY-MM-DD") + getDate() returns
local-timezone values, shifting dates by -1 day in Western timezones).
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* fix: add notranslate meta tag to global-error.tsx for consistency
Per review feedback — global-error.tsx renders its own <html> document,
so it needs the same <meta name="google" content="notranslate"> tag as
layout.tsx to fully suppress Chrome translation on error pages.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* feat: add MCP server extension with OAuth, API keys, and KPI dashboard
Let users do bookkeeping through Claude Desktop, Claude Code, or any
MCP-compatible client. "Show my uncategorized transactions." "Book that
as office supplies." "Invoice Acme for 15,000 kr."
MCP server (extension):
- 10 tools: transactions, categorization, customers, invoices,
trial balance, VAT report, KPI report, income statement
- JSON-RPC 2.0 protocol (no SDK dependency, works in serverless)
- Tool annotations, pagination, input validation per MCP best practices
- Same engine as web UI (VAT rules, exchange rates, event emission)
API key infrastructure (core):
- api_keys table with RLS, rate limiting (100 RPM), scopes column
- Atomic rate limit via DB RPC (validate_and_increment_api_key)
- Key management API routes + settings UI panel
OAuth 2.1 for Claude Desktop connectors:
- .well-known/oauth-protected-resource + oauth-authorization-server
- Authorization endpoint with consent page
- Token endpoint with PKCE verification
- Stateless encrypted auth codes (AES-256-GCM, no DB storage)
- Dynamic client registration
KPI dashboard:
- /nyckeltal page with hero cards, operational grid, trend chart
- GET /api/reports/kpi endpoint
- Gross margin, cash position, expense ratio, avg payment days,
VAT liability, revenue/expense trend
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* fix: address OAuth security vulnerabilities from code review
Critical fixes:
- Auth code replay: Track used codes in oauth_used_codes table with
unique constraint. Codes are single-use per OAuth 2.1 §4.1.2.
- Open redirect: Validate redirect_uri against hardcoded allowlist
of known Claude callback URLs + localhost for dev.
P1 fixes:
- Move API key creation from /authorize to /token endpoint. Keys are
only created after PKCE verification, preventing orphaned keys on
abandoned OAuth flows.
- Add ensureInitialized() to MCP server so event handlers load and
transaction.categorized events reach extensions.
P2 fixes:
- Remove 'plain' from PKCE methods — only S256 is advertised and
accepted.
- Fix extension count in sectors test (10 → 11 for mcp-server).
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* fix: remove duplicate ensureInitialized() that caused circular import
The extension router (ext/[...path]/route.ts) already calls
ensureInitialized() before dispatching to handlers. The duplicate
call in server.ts created a circular import that Turbopack couldn't
resolve, breaking the Vercel build.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
70 lines
2.4 KiB
TypeScript
70 lines
2.4 KiB
TypeScript
'use client'
|
|
|
|
import { Card, CardContent } from '@/components/ui/card'
|
|
import { formatCurrency } from '@/lib/utils'
|
|
import type { KPIReport } from '@/types'
|
|
|
|
interface KPIHeroCardsProps {
|
|
report: KPIReport
|
|
}
|
|
|
|
export function KPIHeroCards({ report }: KPIHeroCardsProps) {
|
|
return (
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
{/* Gross margin */}
|
|
<Card>
|
|
<CardContent className="p-5">
|
|
<p className="text-xs text-muted-foreground mb-1">Bruttomarginal</p>
|
|
<p className="font-display text-xl tabular-nums tracking-tight">
|
|
{report.grossMargin !== null ? `${report.grossMargin}%` : '—'}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground mt-1">av intäkter</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Net result */}
|
|
<Card>
|
|
<CardContent className="p-5">
|
|
<p className="text-xs text-muted-foreground mb-1">Resultat</p>
|
|
<p className={`font-display text-xl tabular-nums tracking-tight ${
|
|
report.netResult >= 0 ? 'text-[hsl(var(--chart-1))]' : 'text-[hsl(var(--chart-2))]'
|
|
}`}>
|
|
{formatCurrency(report.netResult)}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground mt-1">netto</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Cash position */}
|
|
<Card>
|
|
<CardContent className="p-5">
|
|
<p className="text-xs text-muted-foreground mb-1">Kassa</p>
|
|
<p className={`font-display text-xl tabular-nums tracking-tight ${
|
|
report.cashPosition > 0 ? 'text-[hsl(var(--chart-1))]' : 'text-[hsl(var(--chart-2))]'
|
|
}`}>
|
|
{formatCurrency(report.cashPosition)}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground mt-1">likvida medel</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Outstanding receivables */}
|
|
<Card>
|
|
<CardContent className="p-5">
|
|
<p className="text-xs text-muted-foreground mb-1">Kundfordringar</p>
|
|
<p className="font-display text-xl tabular-nums tracking-tight">
|
|
{formatCurrency(report.outstandingReceivables)}
|
|
</p>
|
|
{report.overdueReceivables > 0 ? (
|
|
<p className="text-xs text-[hsl(var(--chart-2))] mt-1">
|
|
varav förfallet: {formatCurrency(report.overdueReceivables)}
|
|
</p>
|
|
) : (
|
|
<p className="text-xs text-muted-foreground mt-1">utestående</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|