{ "name": "KHMYS", "formatVersion": 1, "files": [ { "name": "tokens.css", "type": "text/css", "content": ":root {\n --background: 0 0% 100%;\n --foreground: 224 71% 4%;\n --card: 0 0% 100%;\n --card-foreground: 224 71% 4%;\n --popover: 0 0% 100%;\n --popover-foreground: 224 71% 4%;\n --primary: 224 100% 57%;\n --primary-foreground: 0 0% 100%;\n --secondary: 220 14% 96%;\n --secondary-foreground: 224 71% 4%;\n --muted: 220 14% 96%;\n --muted-foreground: 220 9% 46%;\n --accent: 220 14% 96%;\n --accent-foreground: 224 71% 4%;\n --destructive: 0 84% 60%;\n --destructive-foreground: 0 0% 100%;\n --border: 220 13% 91%;\n --input: 220 13% 91%;\n --ring: 224 100% 57%;\n --radius: 0.5rem;\n --chart-green: 142 71% 45%;\n --chart-red: 0 84% 60%;\n --chart-blue: 224 100% 57%;\n --chart-purple: 262 83% 58%;\n --chart-orange: 27 96% 61%;\n --chart-yellow: 48 96% 53%;\n --series-income: 142 71% 45%;\n --series-expense: 0 84% 60%;\n --series-magnitude: 224 100% 57%;\n --sidebar-background: 0 0% 98%;\n --sidebar-foreground: 224 71% 4%;\n --sidebar-primary: 224 100% 57%;\n --sidebar-primary-foreground: 0 0% 100%;\n --sidebar-accent: 220 14% 96%;\n --sidebar-accent-foreground: 224 71% 4%;\n --sidebar-border: 220 13% 91%;\n --sidebar-ring: 224 100% 57%;\n}\n\n.dark {\n --background: 220 20% 7%;\n --foreground: 210 20% 98%;\n --card: 220 18% 10%;\n --card-foreground: 210 20% 98%;\n --popover: 220 18% 10%;\n --popover-foreground: 210 20% 98%;\n --secondary: 220 16% 14%;\n --secondary-foreground: 210 20% 98%;\n --muted: 220 16% 14%;\n --muted-foreground: 218 11% 55%;\n --accent: 220 16% 14%;\n --accent-foreground: 210 20% 98%;\n --destructive: 0 63% 31%;\n --border: 220 14% 14%;\n --input: 220 14% 16%;\n --series-income: 142 71% 40%;\n --series-expense: 0 84% 51%;\n --series-magnitude: 224 100% 64%;\n --sidebar-background: 220 20% 7%;\n --sidebar-foreground: 210 20% 90%;\n --sidebar-accent: 220 16% 13%;\n --sidebar-accent-foreground: 210 20% 98%;\n --sidebar-border: 220 14% 12%;\n}\n\n.ui-v2 {\n --background: 40 20% 98%;\n --foreground: 20 10% 10%;\n --card-foreground: 20 10% 10%;\n --popover-foreground: 20 10% 10%;\n --primary: 174 60% 40%;\n --secondary: 40 10% 94%;\n --secondary-foreground: 20 10% 10%;\n --muted: 40 10% 96%;\n --muted-foreground: 20 5% 45%;\n --accent: 40 10% 94%;\n --accent-foreground: 20 10% 10%;\n --border: 40 10% 90%;\n --input: 40 10% 90%;\n --ring: 174 60% 40%;\n --sidebar-background: 40 15% 97%;\n --sidebar-foreground: 20 10% 10%;\n --sidebar-primary: 174 60% 40%;\n --sidebar-accent: 40 10% 94%;\n --sidebar-accent-foreground: 20 10% 10%;\n --sidebar-border: 40 10% 92%;\n --sidebar-ring: 174 60% 40%;\n}\n\n.ui-v2.dark {\n --background: 0 0% 7%;\n --foreground: 30 10% 93%;\n --card: 0 0% 10%;\n --card-foreground: 30 10% 93%;\n --popover: 0 0% 10%;\n --popover-foreground: 30 10% 93%;\n --primary: 174 60% 45%;\n --primary-foreground: 0 0% 100%;\n --secondary: 0 0% 14%;\n --secondary-foreground: 30 10% 93%;\n --muted: 0 0% 13%;\n --muted-foreground: 0 0% 55%;\n --accent: 0 0% 14%;\n --accent-foreground: 30 10% 93%;\n --destructive: 0 72% 51%;\n --destructive-foreground: 0 0% 100%;\n --border: 0 0% 15%;\n --input: 0 0% 17%;\n --ring: 174 60% 45%;\n --radius: 0.5rem;\n --chart-green: 142 60% 50%;\n --chart-red: 0 75% 60%;\n --chart-blue: 224 100% 57%;\n --chart-purple: 262 83% 58%;\n --chart-orange: 27 96% 61%;\n --chart-yellow: 48 96% 53%;\n --series-income: 142 71% 40%;\n --series-expense: 0 84% 51%;\n --series-magnitude: 224 100% 64%;\n --sidebar-background: 0 0% 6%;\n --sidebar-foreground: 30 10% 85%;\n --sidebar-primary: 174 60% 45%;\n --sidebar-primary-foreground: 0 0% 100%;\n --sidebar-accent: 0 0% 12%;\n --sidebar-accent-foreground: 30 10% 93%;\n --sidebar-border: 0 0% 13%;\n --sidebar-ring: 174 60% 45%;\n}\n\n.landing-dark {\n --l-bg: 0 0% 4%;\n --l-fg: 0 0% 98%;\n --l-muted: 0 0% 62%;\n --l-line: 0 0% 15%;\n --l-card: 0 0% 8%;\n --l-card2: 0 0% 11%;\n --l-accent: 168 42% 62%;\n --l-accent-fg: 0 0% 7%;\n --l-invert: 0 0% 100%;\n --l-invert-fg: 0 0% 5%;\n --l-paper: 45 25% 95%;\n --l-ink: 0 0% 6%;\n --l-ink-muted: 0 0% 38%;\n}\n\n.landing-light {\n --l-bg: 45 25% 96%;\n --l-fg: 0 0% 6%;\n --l-muted: 0 0% 38%;\n --l-line: 40 10% 86%;\n --l-card: 0 0% 100%;\n --l-card2: 45 20% 93%;\n --l-accent: 172 62% 30%;\n --l-accent-fg: 0 0% 100%;\n --l-invert: 0 0% 6%;\n --l-invert-fg: 0 0% 100%;\n --l-paper: 0 0% 5%;\n --l-ink: 0 0% 98%;\n --l-ink-muted: 0 0% 62%;\n}\n" }, { "name": "tokens.json", "type": "application/json", "content": "{\n \"light\": {\n \"--background\": \"0 0% 100%\",\n \"--foreground\": \"224 71% 4%\",\n \"--card\": \"0 0% 100%\",\n \"--card-foreground\": \"224 71% 4%\",\n \"--popover\": \"0 0% 100%\",\n \"--popover-foreground\": \"224 71% 4%\",\n \"--primary\": \"224 100% 57%\",\n \"--primary-foreground\": \"0 0% 100%\",\n \"--secondary\": \"220 14% 96%\",\n \"--secondary-foreground\": \"224 71% 4%\",\n \"--muted\": \"220 14% 96%\",\n \"--muted-foreground\": \"220 9% 46%\",\n \"--accent\": \"220 14% 96%\",\n \"--accent-foreground\": \"224 71% 4%\",\n \"--destructive\": \"0 84% 60%\",\n \"--destructive-foreground\": \"0 0% 100%\",\n \"--border\": \"220 13% 91%\",\n \"--input\": \"220 13% 91%\",\n \"--ring\": \"224 100% 57%\",\n \"--radius\": \"0.5rem\",\n \"--chart-green\": \"142 71% 45%\",\n \"--chart-red\": \"0 84% 60%\",\n \"--chart-blue\": \"224 100% 57%\",\n \"--chart-purple\": \"262 83% 58%\",\n \"--chart-orange\": \"27 96% 61%\",\n \"--chart-yellow\": \"48 96% 53%\",\n \"--series-income\": \"142 71% 45%\",\n \"--series-expense\": \"0 84% 60%\",\n \"--series-magnitude\": \"224 100% 57%\",\n \"--sidebar-background\": \"0 0% 98%\",\n \"--sidebar-foreground\": \"224 71% 4%\",\n \"--sidebar-primary\": \"224 100% 57%\",\n \"--sidebar-primary-foreground\": \"0 0% 100%\",\n \"--sidebar-accent\": \"220 14% 96%\",\n \"--sidebar-accent-foreground\": \"224 71% 4%\",\n \"--sidebar-border\": \"220 13% 91%\",\n \"--sidebar-ring\": \"224 100% 57%\"\n },\n \"dark\": {\n \"--background\": \"220 20% 7%\",\n \"--foreground\": \"210 20% 98%\",\n \"--card\": \"220 18% 10%\",\n \"--card-foreground\": \"210 20% 98%\",\n \"--popover\": \"220 18% 10%\",\n \"--popover-foreground\": \"210 20% 98%\",\n \"--primary\": \"224 100% 57%\",\n \"--primary-foreground\": \"0 0% 100%\",\n \"--secondary\": \"220 16% 14%\",\n \"--secondary-foreground\": \"210 20% 98%\",\n \"--muted\": \"220 16% 14%\",\n \"--muted-foreground\": \"218 11% 55%\",\n \"--accent\": \"220 16% 14%\",\n \"--accent-foreground\": \"210 20% 98%\",\n \"--destructive\": \"0 63% 31%\",\n \"--destructive-foreground\": \"0 0% 100%\",\n \"--border\": \"220 14% 14%\",\n \"--input\": \"220 14% 16%\",\n \"--ring\": \"224 100% 57%\",\n \"--radius\": \"0.5rem\",\n \"--chart-green\": \"142 71% 45%\",\n \"--chart-red\": \"0 84% 60%\",\n \"--chart-blue\": \"224 100% 57%\",\n \"--chart-purple\": \"262 83% 58%\",\n \"--chart-orange\": \"27 96% 61%\",\n \"--chart-yellow\": \"48 96% 53%\",\n \"--series-income\": \"142 71% 40%\",\n \"--series-expense\": \"0 84% 51%\",\n \"--series-magnitude\": \"224 100% 64%\",\n \"--sidebar-background\": \"220 20% 7%\",\n \"--sidebar-foreground\": \"210 20% 90%\",\n \"--sidebar-primary\": \"224 100% 57%\",\n \"--sidebar-primary-foreground\": \"0 0% 100%\",\n \"--sidebar-accent\": \"220 16% 13%\",\n \"--sidebar-accent-foreground\": \"210 20% 98%\",\n \"--sidebar-border\": \"220 14% 12%\",\n \"--sidebar-ring\": \"224 100% 57%\"\n },\n \"alternate\": {\n \"light\": {\n \"--background\": \"40 20% 98%\",\n \"--foreground\": \"20 10% 10%\",\n \"--card\": \"0 0% 100%\",\n \"--card-foreground\": \"20 10% 10%\",\n \"--popover\": \"0 0% 100%\",\n \"--popover-foreground\": \"20 10% 10%\",\n \"--primary\": \"174 60% 40%\",\n \"--primary-foreground\": \"0 0% 100%\",\n \"--secondary\": \"40 10% 94%\",\n \"--secondary-foreground\": \"20 10% 10%\",\n \"--muted\": \"40 10% 96%\",\n \"--muted-foreground\": \"20 5% 45%\",\n \"--accent\": \"40 10% 94%\",\n \"--accent-foreground\": \"20 10% 10%\",\n \"--destructive\": \"0 84% 60%\",\n \"--destructive-foreground\": \"0 0% 100%\",\n \"--border\": \"40 10% 90%\",\n \"--input\": \"40 10% 90%\",\n \"--ring\": \"174 60% 40%\",\n \"--radius\": \"0.5rem\",\n \"--chart-green\": \"142 71% 45%\",\n \"--chart-red\": \"0 84% 60%\",\n \"--chart-blue\": \"224 100% 57%\",\n \"--chart-purple\": \"262 83% 58%\",\n \"--chart-orange\": \"27 96% 61%\",\n \"--chart-yellow\": \"48 96% 53%\",\n \"--series-income\": \"142 71% 45%\",\n \"--series-expense\": \"0 84% 60%\",\n \"--series-magnitude\": \"224 100% 57%\",\n \"--sidebar-background\": \"40 15% 97%\",\n \"--sidebar-foreground\": \"20 10% 10%\",\n \"--sidebar-primary\": \"174 60% 40%\",\n \"--sidebar-primary-foreground\": \"0 0% 100%\",\n \"--sidebar-accent\": \"40 10% 94%\",\n \"--sidebar-accent-foreground\": \"20 10% 10%\",\n \"--sidebar-border\": \"40 10% 92%\",\n \"--sidebar-ring\": \"174 60% 40%\"\n },\n \"dark\": {\n \"--background\": \"0 0% 7%\",\n \"--foreground\": \"30 10% 93%\",\n \"--card\": \"0 0% 10%\",\n \"--card-foreground\": \"30 10% 93%\",\n \"--popover\": \"0 0% 10%\",\n \"--popover-foreground\": \"30 10% 93%\",\n \"--primary\": \"174 60% 45%\",\n \"--primary-foreground\": \"0 0% 100%\",\n \"--secondary\": \"0 0% 14%\",\n \"--secondary-foreground\": \"30 10% 93%\",\n \"--muted\": \"0 0% 13%\",\n \"--muted-foreground\": \"0 0% 55%\",\n \"--accent\": \"0 0% 14%\",\n \"--accent-foreground\": \"30 10% 93%\",\n \"--destructive\": \"0 72% 51%\",\n \"--destructive-foreground\": \"0 0% 100%\",\n \"--border\": \"0 0% 15%\",\n \"--input\": \"0 0% 17%\",\n \"--ring\": \"174 60% 45%\",\n \"--radius\": \"0.5rem\",\n \"--chart-green\": \"142 60% 50%\",\n \"--chart-red\": \"0 75% 60%\",\n \"--chart-blue\": \"224 100% 57%\",\n \"--chart-purple\": \"262 83% 58%\",\n \"--chart-orange\": \"27 96% 61%\",\n \"--chart-yellow\": \"48 96% 53%\",\n \"--series-income\": \"142 71% 40%\",\n \"--series-expense\": \"0 84% 51%\",\n \"--series-magnitude\": \"224 100% 64%\",\n \"--sidebar-background\": \"0 0% 6%\",\n \"--sidebar-foreground\": \"30 10% 85%\",\n \"--sidebar-primary\": \"174 60% 45%\",\n \"--sidebar-primary-foreground\": \"0 0% 100%\",\n \"--sidebar-accent\": \"0 0% 12%\",\n \"--sidebar-accent-foreground\": \"30 10% 93%\",\n \"--sidebar-border\": \"0 0% 13%\",\n \"--sidebar-ring\": \"174 60% 45%\"\n }\n },\n \"landing\": {\n \"dark\": {\n \"--l-bg\": \"0 0% 4%\",\n \"--l-fg\": \"0 0% 98%\",\n \"--l-muted\": \"0 0% 62%\",\n \"--l-line\": \"0 0% 15%\",\n \"--l-card\": \"0 0% 8%\",\n \"--l-card2\": \"0 0% 11%\",\n \"--l-accent\": \"168 42% 62%\",\n \"--l-accent-fg\": \"0 0% 7%\",\n \"--l-invert\": \"0 0% 100%\",\n \"--l-invert-fg\": \"0 0% 5%\",\n \"--l-paper\": \"45 25% 95%\",\n \"--l-ink\": \"0 0% 6%\",\n \"--l-ink-muted\": \"0 0% 38%\"\n },\n \"light\": {\n \"--l-bg\": \"45 25% 96%\",\n \"--l-fg\": \"0 0% 6%\",\n \"--l-muted\": \"0 0% 38%\",\n \"--l-line\": \"40 10% 86%\",\n \"--l-card\": \"0 0% 100%\",\n \"--l-card2\": \"45 20% 93%\",\n \"--l-accent\": \"172 62% 30%\",\n \"--l-accent-fg\": \"0 0% 100%\",\n \"--l-invert\": \"0 0% 6%\",\n \"--l-invert-fg\": \"0 0% 100%\",\n \"--l-paper\": \"0 0% 5%\",\n \"--l-ink\": \"0 0% 98%\",\n \"--l-ink-muted\": \"0 0% 62%\"\n }\n }\n}\n" }, { "name": "index.css", "type": "text/css", "content": "/* Geist Sans, self-hosted (no external font request). Only the weights the\n app actually uses (font-normal/medium/semibold/bold); latin subset only. */\n@import \"@fontsource/geist-sans/latin-400.css\";\n@import \"@fontsource/geist-sans/latin-500.css\";\n@import \"@fontsource/geist-sans/latin-600.css\";\n@import \"@fontsource/geist-sans/latin-700.css\";\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 224 71% 4%;\n\n --card: 0 0% 100%;\n --card-foreground: 224 71% 4%;\n\n --popover: 0 0% 100%;\n --popover-foreground: 224 71% 4%;\n\n --primary: 224 100% 57%;\n --primary-foreground: 0 0% 100%;\n\n --secondary: 220 14% 96%;\n --secondary-foreground: 224 71% 4%;\n\n --muted: 220 14% 96%;\n --muted-foreground: 220 9% 46%;\n\n --accent: 220 14% 96%;\n --accent-foreground: 224 71% 4%;\n\n --destructive: 0 84% 60%;\n --destructive-foreground: 0 0% 100%;\n\n --border: 220 13% 91%;\n --input: 220 13% 91%;\n --ring: 224 100% 57%;\n\n --radius: 0.5rem;\n\n --chart-green: 142 71% 45%;\n --chart-red: 0 84% 60%;\n --chart-blue: 224 100% 57%;\n --chart-purple: 262 83% 58%;\n --chart-orange: 27 96% 61%;\n --chart-yellow: 48 96% 53%;\n\n /* Chart series tokens — validated with the data-viz palette checker against\n the light card surface (#fff): lightness band, chroma floor, CVD\n separation and contrast all pass. The income/expense pair sits in the\n 6-8 CVD floor band, which is legal only alongside secondary encoding, so\n those charts always ship a legend plus direct value labels. */\n --series-income: 142 71% 45%;\n --series-expense: 0 84% 60%;\n /* Single-hue ramp for magnitude (spend-by-category bars). */\n --series-magnitude: 224 100% 57%;\n\n --sidebar-background: 0 0% 98%;\n --sidebar-foreground: 224 71% 4%;\n --sidebar-primary: 224 100% 57%;\n --sidebar-primary-foreground: 0 0% 100%;\n --sidebar-accent: 220 14% 96%;\n --sidebar-accent-foreground: 224 71% 4%;\n --sidebar-border: 220 13% 91%;\n --sidebar-ring: 224 100% 57%;\n }\n\n .dark {\n --background: 220 20% 7%;\n --foreground: 210 20% 98%;\n\n --card: 220 18% 10%;\n --card-foreground: 210 20% 98%;\n\n --popover: 220 18% 10%;\n --popover-foreground: 210 20% 98%;\n\n --primary: 224 100% 57%;\n --primary-foreground: 0 0% 100%;\n\n --secondary: 220 16% 14%;\n --secondary-foreground: 210 20% 98%;\n\n --muted: 220 16% 14%;\n --muted-foreground: 218 11% 55%;\n\n --accent: 220 16% 14%;\n --accent-foreground: 210 20% 98%;\n\n --destructive: 0 63% 31%;\n --destructive-foreground: 0 0% 100%;\n\n --border: 220 14% 14%;\n --input: 220 14% 16%;\n --ring: 224 100% 57%;\n\n --chart-green: 142 71% 45%;\n --chart-red: 0 84% 60%;\n --chart-blue: 224 100% 57%;\n --chart-purple: 262 83% 58%;\n --chart-orange: 27 96% 61%;\n --chart-yellow: 48 96% 53%;\n\n /* Dark steps are re-derived for the dark card surface, not the light values\n reused — the previous tokens were identical in both themes. */\n --series-income: 142 71% 40%;\n --series-expense: 0 84% 51%;\n --series-magnitude: 224 100% 64%;\n\n --sidebar-background: 220 20% 7%;\n --sidebar-foreground: 210 20% 90%;\n --sidebar-primary: 224 100% 57%;\n --sidebar-primary-foreground: 0 0% 100%;\n --sidebar-accent: 220 16% 13%;\n --sidebar-accent-foreground: 210 20% 98%;\n --sidebar-border: 220 14% 12%;\n --sidebar-ring: 224 100% 57%;\n }\n}\n\n/* ─── V2 Perplexity-Inspired Theme ─── */\n@layer base {\n .ui-v2 {\n --background: 40 20% 98%;\n --foreground: 20 10% 10%;\n\n --card: 0 0% 100%;\n --card-foreground: 20 10% 10%;\n\n --popover: 0 0% 100%;\n --popover-foreground: 20 10% 10%;\n\n --primary: 174 60% 40%;\n --primary-foreground: 0 0% 100%;\n\n --secondary: 40 10% 94%;\n --secondary-foreground: 20 10% 10%;\n\n --muted: 40 10% 96%;\n --muted-foreground: 20 5% 45%;\n\n --accent: 40 10% 94%;\n --accent-foreground: 20 10% 10%;\n\n --destructive: 0 84% 60%;\n --destructive-foreground: 0 0% 100%;\n\n --border: 40 10% 90%;\n --input: 40 10% 90%;\n --ring: 174 60% 40%;\n\n --sidebar-background: 40 15% 97%;\n --sidebar-foreground: 20 10% 10%;\n --sidebar-primary: 174 60% 40%;\n --sidebar-primary-foreground: 0 0% 100%;\n --sidebar-accent: 40 10% 94%;\n --sidebar-accent-foreground: 20 10% 10%;\n --sidebar-border: 40 10% 92%;\n --sidebar-ring: 174 60% 40%;\n }\n\n .ui-v2.dark {\n --background: 0 0% 7%;\n --foreground: 30 10% 93%;\n\n --card: 0 0% 10%;\n --card-foreground: 30 10% 93%;\n\n --popover: 0 0% 10%;\n --popover-foreground: 30 10% 93%;\n\n --primary: 174 60% 45%;\n --primary-foreground: 0 0% 100%;\n\n --secondary: 0 0% 14%;\n --secondary-foreground: 30 10% 93%;\n\n --muted: 0 0% 13%;\n --muted-foreground: 0 0% 55%;\n\n --accent: 0 0% 14%;\n --accent-foreground: 30 10% 93%;\n\n --destructive: 0 72% 51%;\n --destructive-foreground: 0 0% 100%;\n\n --border: 0 0% 15%;\n --input: 0 0% 17%;\n --ring: 174 60% 45%;\n\n --chart-green: 142 60% 50%;\n --chart-red: 0 75% 60%;\n\n --sidebar-background: 0 0% 6%;\n --sidebar-foreground: 30 10% 85%;\n --sidebar-primary: 174 60% 45%;\n --sidebar-primary-foreground: 0 0% 100%;\n --sidebar-accent: 0 0% 12%;\n --sidebar-accent-foreground: 30 10% 93%;\n --sidebar-border: 0 0% 13%;\n --sidebar-ring: 174 60% 45%;\n }\n}\n\n/* ─── V2 Typography & Component Overrides ─── */\n.ui-v2 body {\n font-size: 14px;\n line-height: 1.5;\n letter-spacing: -0.011em;\n}\n\n.ui-v2 h1, .ui-v2 h2, .ui-v2 h3, .ui-v2 h4, .ui-v2 h5, .ui-v2 h6 {\n font-weight: 600;\n letter-spacing: -0.03em;\n}\n\n.ui-v2 .shadow-sm {\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);\n}\n\n/* Added briefly around a theme change (see lib/themeTransition.ts) so the whole\n page flips in one frame instead of fading element by element. */\n.theme-switching,\n.theme-switching *,\n.theme-switching *::before,\n.theme-switching *::after {\n transition: none !important;\n}\n\n.ui-v2 * {\n transition-property: color, background-color, border-color;\n transition-duration: 150ms;\n transition-timing-function: ease;\n}\n\n/* ─── V2 Button Overrides ───\n Scoped to real \n \n \n\n \n {/* Main nav */}\n \n Overview\n \n {renderNavItems(mainNav)}\n \n \n\n {/* Investments */}\n \n \n \n \n \n
\n \n \n \n Investments\n \n \n \n \n \n
\n \n
\n \n {investmentAccounts.map((acct) => (\n \n \n {acct.label}\n \n \n ))}\n \n
\n \n \n \n \n \n \n\n {/* Accounts (everyday bank accounts) and Assets (investments, property, vehicles, loans) */}\n \n \n \n {renderAccountGroup({\n title: \"Accounts\", url: \"/accounts\", icon: Building2, active: isAccountsActive,\n tree: bankTree, emptyLabel: \"Connect accounts\", emptyTo: \"/settings/sources?connect=1\",\n })}\n {renderAccountGroup({\n title: \"Assets\", url: \"/assets\", icon: Wallet, active: isAssetsActive,\n tree: assetTree, emptyLabel: \"Add an asset\", emptyTo: \"/assets\",\n })}\n \n \n \n\n {/* Planning */}\n \n Plan\n \n \n \n \n
\n \n \n \n Financial Planning\n \n \n \n \n \n
\n \n
\n \n {planningChildren.map((item) => (\n \n \n {item.title}\n \n \n ))}\n \n
\n \n \n \n \n \n \n\n {/* Life, beyond finances */}\n \n Life\n \n {renderNavItems(lifeNavItems)}\n \n \n \n\n {/* Footer: User avatar + Notification bell */}\n \n
\n \n \n \n \n \n \n {displayName}\n {user?.email && (\n {user.isDemo ? \"Read-only demo\" : user.email}\n )}\n \n \n\n navigate(\"/settings/account\")}>\n Profile\n \n navigate(\"/notifications\")}>\n Notifications\n {unreadCount > 0 && (\n \n {unreadCount}\n \n )}\n \n navigate(\"/settings/sources\")}>\n Data Sources\n \n navigate(\"/settings/brokerages\")}>\n Brokerages\n \n navigate(\"/settings/preferences\")}>\n Preferences\n \n navigate(\"/settings/api-access\")}>\n API Access\n \n\n \n\n \n \n Appearance\n \n \n toggleTheme()}>\n e.preventDefault()}>\n Light\n \n e.preventDefault()}>\n Dark\n \n \n \n \n\n \n\n logout()}\n >\n Sign out\n \n \n \n\n {/* Notification bell with popover panel */}\n \n \n 0 ? `Notifications, ${unreadCount} need attention` : \"Notifications\"}\n >\n \n {unreadCount > 0 && (\n \n )}\n \n \n \n
\n

Alerts

\n navigate(\"/notifications\")}\n className=\"p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors\"\n aria-label=\"View all notifications\"\n >\n \n \n
\n {notifications.length === 0 ? (\n
\n \n

Nothing needs attention

\n
\n ) : (\n
\n {notifications.slice(0, 6).map((n) => (\n \n \n
\n

{n.title}

\n

{n.detail}

\n

\n {formatDate(n.date, dateFormat, \"short\")}\n

\n
\n \n ))}\n {notifications.length > 6 && (\n navigate(\"/notifications\")}\n className=\"block w-full px-4 py-2 text-xs text-primary hover:text-primary/80 text-center border-t border-border/50 mt-1\"\n >\n View all {notifications.length}\n \n )}\n
\n )}\n\n {/* Every create/update/delete + login, not just the alerts\n above - a quick \"did that actually save\" glance without\n leaving the current page. Full history lives on the\n Activity tab, this is only ever the last few. */}\n
\n
\n Recent activity\n
\n {recentActivity.length === 0 ? (\n

Nothing yet

\n ) : (\n
\n {/* Read-only, like the full Activity tab: a log entry\n isn't a link to anything useful. */}\n {recentActivity.map((a) => (\n \n

{activityTitle(a)}

\n \n {a.at ? formatDistanceToNow(new Date(a.at), { addSuffix: true }) : \"\"}\n \n
\n ))}\n
\n )}\n navigate(\"/notifications?tab=activity\")}\n className=\"block w-full px-4 py-2 text-xs text-primary hover:text-primary/80 text-center border-t border-border/50\"\n >\n View all activity\n \n
\n \n \n \n \n \n );\n}\n" }, { "name": "src/components/CommandPalette.tsx", "type": "text/plain", "content": "import { useEffect, useState } from \"react\";\nimport { useNavigate } from \"react-router-dom\";\nimport { Eye, EyeOff, Keyboard, Moon, PiggyBank, Search, Sun } from \"lucide-react\";\nimport { PAGES, OPEN_PALETTE_EVENT } from \"./commandPaletteConfig\";\nimport { Dialog, DialogContent, DialogDescription, DialogTitle } from \"@/components/ui/dialog\";\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from \"@/components/ui/command\";\nimport { useFinanceData } from \"@/context/FinanceDataContext\";\nimport { useTheme } from \"@/context/ThemeContext\";\nimport { CATEGORIES } from \"@/lib/categories\";\nimport { toggleAmountsHidden, usePrivacy } from \"@/lib/privacy\";\nimport { useHotkeys, MOD_LABEL } from \"@/hooks/useHotkeys\";\nimport { CategoryIcon } from \"@/components/elements/CategoryIcon\";\nimport { accountDisplayName, canHoldTransactions } from \"@/lib/accounts\";\n\n\nfunction paletteFilter(value: string, search: string) {\n const v = value.toLowerCase();\n const q = search.trim().toLowerCase();\n if (!q) return 1;\n if (v.split(/[\\s&/-]+/).some((w) => w.startsWith(q))) return 2;\n return v.includes(q) ? 1 : 0;\n}\n\nconst keyLabel = (keys: string) => keys.split(\" \").map((k) => k.toUpperCase()).join(\" \");\n\n/**\n * ⌘K palette plus the app-wide shortcuts: jump to a page, an account's or a\n * category's transactions, search transactions, hide amounts, switch theme.\n * Mounted once per app page by Layout.\n */\nexport function CommandPalette() {\n const navigate = useNavigate();\n const { accounts: allAccounts } = useFinanceData();\n const accounts = allAccounts.filter((a) => canHoldTransactions(a.type));\n const { theme, toggleTheme } = useTheme();\n const hidden = usePrivacy();\n const [open, setOpen] = useState(false);\n const [helpOpen, setHelpOpen] = useState(false);\n const [query, setQuery] = useState(\"\");\n\n useEffect(() => {\n const onOpen = () => setOpen(true);\n window.addEventListener(OPEN_PALETTE_EVENT, onOpen);\n return () => window.removeEventListener(OPEN_PALETTE_EVENT, onOpen);\n }, []);\n\n useHotkeys({\n \"mod+k\": () => setOpen((o) => !o),\n \"shift+h\": () => toggleAmountsHidden(),\n \"?\": () => setHelpOpen(true),\n ...Object.fromEntries(PAGES.map((p) => [p.keys, () => navigate(p.to)])),\n });\n\n const run = (fn: () => void) => {\n setOpen(false);\n setQuery(\"\");\n fn();\n };\n const q = query.trim();\n\n return (\n <>\n { setOpen(o); if (!o) setQuery(\"\"); }}>\n \n Command palette\n Jump to a page, account or category, or run an action.\n \n \n \n Nothing matches.\n \n {PAGES.map((p) => (\n run(() => navigate(p.to))} className=\"gap-2\">\n \n {p.label}\n {keyLabel(p.keys)}\n \n ))}\n \n \n run(toggleAmountsHidden)} className=\"gap-2\">\n {hidden ? : }\n {hidden ? \"Show amounts\" : \"Hide amounts\"}\n ⇧H\n \n run(toggleTheme)} className=\"gap-2\">\n {theme === \"dark\" ? : }\n Switch to {theme === \"dark\" ? \"light\" : \"dark\"} theme\n \n run(() => setHelpOpen(true))} className=\"gap-2\">\n \n Keyboard shortcuts\n ?\n \n \n {accounts.length > 0 && (\n <>\n \n \n {accounts.map((a) => (\n run(() => navigate(`/transactions?account=${encodeURIComponent(a.id)}`))} className=\"gap-2\">\n \n {accountDisplayName(a)}\n {a.institution}\n \n ))}\n \n \n )}\n \n \n {CATEGORIES.map((c) => (\n run(() => navigate(`/transactions?category=${encodeURIComponent(c)}`))} className=\"gap-2\">\n \n {c}\n \n ))}\n \n {/* Always offered, but its value doesn't contain the query, so it ranks\n below any real match: \"groceries\" + Enter opens the category, while a\n merchant name with no other match searches for it. */}\n {q && (\n \n run(() => navigate(`/transactions?q=${encodeURIComponent(q)}`))} className=\"gap-2\">\n \n Search transactions for “{q}”\n \n \n )}\n \n \n \n \n \n \n );\n}\n\nconst SHORTCUTS: { group: string; items: [string, string][] }[] = [\n { group: \"Anywhere\", items: [[`${MOD_LABEL} K`, \"Command palette\"], [\"⇧ H\", \"Hide or show amounts\"], [\"?\", \"This list\"]] },\n { group: \"Go to\", items: PAGES.map((p) => [keyLabel(p.keys), p.label] as [string, string]) },\n { group: \"Transactions\", items: [[\"/\", \"Search\"], [\"J / K\", \"Next / previous row\"], [\"Enter\", \"Open row\"], [\"X\", \"Select row\"], [\"Esc\", \"Clear search\"]] },\n];\n\nfunction ShortcutsHelp({ open, onOpenChange }: { open: boolean; onOpenChange: (o: boolean) => void }) {\n return (\n \n \n Keyboard shortcuts\n Every keyboard shortcut in the app.\n
\n {SHORTCUTS.map((g) => (\n
\n

{g.group}

\n
\n {g.items.map(([keys, what]) => (\n
\n
{what}
\n
\n {keys.split(\" / \").map((k) => (\n {k}\n ))}\n
\n
\n ))}\n
\n
\n ))}\n
\n \n \n );\n}\n\n" }, { "name": "src/components/ErrorBoundary.tsx", "type": "text/plain", "content": "import { reportClientError } from \"@/lib/errorReporting\";\nimport { Component, type ReactNode } from \"react\";\nimport { Layout } from \"@/components/Layout\";\nimport { AlertTriangle, RefreshCw } from \"lucide-react\";\n\ninterface Props {\n children: ReactNode;\n fallbackMessage?: string;\n}\n\ninterface State {\n hasError: boolean;\n error: Error | null;\n}\n\n/**\n * L-2: Catches rendering errors and shows a friendly fallback UI\n * instead of a white screen. Works as a wrapper around page content.\n */\nexport class ErrorBoundary extends Component {\n constructor(props: Props) {\n super(props);\n this.state = { hasError: false, error: null };\n }\n\n static getDerivedStateFromError(error: Error): State {\n return { hasError: true, error };\n }\n\n componentDidCatch(error: Error, info: React.ErrorInfo) {\n console.error(\"[ErrorBoundary]\", error, info.componentStack);\n reportClientError(\"react\", error);\n }\n\n handleReset = () => {\n this.setState({ hasError: false, error: null });\n };\n\n render() {\n if (this.state.hasError) {\n return (\n
\n
\n \n
\n
\n

Something went wrong

\n

\n {this.props.fallbackMessage || \"An unexpected error occurred while rendering this page. Please try again.\"}\n

\n {this.state.error && (\n
\n \n Technical details\n \n 
\n                  {this.state.error.message}\n
\n
\n )}\n
\n \n \n Try Again\n \n
\n );\n }\n\n return this.props.children;\n }\n}\n" }, { "name": "src/components/Layout.tsx", "type": "text/plain", "content": "import { DASHBOARD_PATH } from \"@/lib/deployment\";\nimport { SidebarProvider, SidebarTrigger } from \"@/components/ui/sidebar\";\nimport { AppSidebar } from \"@/components/AppSidebar\";\nimport { PageTransition } from \"@/components/PageTransition\";\nimport { useLocation, Link } from \"react-router-dom\";\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\";\nimport { useFinanceData } from \"@/context/FinanceDataContext\";\nimport { normalizeMerchant } from \"@/lib/merchant\";\nimport React from \"react\";\nimport { Eye, EyeOff, Search } from \"lucide-react\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@/components/ui/tooltip\";\nimport { CommandPalette } from \"@/components/CommandPalette\";\nimport { OPEN_PALETTE_EVENT } from \"@/components/commandPaletteConfig\";\nimport { isMac, MOD_LABEL } from \"@/hooks/useHotkeys\";\nimport { toggleAmountsHidden, usePrivacy } from \"@/lib/privacy\";\nimport { accountDisplayName } from \"@/lib/accounts\";\n\nconst UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;\n\nfunction DynamicBreadcrumbs() {\n const location = useLocation();\n const { investmentAccounts, accounts, transactions } = useFinanceData();\n const paths = location.pathname.split(\"/\").filter(Boolean);\n\n // Resolve an opaque id segment (e.g. /investments/) to a human label so\n // the breadcrumb shows the account name instead of a raw UUID.\n const labelFor = (segment: string, index: number) => {\n const acct = investmentAccounts.find((a) => a.id === segment);\n if (acct) return acct.label;\n\n if (index > 0 && paths[index - 1] === \"accounts\") {\n const account = accounts.find((a) => a.id === segment);\n if (account) return accountDisplayName(account);\n }\n\n // A transaction id is the child of /transactions. Its ids look like\n // `plaid-t-0-3-2`, which the generic title-caser turned into the nonsense\n // \"Plaid T 0 3 2\", show the merchant, or a plain label when the row is not\n // loaded (the list is server-paged, so it often is not).\n if (index > 0 && paths[index - 1] === \"transactions\") {\n const txn = transactions.find((t) => t.id === segment);\n return txn ? normalizeMerchant(txn.description) : \"Transaction\";\n }\n\n if (UUID_RE.test(segment) || /^[0-9a-f]{16,}$/i.test(segment)) return \"Details\";\n return segment.split(\"-\").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(\" \");\n };\n \n if (location.pathname === DASHBOARD_PATH || paths.length === 0) {\n return (\n \n \n \n Overview\n \n \n \n );\n }\n\n return (\n \n \n \n \n Overview\n \n \n \n {paths.map((path, index) => {\n const isLast = index === paths.length - 1;\n const to = `/${paths.slice(0, index + 1).join(\"/\")}`;\n const title = labelFor(path, index);\n \n return (\n \n \n \n {isLast ? (\n {title}\n ) : (\n \n {title}\n \n )}\n \n \n );\n })}\n \n \n );\n}\n\n/** Right side of the top bar: open the command palette, hide amounts. */\nfunction TopBarActions() {\n const hidden = usePrivacy();\n return (\n
\n window.dispatchEvent(new Event(OPEN_PALETTE_EVENT))}\n aria-keyshortcuts={`${isMac ? \"Meta\" : \"Control\"}+K`}\n className=\"flex h-8 items-center gap-2 rounded-md border border-border/60 bg-background px-2.5 text-xs text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors\"\n >\n \n Search…\n {MOD_LABEL}K\n \n \n \n \n {hidden ? : }\n \n \n {hidden ? \"Show amounts\" : \"Hide amounts\"} ⇧H\n \n
\n );\n}\n\nexport function Layout({ children }: { children: React.ReactNode }) {\n return (\n \n
\n \n
\n
\n
\n \n
\n \n \n
\n
\n {children}\n
\n \n
\n
\n \n );\n}\n" }, { "name": "src/components/NavLink.tsx", "type": "text/plain", "content": "import { NavLink as RouterNavLink, NavLinkProps } from \"react-router-dom\";\nimport { forwardRef } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface NavLinkCompatProps extends Omit {\n className?: string;\n activeClassName?: string;\n pendingClassName?: string;\n}\n\nconst NavLink = forwardRef(\n ({ className, activeClassName, pendingClassName, to, ...props }, ref) => {\n return (\n \n cn(className, isActive && activeClassName, isPending && pendingClassName)\n }\n {...props}\n />\n );\n },\n);\n\nNavLink.displayName = \"NavLink\";\n\nexport { NavLink };\n" }, { "name": "src/components/PageTransition.tsx", "type": "text/plain", "content": "import { useLocation } from \"react-router-dom\";\n\nexport function PageTransition({ children }: { children: React.ReactNode }) {\n const location = useLocation();\n return (\n
\n {children}\n
\n );\n}\n" }, { "name": "src/components/ScrollToTop.tsx", "type": "text/plain", "content": "import { useEffect, useRef } from \"react\";\nimport { useLocation } from \"react-router-dom\";\n\n/**\n * `Layout`'s `
` carries `overflow-auto`, but its ancestor chain uses\n * `min-h-screen` rather than a hard `h-screen`, so on a page taller than the\n * viewport `
` just grows to fit its content instead of clipping it —\n * the window/document scrolls, not that element. Reset both: whichever one\n * actually owns the scroll on a given page, the other is a no-op.\n */\nconst SCROLL_CONTAINER_ID = \"scroll-container\";\n\n/** First path segment, e.g. \"/transactions/abc123\" -> \"transactions\". */\nfunction section(pathname: string): string {\n return pathname.split(\"/\")[1] ?? \"\";\n}\n\n/**\n * Resets scroll to the top when navigating to a different section of the\n * app (e.g. Budgets -> Reports), which plain `` never does on\n * its own — leaving a page scrolled mid-way exactly where you left it the\n * next time you open it, even after visiting somewhere else entirely.\n *\n * Deliberately keyed on the URL's first path segment rather than the whole\n * location: navigating within the same section — a query-string filter\n * (`/transactions?category=X`) or a path param for a detail view\n * (`/transactions/:id`) — is \"the same page\" with more state, not a new one,\n * and should keep the list scrolled where the user was reading it.\n */\nexport function ScrollToTop() {\n const { pathname } = useLocation();\n const prevSection = useRef(null);\n\n useEffect(() => {\n const current = section(pathname);\n if (prevSection.current !== null && prevSection.current !== current) {\n window.scrollTo(0, 0);\n document.getElementById(SCROLL_CONTAINER_ID)?.scrollTo(0, 0);\n }\n prevSection.current = current;\n }, [pathname]);\n\n return null;\n}\n" }, { "name": "src/components/SettingsLayout.tsx", "type": "text/plain", "content": "import React from \"react\";\nimport { useLocation, useNavigate } from \"react-router-dom\";\nimport { Layout } from \"@/components/Layout\";\nimport { NavLink } from \"@/components/NavLink\";\nimport { UserCircle, Sliders, Database, Link2, Wand2, Tag, Store, Repeat, List, KeyRound } from \"lucide-react\";\n\nconst tabs = [\n { label: \"Account\", to: \"/settings/account\", icon: UserCircle },\n { label: \"Preferences\", to: \"/settings/preferences\", icon: Sliders },\n { label: \"Data Sources\", to: \"/settings/sources\", icon: Database },\n { label: \"Brokerages\", to: \"/settings/brokerages\", icon: Link2 },\n { label: \"Rules\", to: \"/settings/rules\", icon: Wand2 },\n { label: \"Tags\", to: \"/settings/tags\", icon: Tag },\n { label: \"Merchants\", to: \"/settings/merchants\", icon: Store },\n { label: \"Recurring\", to: \"/settings/recurring\", icon: Repeat },\n { label: \"Categories\", to: \"/settings/categories\", icon: List },\n { label: \"API Access\", to: \"/settings/api-access\", icon: KeyRound },\n];\n\n/**\n * Shared shell for the /settings/* pages: a single \"Settings\" header plus a tab\n * row, so the previously disconnected settings routes read as one coherent area.\n */\nexport function SettingsLayout({ children }: { children: React.ReactNode }) {\n const navigate = useNavigate();\n const { pathname } = useLocation();\n // \"/settings\" itself shows Account; unknown subpaths fall back to it too.\n const current = tabs.find((t) => pathname === t.to || pathname.startsWith(`${t.to}/`))?.to ?? tabs[0].to;\n return (\n \n
\n
\n

Settings

\n

\n Manage your account, data connections, and preferences\n

\n
\n\n {/* Below lg the ten tabs can't fit and a hidden-scrollbar strip hid the\n last ones; a native select is always reachable and works with a\n thumb. From lg up the tabs wrap onto a second row instead of scrolling. */}\n \n\n \n\n
{children}
\n
\n \n );\n}\n" }, { "name": "src/components/TransactionDetail.tsx", "type": "text/plain", "content": "import { useEffect, useState } from \"react\";\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from \"@/components/ui/sheet\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { Link } from \"react-router-dom\";\nimport { Building2 } from \"lucide-react\";\nimport { Transaction } from \"@/types/finance\";\nimport { useMoney } from \"@/hooks/useMoney\";\nimport { normalizeMerchant } from \"@/lib/merchant\";\nimport { CategoryBadge } from \"@/components/elements/CategoryIcon\";\nimport { CategoryPicker } from \"@/components/elements/CategoryPicker\";\nimport { DetailRow } from \"@/components/elements/DetailRow\";\nimport { TagPicker } from \"@/components/elements/TagPicker\";\nimport { SplitEditor } from \"@/components/elements/SplitEditor\";\nimport { useTags, useTagMutations, useTransactionTags } from \"@/hooks/useTags\";\nimport { useTransactionSplits } from \"@/hooks/useSplits\";\nimport { useTransactionAccountName } from \"@/hooks/useAccountNames\";\n\nexport const allCategories = [\n \"Food & Dining\", \"Shopping\", \"Transportation\", \"Entertainment\",\n \"Bills & Utilities\", \"Health\", \"Travel\", \"Income\", \"Transfer\", \"Groceries\",\n];\n\ninterface TransactionDetailProps {\n transaction: Transaction | null;\n open: boolean;\n onOpenChange: (open: boolean) => void;\n onCategoryChange?: (txnId: string, newCategory: string) => void;\n onNoteChange?: (txnId: string, note: string) => Promise | void;\n /** Called after a split is saved or removed, so the caller can refresh\n * whatever list it's showing this transaction in (its own isSplit/\n * splitCount there won't otherwise update until the next fetch). */\n onSplitsChange?: (txnId: string) => void;\n categories?: string[];\n}\n\nexport function TransactionDetail({\n transaction, open, onOpenChange, onCategoryChange, onNoteChange, onSplitsChange, categories,\n}: TransactionDetailProps) {\n // Hooks must run unconditionally, so the null guard comes after them.\n const { moneyAbs, date: fmtDate } = useMoney({ accountId: transaction?.accountId });\n const [note, setNote] = useState(\"\");\n const [savingNote, setSavingNote] = useState(false);\n const { data: allTags = [] } = useTags();\n const { data: txnTags = [], setTags } = useTransactionTags(transaction?.id);\n const { create: createTag } = useTagMutations();\n const txnTagIds = txnTags.map((t) => t.id);\n const { data: splits = [], setSplits } = useTransactionSplits(transaction?.id);\n const [splitEditorOpen, setSplitEditorOpen] = useState(false);\n const txnAccountName = useTransactionAccountName();\n\n useEffect(() => {\n setNote(transaction?.note ?? \"\");\n }, [transaction]);\n\n if (!transaction) return null;\n\n const noteDirty = note !== (transaction.note ?? \"\");\n const saveNote = async () => {\n if (!noteDirty || !onNoteChange) return;\n setSavingNote(true);\n try {\n await onNoteChange(transaction.id, note);\n } finally {\n setSavingNote(false);\n }\n };\n\n const accountName = txnAccountName(transaction);\n const formattedAmount = `${transaction.amount >= 0 ? \"+\" : \"\\u2212\"}${moneyAbs(transaction.amount)}`;\n\n return (\n <>\n \n \n
\n {/* Radix requires a title for the panel to be announced to screen\n readers. It doubles as the visible heading. */}\n \n \n {accountName}\n \n \n {formattedAmount}\n \n \n\n {/* L-5: View account link */}\n {transaction.accountId && (\n onOpenChange(false)}\n >\n \n {accountName || \"View account\"}\n →\n \n )}\n\n {/* Merchant, then the facts as label/value rows */}\n
\n

{normalizeMerchant(transaction.description) || transaction.description}

\n
\n {fmtDate(transaction.date)}\n {transaction.type}\n \n
\n
\n\n \n\n {/* Category Select, or a read-only breakdown once split. Driven by\n the live splits query rather than transaction.isSplit: that\n prop is a snapshot taken when the panel opened and doesn't\n update in place after a save within this same session. */}\n
\n
\n

Category

\n setSplitEditorOpen(true)}\n >\n {splits.length > 0 ? \"Edit split\" : \"Split\"}\n \n
\n {splits.length > 0 ? (\n
\n {splits.map((s) => (\n \n \n {moneyAbs(s.amount)}\n
\n ))}\n
\n ) : (\n onCategoryChange?.(transaction.id, val)}\n categories={categories || allCategories}\n triggerClassName=\"bg-background border-border/50 h-9\"\n />\n )}\n
\n\n \n\n {/* Tags */}\n
\n

Tags

\n setTags.mutate(ids)}\n onCreate={(name) => createTag.mutateAsync({ name }).then((t) => t.id)}\n disabled={setTags.isPending}\n />\n
\n\n \n\n {/* Notes, the field was readOnly because there was no column to\n store it in; it saves on blur now. */}\n
\n

Notes

\n setNote(e.target.value)}\n onBlur={() => void saveNote()}\n placeholder=\"Add a note…\"\n disabled={!onNoteChange || savingNote}\n className=\"bg-background border-border/50 text-sm min-h-[72px] resize-none\"\n />\n {noteDirty && (\n

\n {savingNote ? \"Saving…\" : \"Click outside to save\"}\n

\n )}\n
\n\n \n\n {/* Bank Description */}\n
\n

Bank description

\n

{transaction.description}

\n
\n \n \n \n\n setSplits.mutateAsync(rows).then(() => onSplitsChange?.(transaction.id))}\n saving={setSplits.isPending}\n />\n \n );\n}\n" }, { "name": "src/components/accounts/AccountDialog.tsx", "type": "text/plain", "content": "import { useEffect, useState } from \"react\";\nimport { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from \"@/components/ui/dialog\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { Button } from \"@/components/ui/button\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/ui/select\";\nimport { toast } from \"sonner\";\nimport { toDateString } from \"@/lib/format\";\nimport { isDebtAccount, isIlliquidAsset } from \"@/lib/accounts\";\nimport { DatePicker } from \"@/components/elements/DatePicker\";\nimport type { Account } from \"@/types/finance\";\n\n/** The eight the database's CHECK constraint accepts, anything else is a 500. */\nconst ACCOUNT_TYPES: { value: Account[\"type\"]; label: string }[] = [\n { value: \"checking\", label: \"Checking\" },\n { value: \"savings\", label: \"Savings\" },\n { value: \"credit\", label: \"Credit card\" },\n { value: \"investment\", label: \"Investment\" },\n { value: \"loan\", label: \"Loan\" },\n { value: \"vehicle\", label: \"Vehicle\" },\n { value: \"property\", label: \"Property\" },\n { value: \"cash\", label: \"Cash on hand\" },\n];\n\nconst PROPERTY_TYPES: { value: NonNullable; label: string }[] = [\n { value: \"primary\", label: \"Primary residence\" },\n { value: \"rental\", label: \"Rental\" },\n { value: \"other\", label: \"Other\" },\n];\n\ninterface Props {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n /** Present when editing; absent when adding. */\n account?: Account | null;\n onAdd: (a: Account) => Promise;\n onUpdate: (id: string, updates: Partial) => Promise;\n /** Limit the Type picker (the Accounts page offers bank types, the Assets\n * page the rest). Defaults to all eight. */\n types?: Account[\"type\"][];\n}\n\n/**\n * Add or edit a manual account.\n *\n * Previously the only editable field anywhere was the nickname, so cash and any\n * institution Plaid does not reach simply could not be represented.\n */\nexport function AccountDialog({ open, onOpenChange, account, onAdd, onUpdate, types }: Props) {\n const typeOptions = types ? ACCOUNT_TYPES.filter((t) => types.includes(t.value) || t.value === account?.type) : ACCOUNT_TYPES;\n const editing = !!account;\n // A Plaid account's figures are owned by the sync and overwritten on the next\n // run, so only the nickname is editable for those.\n const plaidManaged = !!account?.id.startsWith(\"plaid-\");\n\n const [name, setName] = useState(\"\");\n const [institution, setInstitution] = useState(\"\");\n const [type, setType] = useState(\"checking\");\n const [balance, setBalance] = useState(\"\");\n const [creditLimit, setCreditLimit] = useState(\"\");\n const [mask, setMask] = useState(\"\");\n const [originalPrincipal, setOriginalPrincipal] = useState(\"\");\n const [interestRate, setInterestRate] = useState(\"\");\n const [monthlyPayment, setMonthlyPayment] = useState(\"\");\n const [termMonths, setTermMonths] = useState(\"\");\n const [originationDate, setOriginationDate] = useState(\"\");\n const [purchasePrice, setPurchasePrice] = useState(\"\");\n const [purchaseDate, setPurchaseDate] = useState(\"\");\n const [propertyType, setPropertyType] = useState>(\"primary\");\n const [saving, setSaving] = useState(false);\n\n useEffect(() => {\n if (!open) return;\n setName(account?.name ?? \"\");\n setInstitution(account?.institution ?? \"\");\n setType(account?.type ?? types?.[0] ?? \"checking\");\n setBalance(account ? String(account.balance) : \"\");\n setCreditLimit(account?.creditLimit != null ? String(account.creditLimit) : \"\");\n setMask(account?.mask ?? \"\");\n setOriginalPrincipal(account?.originalPrincipal != null ? String(account.originalPrincipal) : \"\");\n setInterestRate(account?.interestRate != null ? String(account.interestRate) : \"\");\n setMonthlyPayment(account?.monthlyPayment != null ? String(account.monthlyPayment) : \"\");\n setTermMonths(account?.termMonths != null ? String(account.termMonths) : \"\");\n setOriginationDate(account?.originationDate ?? \"\");\n setPurchasePrice(account?.purchasePrice != null ? String(account.purchasePrice) : \"\");\n setPurchaseDate(account?.purchaseDate ?? \"\");\n setPropertyType(account?.propertyType ?? \"primary\");\n }, [open, account, types]);\n\n const submit = async () => {\n const trimmedName = name.trim();\n if (!trimmedName) { toast.error(\"Give the account a name\"); return; }\n const parsedBalance = parseFloat(balance);\n if (Number.isNaN(parsedBalance)) { toast.error(\"Enter a balance\"); return; }\n\n // A credit card's or loan's balance is what you owe, stored negative so\n // that summing every account's balance gives net worth.\n const isDebt = isDebtAccount(type);\n const signedBalance = isDebt ? -Math.abs(parsedBalance) : parsedBalance;\n const limit = creditLimit.trim() ? Math.abs(parseFloat(creditLimit)) : null;\n const loanFields = type === \"loan\" ? {\n originalPrincipal: originalPrincipal.trim() ? Math.abs(parseFloat(originalPrincipal)) : null,\n interestRate: interestRate.trim() ? parseFloat(interestRate) : null,\n monthlyPayment: monthlyPayment.trim() ? Math.abs(parseFloat(monthlyPayment)) : null,\n termMonths: termMonths.trim() ? Math.round(parseFloat(termMonths)) : null,\n originationDate: originationDate || null,\n } : {\n originalPrincipal: null, interestRate: null, monthlyPayment: null, termMonths: null, originationDate: null,\n };\n const assetFields = isIlliquidAsset(type) ? {\n purchasePrice: purchasePrice.trim() ? Math.abs(parseFloat(purchasePrice)) : null,\n purchaseDate: purchaseDate || null,\n propertyType: type === \"property\" ? propertyType : null,\n } : {\n purchasePrice: null, purchaseDate: null, propertyType: null,\n };\n\n setSaving(true);\n try {\n if (editing) {\n await onUpdate(account!.id, {\n name: trimmedName,\n institution: institution.trim() || trimmedName,\n type,\n balance: signedBalance,\n creditLimit: type === \"credit\" ? limit : null,\n available: type === \"credit\" && limit != null ? limit - Math.abs(signedBalance) : null,\n mask: mask.trim() || undefined,\n ...loanFields,\n ...assetFields,\n });\n toast.success(\"Account updated\");\n } else {\n await onAdd({\n // `manual-` keeps it clear of the `plaid-` rows that the Plaid sync\n // deletes and rebuilds wholesale on every run.\n id: `manual-acct-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,\n name: trimmedName,\n institution: institution.trim() || trimmedName,\n type,\n balance: signedBalance,\n available: type === \"credit\" && limit != null ? limit - Math.abs(signedBalance) : null,\n creditLimit: type === \"credit\" ? limit : null,\n lastSynced: toDateString(new Date()),\n mask: mask.trim(),\n ...loanFields,\n ...assetFields,\n });\n toast.success(\"Account added\");\n }\n onOpenChange(false);\n } catch {\n toast.error(editing ? \"Couldn't update the account\" : \"Couldn't add the account\");\n } finally {\n setSaving(false);\n }\n };\n\n return (\n \n \n \n {editing ? \"Edit account\" : \"Add account\"}\n \n\n {plaidManaged ? (\n

\n This account syncs from your bank, so its balance and details are\n managed there. You can rename it from the card's pencil icon.\n

\n ) : (\n
\n
\n \n setName(e.target.value)}\n placeholder={type === \"cash\" ? \"e.g. Wallet, Cash at home\" : \"e.g. Chase Savings\"}\n autoFocus\n />\n
\n\n
\n
\n \n setInstitution(e.target.value)}\n placeholder=\"Optional\"\n />\n
\n
\n \n \n
\n
\n\n
\n
\n \n setBalance(e.target.value)}\n placeholder=\"0.00\"\n onKeyDown={(e) => e.key === \"Enter\" && void submit()}\n />\n
\n {type === \"credit\" ? (\n
\n \n setCreditLimit(e.target.value)}\n placeholder=\"Optional\"\n />\n
\n ) : isIlliquidAsset(type) ? (\n type === \"property\" && (\n
\n \n \n
\n )\n ) : type === \"cash\" ? null : (\n
\n \n setMask(e.target.value.slice(0, 4))}\n placeholder=\"Optional\"\n />\n
\n )}\n
\n\n {isIlliquidAsset(type) && (\n
\n

Purchase details

\n
\n
\n \n setPurchasePrice(e.target.value)}\n placeholder=\"Optional\"\n />\n
\n
\n \n setPurchaseDate(d ?? \"\")}\n maxDate={new Date()}\n clearable\n />\n
\n
\n
\n )}\n\n {type === \"loan\" && (\n
\n

Loan terms

\n
\n
\n \n setOriginalPrincipal(e.target.value)}\n placeholder=\"Optional\"\n />\n
\n
\n \n setInterestRate(e.target.value)}\n placeholder=\"Optional\"\n />\n
\n
\n \n setMonthlyPayment(e.target.value)}\n placeholder=\"Optional\"\n />\n
\n
\n \n setTermMonths(e.target.value)}\n placeholder=\"Optional\"\n />\n
\n
\n
\n \n setOriginationDate(d ?? \"\")}\n maxDate={new Date()}\n clearable\n />\n
\n
\n )}\n\n {isDebtAccount(type) && (\n

\n Enter what you owe as a positive number, it's stored as a debt so\n your net worth adds up.\n

\n )}\n
\n )}\n\n \n \n {!plaidManaged && (\n \n )}\n \n \n \n );\n}\n" }, { "name": "src/components/accounts/AccountNotes.tsx", "type": "text/plain", "content": "import { useCallback, useEffect, useRef, useState } from \"react\";\nimport { Check, Loader2, NotebookPen, TriangleAlert } from \"lucide-react\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { cn } from \"@/lib/utils\";\n\nconst AUTOSAVE_MS = 700;\n\ntype Status = \"idle\" | \"saving\" | \"saved\" | \"error\";\n\n/**\n * Free-form notes on an asset or loan: who else is involved, what was agreed,\n * where the paperwork is. There is no Save button: the text is written a moment\n * after you stop typing, when you click away, and when you leave the page.\n *\n * Give it `key={accountId}` so switching accounts starts from that account's\n * notes instead of carrying the previous text over.\n */\nexport function AccountNotes({\n value,\n onSave,\n className,\n}: {\n value: string | null | undefined;\n onSave: (notes: string) => Promise | void;\n className?: string;\n}) {\n const [text, setText] = useState(value ?? \"\");\n const [status, setStatus] = useState(\"idle\");\n const saved = useRef(value ?? \"\");\n const latest = useRef(text);\n const onSaveRef = useRef(onSave);\n onSaveRef.current = onSave;\n\n const save = useCallback(async (next: string) => {\n if (next === saved.current) return;\n setStatus(\"saving\");\n try {\n await onSaveRef.current(next);\n saved.current = next;\n // Typing may have moved on while this was in flight; that has its own save queued.\n setStatus(latest.current === next ? \"saved\" : \"saving\");\n } catch {\n setStatus(\"error\");\n }\n }, []);\n\n // Write shortly after typing stops.\n useEffect(() => {\n latest.current = text;\n if (text === saved.current) return;\n const timer = setTimeout(() => void save(text), AUTOSAVE_MS);\n return () => clearTimeout(timer);\n }, [text, save]);\n\n // Leaving the page with unsaved typing still saves it.\n useEffect(\n () => () => {\n if (latest.current !== saved.current) void onSaveRef.current(latest.current);\n },\n []\n );\n\n return (\n \n \n \n Notes\n \n \n {status === \"saving\" && (<> Saving…)}\n {status === \"saved\" && (<> Saved)}\n {status === \"error\" && (<> Couldn't save, still trying as you type)}\n \n \n \n setText(e.target.value)}\n onBlur={() => void save(text)}\n placeholder=\"Anything worth remembering: who else is involved, what was agreed, where the paperwork is…\"\n aria-label=\"Notes\"\n className=\"min-h-[140px] flex-1 resize-y bg-background text-sm leading-relaxed\"\n />\n

Saves automatically as you type.

\n \n \n );\n}\n" }, { "name": "src/components/accounts/AccountTransactions.tsx", "type": "text/plain", "content": "import { useEffect, useMemo, useState } from \"react\";\nimport { format } from \"date-fns\";\nimport { ArrowDown, ArrowUp, ArrowUpDown, Plus, SearchX, X } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/ui/select\";\nimport { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from \"@/components/ui/pagination\";\nimport { CategoryBadge, MerchantAvatar } from \"@/components/elements/CategoryIcon\";\nimport { CategoryPicker } from \"@/components/elements/CategoryPicker\";\nimport { TagFilterPicker } from \"@/components/elements/TagFilterPicker\";\nimport { SearchInput } from \"@/components/elements/SearchInput\";\nimport { EmptyState } from \"@/components/elements/EmptyState\";\nimport { TransactionDetail } from \"@/components/TransactionDetail\";\nimport { TransferBadge } from \"@/components/transactions/TransferBadge\";\nimport { DuplicateBadge } from \"@/components/transactions/DuplicateBadge\";\nimport { SplitBadge } from \"@/components/transactions/SplitBadge\";\nimport { AddTransactionDialog } from \"@/components/transactions/AddTransactionDialog\";\nimport { StatCard } from \"@/components/dashboard/StatCard\";\nimport { useFinanceData } from \"@/context/FinanceDataContext\";\nimport { useMoney } from \"@/hooks/useMoney\";\nimport { useElementHeight } from \"@/hooks/useElementHeight\";\nimport { useTransactionSearch } from \"@/hooks/useTransactionSearch\";\nimport { useMerchantRefinements } from \"@/hooks/useMerchantRefinements\";\nimport { useSuggestedTransfers, useTransferAction } from \"@/hooks/useTransfers\";\nimport { useSuggestedDuplicates, useDuplicateAction } from \"@/hooks/useDuplicates\";\nimport { useTags } from \"@/hooks/useTags\";\nimport { dayLabel, withDayHeaders, type DayHeaderRow } from \"@/lib/dayGroups\";\nimport { refinedMerchantLabel } from \"@/lib/merchant\";\nimport { isAssetAccount, canHoldTransactions } from \"@/lib/accounts\";\nimport { CATEGORIES } from \"@/lib/categories\";\nimport { cn, parseLocalDate } from \"@/lib/utils\";\nimport { toast } from \"sonner\";\nimport type { Account, Transaction } from \"@/types/finance\";\n\n/** Same choices, default and remembered value as the main Transactions table. */\nconst PAGE_SIZES = [10, 20, 50, 100] as const;\nconst DEFAULT_PAGE_SIZE = 20;\nconst PAGE_SIZE_KEY = \"txn-page-size\";\n/** Height of the app's sticky top bar (Layout's h-12); the filter bar sticks below it. */\nconst APP_HEADER = 48;\n\ntype SortKey = \"date\" | \"description\" | \"amount\";\n\nconst isDayHeader = (r: Transaction | DayHeaderRow): r is DayHeaderRow => \"isDayHeader\" in r;\n\nfunction loadPageSize(): number {\n try {\n const n = Number(localStorage.getItem(PAGE_SIZE_KEY));\n return (PAGE_SIZES as readonly number[]).includes(n) ? n : DEFAULT_PAGE_SIZE;\n } catch {\n return DEFAULT_PAGE_SIZE;\n }\n}\n\n/** Which tags an asset last showed, so opening the Honda page again is still the Honda view. */\nconst tagMemoryKey = (accountId: string) => `account-tags:${accountId}`;\nfunction loadTags(accountId: string): string[] {\n try {\n const raw = localStorage.getItem(tagMemoryKey(accountId));\n const parsed = raw ? JSON.parse(raw) : [];\n return Array.isArray(parsed) ? parsed.filter((v) => typeof v === \"string\") : [];\n } catch {\n return [];\n }\n}\n\nconst fmtDate = (d: string) => {\n try { return format(parseLocalDate(d), \"MMM d, yyyy\"); } catch { return d; }\n};\n\n/**\n * The transaction table for one account, built like the Transactions page:\n * a filter bar, a column header and per-day headers that all stick as you\n * scroll, server-side paging with a rows-per-page choice, and a detail panel\n * that opens right here instead of navigating away.\n *\n * Cars, homes, loans and cash rarely have transactions of their own; what\n * belongs to them (insurance, repairs, repayments) sits in your bank accounts.\n * So on those accounts, picking a tag shows everything carrying that tag from\n * every account, with a switch back to only this account's own rows.\n */\nexport function AccountTransactions({ account }: { account: Account }) {\n const { updateTransactions, addTransaction } = useFinanceData();\n const { moneyAbs: fmtMoney } = useMoney(account.currency);\n const { data: refinements } = useMerchantRefinements();\n const { data: tags = [] } = useTags();\n const { byTxnId: suggestedTransfers } = useSuggestedTransfers();\n const { byTxnId: suggestedDuplicates } = useSuggestedDuplicates();\n\n const assetLike = isAssetAccount(account.type);\n\n const [search, setSearch] = useState(\"\");\n const [category, setCategory] = useState(\"all\");\n const [type, setType] = useState(\"all\");\n const [tagIds, setTagIdsState] = useState(() => loadTags(account.id));\n const [tagScope, setTagScope] = useState<\"all\" | \"account\">(\"all\");\n const [sortKey, setSortKey] = useState(\"date\");\n const [sortDir, setSortDir] = useState<\"asc\" | \"desc\">(\"desc\");\n const [page, setPage] = useState(1);\n const [pageSize, setPageSizeState] = useState(loadPageSize);\n const [detailTxn, setDetailTxn] = useState(null);\n const [addOpen, setAddOpen] = useState(false);\n\n const [filterBarRef, filterBarHeight] = useElementHeight();\n const [columnHeaderRef, columnHeaderHeight] = useElementHeight();\n\n // A tag that has since been deleted must not leave the table empty behind an invisible filter.\n useEffect(() => {\n if (tagIds.length > 0 && tags.length > 0) {\n const stillExists = tagIds.filter((id) => tags.some((t) => t.id === id));\n if (stillExists.length !== tagIds.length) setTagIdsState(stillExists);\n }\n }, [tags, tagIds]);\n\n const setTags = (ids: string[]) => {\n setTagIdsState(ids);\n setPage(1);\n try { localStorage.setItem(tagMemoryKey(account.id), JSON.stringify(ids)); } catch { /* not remembered in private mode */ }\n };\n const setPageSize = (n: number) => {\n setPageSizeState(n);\n setPage(1);\n try { localStorage.setItem(PAGE_SIZE_KEY, String(n)); } catch { /* ditto */ }\n };\n\n // Asset-like accounts follow a tag across every account; bank accounts keep the account.\n const acrossAccounts = assetLike && tagIds.length > 0 && tagScope === \"all\";\n const filters = {\n search,\n category,\n type,\n tagIds,\n accountId: acrossAccounts ? \"all\" : account.id,\n sort: sortKey,\n direction: sortDir,\n };\n const { rows, filteredCount, income, expenses, loading, error, refresh } = useTransactionSearch(filters, { pageSize, page });\n const { confirm: confirmTransfer, reject: rejectTransfer } = useTransferAction(refresh);\n const { merge: mergeDuplicate, dismiss: dismissDuplicate } = useDuplicateAction(refresh);\n\n const activeTags = tags.filter((t) => tagIds.includes(t.id));\n const filtersActive = search !== \"\" || category !== \"all\" || type !== \"all\" || tagIds.length > 0;\n const clearFilters = () => { setSearch(\"\"); setCategory(\"all\"); setType(\"all\"); setTags([]); setPage(1); };\n\n const totalPages = Math.max(1, Math.ceil(filteredCount / pageSize));\n useEffect(() => { if (page > totalPages) setPage(totalPages); }, [page, totalPages]);\n const rangeStart = filteredCount === 0 ? 0 : (page - 1) * pageSize + 1;\n const rangeEnd = Math.min(page * pageSize, filteredCount);\n\n const display = useMemo(() => (sortKey === \"date\" ? withDayHeaders(rows) : rows), [rows, sortKey]);\n\n const toggleSort = (key: SortKey) => {\n if (sortKey === key) setSortDir(sortDir === \"asc\" ? \"desc\" : \"asc\");\n else { setSortKey(key); setSortDir(key === \"description\" ? \"asc\" : \"desc\"); }\n setPage(1);\n };\n const SortIcon = ({ k }: { k: SortKey }) =>\n sortKey !== k ? \n : sortDir === \"asc\" ? : ;\n\n const handleCategoryChange = (txnId: string, newCategory: string) => {\n updateTransactions([{ id: txnId, category: newCategory }], { applyToMerchant: true })\n .then((n) => {\n void refresh();\n const others = typeof n === \"number\" ? n : 0;\n toast.success(others > 0 ? `Moved to ${newCategory}, and ${others} more from this merchant` : `Moved to ${newCategory}`);\n })\n .catch(() => toast.error(\"Couldn't update the category\"));\n setDetailTxn((d) => (d && d.id === txnId ? { ...d, category: newCategory } : d));\n };\n\n const columns = \"grid-cols-[1fr_auto] sm:grid-cols-[minmax(0,1fr)_120px_130px_120px]\";\n const activeTagNames = activeTags.map((t) => t.name);\n const activeTagLabel =\n activeTagNames.length <= 2\n ? activeTagNames.join(\" and \")\n : `${activeTagNames.slice(0, -1).join(\", \")} and ${activeTagNames[activeTagNames.length - 1]}`;\n\n return (\n
\n
\n
\n

Transactions

\n

\n {acrossAccounts && activeTags.length > 0\n ? <>Everything tagged {activeTagLabel}, from all your accounts\n : \"Activity recorded on this account\"}\n

\n
\n {canHoldTransactions(account.type) && (\n \n )}\n
\n\n {/* Totals for whatever's currently filtered (tags included) - not just\n this account's lifetime totals, so narrowing by tag shows exactly\n what that slice adds up to. */}\n {filteredCount > 0 && (\n
\n \n \n
\n )}\n\n {/* Sticks under the app header; the column header and day rows stack below it. */}\n \n
\n { setSearch(v); setPage(1); }}\n placeholder=\"Search this table…\"\n shortcut={false}\n />\n { setCategory(v); setPage(1); }}\n categories={CATEGORIES}\n allLabel=\"All Categories\"\n aria-label=\"Filter by category\"\n />\n \n \n
\n\n {(filtersActive || (assetLike && tagIds.length > 0)) && (\n
\n {assetLike && tagIds.length > 0 && (\n
\n {([[\"all\", \"All accounts\"], [\"account\", \"This account only\"]] as const).map(([v, label]) => (\n { setTagScope(v); setPage(1); }}\n aria-pressed={tagScope === v}\n className={cn(\n \"px-2.5 py-1 rounded-[5px] transition-colors\",\n tagScope === v ? \"bg-background text-foreground shadow-sm font-medium\" : \"text-muted-foreground hover:text-foreground\"\n )}\n >\n {label}\n \n ))}\n
\n )}\n {filtersActive && (\n \n )}\n
\n )}\n \n\n \n \n \n \n \n Category\n \n \n\n {error &&

Couldn't load transactions. Try again in a moment.

}\n\n {!error && !loading && display.length === 0 && (\n \n )}\n\n {display.map((row) => {\n if (isDayHeader(row)) {\n return (\n \n {dayLabel(row.date)}\n 0 && \"text-chart-green\")}>\n {row.net > 0 ? \"+\" : row.net < 0 ? \"-\" : \"\"}{fmtMoney(row.net)}\n \n \n );\n }\n const txn = row;\n return (\n setDetailTxn(txn)}\n onKeyDown={(e) => { if (e.key === \"Enter\" || e.key === \" \") { e.preventDefault(); setDetailTxn(txn); } }}\n className={cn(\n \"grid gap-2 px-5 py-3 border-b border-border/20 last:border-0 items-center cursor-pointer transition-colors\",\n \"hover:bg-muted/30 focus-visible:outline-none focus-visible:bg-muted/40 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary/40\",\n detailTxn?.id === txn.id && \"bg-muted/40\",\n columns\n )}\n >\n
\n \n
\n

\n {refinedMerchantLabel(txn.description, refinements, txn.date, txn.category)}\n

\n

{fmtDate(txn.date)}

\n
\n
\n {fmtDate(txn.date)}\n e.stopPropagation()}>\n {suggestedDuplicates.has(txn.id) ? (\n mergeDuplicate.mutate(suggestedDuplicates.get(txn.id)!.id)}\n onDismiss={() => dismissDuplicate.mutate(suggestedDuplicates.get(txn.id)!.id)}\n busy={mergeDuplicate.isPending || dismissDuplicate.isPending}\n />\n ) : txn.isTransfer ? (\n confirmTransfer.mutate(suggestedTransfers.get(txn.id)!.id)}\n onReject={() => rejectTransfer.mutate(suggestedTransfers.get(txn.id)!.id)}\n busy={confirmTransfer.isPending || rejectTransfer.isPending}\n />\n ) : txn.isSplit ? (\n \n ) : (\n \n )}\n \n = 0 ? \"text-chart-green\" : \"text-foreground\")}>\n {txn.amount >= 0 ? \"+\" : \"-\"}{fmtMoney(txn.amount)}\n \n \n );\n })}\n\n {filteredCount > 0 && (\n
\n
\n Rows per page\n \n {rangeStart}–{rangeEnd} of {filteredCount}\n
\n {totalPages > 1 && (\n \n \n setPage(Math.max(1, page - 1))} className={cn(\"cursor-pointer\", page === 1 && \"pointer-events-none opacity-50\")} />\n {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {\n const start = Math.max(1, Math.min(page - 2, totalPages - 4));\n const p = start + i;\n return (\n \n setPage(p)}>{p}\n \n );\n })}\n setPage(Math.min(totalPages, page + 1))} className={cn(\"cursor-pointer\", page === totalPages && \"pointer-events-none opacity-50\")} />\n \n \n )}\n
\n )}\n \n \n\n {/* Opens on this page: clicking a row never leaves the account. */}\n { if (!o) setDetailTxn(null); }}\n onCategoryChange={handleCategoryChange}\n onNoteChange={async (txnId, note) => {\n try {\n await updateTransactions([{ id: txnId, note }]);\n void refresh();\n setDetailTxn((d) => (d && d.id === txnId ? { ...d, note } : d));\n } catch {\n toast.error(\"Couldn't save the note\");\n }\n }}\n onSplitsChange={() => void refresh()}\n categories={[...CATEGORIES]}\n />\n\n {\n await addTransaction(t);\n void refresh();\n }}\n />\n
\n );\n}\n" }, { "name": "src/components/accounts/AccountsView.tsx", "type": "text/plain", "content": "import { BankReconnectButton } from \"@/components/plaid/BankReconnectButton\";\nimport { ConnectBankButton } from \"@/components/plaid/ConnectBankButton\";\nimport { formatMoney } from \"@/lib/format\";\nimport { useState, useMemo } from \"react\";\nimport { Layout } from \"@/components/Layout\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from \"@/components/ui/dialog\";\nimport { useFinanceData } from \"@/context/FinanceDataContext\";\nimport { cn } from \"@/lib/utils\";\nimport { api } from \"@/lib/api\";\nimport { Plus, Landmark, CreditCard, PiggyBank, TrendingUp, Banknote, RefreshCw, Building2, Pencil, Car, Home, Wallet, NotebookPen } from \"lucide-react\";\nimport { useNavigate, Link } from \"react-router-dom\";\nimport { toast } from \"sonner\";\nimport { formatDistanceToNow } from \"date-fns\";\nimport { useDocumentTitle } from \"@/hooks/useDocumentTitle\";\nimport type { Account } from \"@/types/finance\";\nimport { useMoney } from \"@/hooks/useMoney\";\nimport { AnimatedMoney } from \"@/components/elements/AnimatedMoney\";\nimport { AccountDialog } from \"@/components/accounts/AccountDialog\";\nimport { PageSkeleton } from \"@/components/skeletons/LoadingSkeletons\";\nimport { isDebtAccount, isBankAccount, isAssetAccount, accountDisplayName, accountSubtitle, isIlliquidAsset } from \"@/lib/accounts\";\nimport { ACCOUNT_TINTS } from \"@/components/accounts/accountTints\";\nimport { WeightBar } from \"@/components/dashboard/WeightBar\";\nimport { shareColor } from \"@/components/dashboard/shareColors\";\nimport { Progress } from \"@/components/ui/progress\";\nimport {\n AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,\n AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,\n} from \"@/components/ui/alert-dialog\";\n\nconst typeIcons: Record = {\n checking: Landmark,\n savings: PiggyBank,\n credit: CreditCard,\n investment: TrendingUp,\n loan: Banknote,\n vehicle: Car,\n property: Home,\n cash: Wallet,\n};\n\nconst typeBorderColors: Record = {\n checking: \"border-l-chart-blue\",\n savings: \"border-l-chart-green\",\n credit: \"border-l-chart-orange\",\n investment: \"border-l-chart-purple\",\n loan: \"border-l-chart-red\",\n vehicle: \"border-l-chart-yellow\",\n property: \"border-l-chart-yellow\",\n cash: \"border-l-chart-green\",\n};\n\n\nexport type AccountsScope = \"bank\" | \"assets\";\n\nconst BANK_TYPES: Account[\"type\"][] = [\"checking\", \"savings\", \"credit\"];\nconst ASSET_TYPES: Account[\"type\"][] = [\"cash\", \"investment\", \"property\", \"vehicle\", \"loan\"];\n\n/**\n * The account list, shared by two pages: Accounts (checking, savings, credit\n * cards: the everyday money) and Assets (cash on hand, investments, property,\n * vehicles and loans: what you own and owe beyond that).\n */\nexport const AccountsView = ({ scope }: { scope: AccountsScope }) => {\n const isBank = scope === \"bank\";\n const pageTitle = isBank ? \"Accounts\" : \"Assets\";\n const scopeTypes = isBank ? BANK_TYPES : ASSET_TYPES;\n const navigate = useNavigate();\n const {\n accounts, summaryAccounts, hasData, isLoading, plaidItems, syncPlaid, refreshData,\n addAccount, updateAccount, deleteAccount,\n } = useFinanceData();\n const { moneyAbs: fmtCurrency } = useMoney();\n const [editAccount, setEditAccount] = useState(null);\n const [nickInput, setNickInput] = useState(\"\");\n const [savingNick, setSavingNick] = useState(false);\n const [editorOpen, setEditorOpen] = useState(false);\n const [editorAccount, setEditorAccount] = useState(null);\n const [confirmDelete, setConfirmDelete] = useState(null);\n useDocumentTitle(pageTitle);\n\n // Real sync time comes from the Plaid item (a true timestamp updated every\n // sync), keyed by `plaid-`.\n const syncedAtById = useMemo(() => {\n const m: Record = {};\n plaidItems.forEach((item) => {\n if (!item?.last_synced) return;\n (item.accounts || []).forEach((a: { account_id: string }) => {\n m[`plaid-${a.account_id}`] = item.last_synced;\n });\n });\n return m;\n }, [plaidItems]);\n\n const scoped = useMemo(\n () => accounts.filter((a) => (isBank ? isBankAccount(a.type) : isAssetAccount(a.type))),\n [accounts, isBank]\n );\n const ofType = (...types: Account[\"type\"][]) => scoped.filter((a) => types.includes(a.type));\n const sections = isBank\n ? [\n { title: \"Bank accounts\", list: ofType(\"checking\", \"savings\") },\n { title: \"Credit cards\", list: ofType(\"credit\") },\n ]\n : [\n { title: \"Cash\", list: ofType(\"cash\") },\n { title: \"Investments\", list: ofType(\"investment\") },\n { title: \"Property & vehicles\", list: ofType(\"property\", \"vehicle\") },\n { title: \"Loans\", list: ofType(\"loan\") },\n ];\n const sum = (list: Account[]) => list.filter(a => summaryAccounts.some(s => s.id === a.id)).reduce((t, a) => t + a.balance, 0);\n const owedTotal = ofType(\"loan\").filter(a => summaryAccounts.some(s => s.id === a.id)).reduce((t, a) => t + Math.abs(a.balance), 0);\n const ownedTotal = sum(ofType(\"cash\", \"investment\", \"property\", \"vehicle\"));\n\n const syncLabel = (account: Account) => {\n const iso = syncedAtById[account.id] || account.lastSynced;\n const d = iso ? new Date(iso) : null;\n const item = plaidItems.find(item => item.accounts?.some(a => `plaid-${a.account_id}` === account.id));\n const stamp = d && !isNaN(d.getTime()) ? `Synced ${formatDistanceToNow(d, { addSuffix: true })}` : \"Not synced yet\";\n return item?.requires_reconnect ? `${stamp} · Sign-in required` : item?.sync_error ? `${stamp} · Sync needs attention` : stamp;\n };\n\n /** Only Plaid-backed accounts have anything to sync. */\n const isPlaid = (a: Account) => a.id.startsWith(\"plaid-\");\n\n const openRename = (account: Account) => {\n setEditAccount(account);\n setNickInput(account.nickname?.trim() || account.name);\n };\n\n const saveNickname = async () => {\n if (!editAccount) return;\n setSavingNick(true);\n try {\n // Empty input clears the nickname (falls back to the bank-given name).\n const next = nickInput.trim() === editAccount.name ? \"\" : nickInput.trim();\n await api.put(\"accounts\", editAccount.id, { nickname: next });\n refreshData();\n toast.success(\"Account name updated\");\n setEditAccount(null);\n } catch {\n toast.error(\"Couldn't update the name\");\n } finally {\n setSavingNick(false);\n }\n };\n\n if (isLoading) {\n return (\n \n \n \n );\n }\n\n if (!hasData || scoped.length === 0) {\n return (\n \n
\n
\n

{pageTitle}

\n

\n {isBank ? \"Manage your connected accounts\" : \"Cash, investments, property, vehicles and loans\"}\n

\n
\n
\n
\n \n
\n
\n

{isBank ? \"No accounts connected\" : \"No assets or loans yet\"}

\n

\n {isBank\n ? \"Connect your bank securely to see your balances and transactions here.\"\n : \"Add an investment account, a car, a home or a loan to count it toward your net worth.\"}\n

\n
\n
\n {isBank ? (\n \n ) : (\n \n \n \n )}\n {!isBank && }\n
\n
\n
\n\n { setEditorOpen(o); if (!o) setEditorAccount(null); }}\n account={editorAccount}\n types={scopeTypes}\n onAdd={addAccount}\n onUpdate={updateAccount}\n />\n\n !o && setConfirmDelete(null)}>\n \n \n Remove \"{confirmDelete && accountDisplayName(confirmDelete)}\"?\n \n The account is removed from your list. Transactions recorded against\n it stay in your history, so your totals do not change.\n \n \n \n Cancel\n {\n const target = confirmDelete;\n setConfirmDelete(null);\n if (!target) return;\n try {\n await deleteAccount(target.id);\n toast.success(`${accountDisplayName(target)} removed`);\n } catch {\n toast.error(\"Couldn't remove the account\");\n }\n }}\n >\n Remove\n \n \n \n \n \n );\n }\n\n const renderCard = (account: Account) => {\n const fmtCurrency = (n: number) => formatMoney(Math.abs(n), account.currency || \"USD\");\n const Icon = typeIcons[account.type] || Landmark;\n const borderColor = typeBorderColors[account.type] || \"border-l-primary\";\n const isDebt = isDebtAccount(account.type);\n const owed = Math.abs(Math.min(account.balance, 0));\n const availableCredit = account.available ?? null;\n const plaidItem = plaidItems.find(item => item.accounts?.some(a => `plaid-${a.account_id}` === account.id));\n\n return (\n navigate(`/accounts/${account.id}`)}\n >\n
\n \n
\n
\n
\n \n
\n
\n
\n

{accountDisplayName(account)}

\n { e.stopPropagation(); openRename(account); }}\n >\n \n \n
\n

{accountSubtitle(account)}

\n
\n
\n
\n {isDebt ? (\n availableCredit !== null ? (\n <>\n

\n

Available credit

\n \n ) : (\n <>\n

\n

Balance owed

\n \n )\n ) : (\n <>\n

= 0 ? \"text-foreground\" : \"text-chart-red\")}>\n {account.balance < 0 ? \"-\" : \"\"}\n

\n

{account.type}

\n \n )}\n
\n
\n\n {/* Credit card secondary line: what you owe + limit, with a utilization bar */}\n {isDebt && availableCredit !== null && (\n
\n
\n {fmtCurrency(owed)} owed\n {account.creditLimit != null ? (\n Limit {fmtCurrency(account.creditLimit)}\n ) : account.type === \"credit\" ? (\n Limit not set\n ) : null}\n
\n {account.type === \"credit\" && account.creditLimit != null && account.creditLimit > 0 && (\n div]:bg-chart-green\" : \"[&>div]:bg-chart-orange\")}\n />\n )}\n
\n )}\n\n
\n
\n {isPlaid(account) ? (\n <>\n \n {syncLabel(account)}\n \n ) : (\n Added manually\n )}\n
\n {/* Linked banks sync on their own, so there is no manual sync button. */}\n {isPlaid(account) && plaidItem?.requires_reconnect ? (\n
event.stopPropagation()}>\n \n
\n ) : isPlaid(account) ? null : (\n
\n { e.stopPropagation(); setEditorAccount(account); setEditorOpen(true); }}\n >\n Edit\n \n { e.stopPropagation(); setConfirmDelete(account); }}\n >\n Remove\n \n
\n )}\n
\n \n \n );\n };\n\n /** What sits under an asset's big number: progress on a loan, gain/loss on a car or home. */\n const assetDetail = (account: Account) => {\n const fmtCurrency = (n: number) => formatMoney(Math.abs(n), account.currency || \"USD\");\n if (account.type === \"loan\") {\n const paid =\n account.originalPrincipal && account.originalPrincipal > 0\n ? Math.min(100, Math.max(0, ((account.originalPrincipal - Math.abs(account.balance)) / account.originalPrincipal) * 100))\n : null;\n const terms = [\n account.monthlyPayment != null ? `${fmtCurrency(account.monthlyPayment)}/mo` : null,\n account.interestRate != null ? `${account.interestRate}% APR` : null,\n ].filter(Boolean).join(\" · \");\n if (paid == null && !terms) return null;\n return (\n
\n {paid != null && (\n <>\n div]:bg-chart-green\" />\n

{paid.toFixed(0)}% paid off{terms ? ` · ${terms}` : \"\"}

\n \n )}\n {paid == null &&

{terms}

}\n
\n );\n }\n if (isIlliquidAsset(account.type)) {\n if (account.purchasePrice != null) {\n const gain = account.balance - account.purchasePrice;\n return (\n

\n = 0 ? \"text-chart-green font-medium\" : \"text-chart-red font-medium\"}>\n {gain >= 0 ? \"+\" : \"-\"}{fmtCurrency(gain)}\n {\" \"}since purchase ({fmtCurrency(account.purchasePrice)})\n

\n );\n }\n if (account.purchaseDate) return

Purchased {account.purchaseDate}

;\n }\n return null;\n };\n\n const renderAssetCard = (account: Account) => {\n const fmtCurrency = (n: number) => formatMoney(Math.abs(n), account.currency || \"USD\");\n const Icon = typeIcons[account.type] || Landmark;\n const isDebt = isDebtAccount(account.type);\n const value = isDebt ? Math.abs(account.balance) : account.balance;\n const caption = isDebt ? \"Owed\" : account.type === \"cash\" ? \"In cash\" : \"Current value\";\n const detail = assetDetail(account);\n const note = account.notes?.trim();\n return (\n navigate(`/accounts/${account.id}`)}\n >\n \n
\n
\n \n
\n
\n
\n

{accountDisplayName(account)}

\n { e.stopPropagation(); openRename(account); }}\n >\n \n \n
\n

{accountSubtitle(account)}

\n
\n
\n\n
\n

\n {value < 0 ? \"-\" : \"\"}{formatMoney(Math.abs(value), account.currency || \"USD\")}\n

\n

{caption}

\n
\n\n {detail}\n\n {note && (\n

\n \n {note}\n

\n )}\n\n
\n {isPlaid(account) ? syncLabel(account) : \"Added manually\"}\n {!isPlaid(account) && (\n \n { e.stopPropagation(); setEditorAccount(account); setEditorOpen(true); }}\n >\n Edit\n \n { e.stopPropagation(); setConfirmDelete(account); }}\n >\n Remove\n \n \n )}\n
\n \n \n );\n };\n\n // What you own, split for the composition bar (largest first), against what you owe.\n const composition = [\n { key: \"cash\", label: \"Cash\", value: sum(ofType(\"cash\")) },\n { key: \"investment\", label: \"Investments\", value: sum(ofType(\"investment\")) },\n { key: \"property\", label: \"Property & vehicles\", value: sum(ofType(\"property\", \"vehicle\")) },\n ].filter((g) => g.value > 0).sort((a, b) => b.value - a.value);\n const ownedPositive = composition.reduce((t, g) => t + g.value, 0);\n const netAssets = ownedTotal - owedTotal;\n\n return (\n \n
\n
\n
\n

{pageTitle}

\n

\n {scoped.length} {isBank ? \"connected account\" : \"asset and loan\"}{scoped.length === 1 ? \"\" : \"s\"}\n

\n
\n
\n {isBank ? (\n \n ) : (\n \n )}\n {!isBank && { setEditorAccount(null); setEditorOpen(true); }}\n >\n Add asset, cash or loan\n }\n
\n
\n\n {!isBank && (\n \n \n
\n
\n

Net assets

\n

\n {netAssets < 0 ? \"-\" : \"\"}{fmtCurrency(netAssets)}\n

\n
\n
\n
\n
You own
\n
{fmtCurrency(ownedTotal)}
\n
\n
\n
You owe
\n
0 && \"text-chart-red\")}>{fmtCurrency(owedTotal)}
\n
\n
\n
\n {composition.length > 0 && (\n
\n `${g.label} ${((g.value / ownedPositive) * 100).toFixed(0)}%`).join(\", \")}`}\n shares={composition.map((g) => ({ key: g.key, share: (g.value / ownedPositive) * 100 }))}\n className=\"h-2\"\n />\n
    \n {composition.map((g, i) => (\n
  • \n \n {g.label}\n {fmtCurrency(g.value)}\n {((g.value / ownedPositive) * 100).toFixed(0)}%\n
    • \n ))}\n
\n
\n )}\n \n \n )}\n\n {sections.filter((sec) => sec.list.length > 0).map((sec) => (\n
\n
\n

\n {sec.title} · {sec.list.length}\n

\n {!isBank && (\n \n {sec.title === \"Loans\" ? `${fmtCurrency(owedTotal)} owed` : fmtCurrency(sum(sec.list))}\n \n )}\n
\n
\n {sec.list.map(isBank ? renderCard : renderAssetCard)}\n
\n
\n ))}\n
\n\n {/* Rename / nickname dialog */}\n !o && setEditAccount(null)}>\n \n \n Rename account\n \n
\n
\n \n setNickInput(e.target.value)}\n placeholder={editAccount?.name}\n autoFocus\n onKeyDown={(e) => { if (e.key === \"Enter\") void saveNickname(); }}\n />\n

\n A nickname just for you, it won't change anything at your bank. Clear it to use the original name ({editAccount?.name}).\n

\n
\n
\n \n \n \n \n \n \n\n { setEditorOpen(o); if (!o) setEditorAccount(null); }}\n account={editorAccount}\n types={scopeTypes}\n onAdd={addAccount}\n onUpdate={updateAccount}\n />\n\n !o && setConfirmDelete(null)}>\n \n \n Remove \"{confirmDelete && accountDisplayName(confirmDelete)}\"?\n \n The account is removed from your list. Transactions recorded against\n it stay in your history, so your totals do not change.\n \n \n \n Cancel\n {\n const target = confirmDelete;\n setConfirmDelete(null);\n if (!target) return;\n try {\n await deleteAccount(target.id);\n toast.success(`${accountDisplayName(target)} removed`);\n } catch {\n toast.error(\"Couldn't remove the account\");\n }\n }}\n >\n Remove\n \n \n \n \n \n );\n};\n" }, { "name": "src/components/accounts/accountTints.ts", "type": "text/plain", "content": "/** The tile colour behind an account type's icon, shared by the Assets list and the account page. */\nexport const ACCOUNT_TINTS: Record = {\n checking: \"bg-chart-blue/10 text-chart-blue\",\n savings: \"bg-chart-green/10 text-chart-green\",\n credit: \"bg-chart-orange/10 text-chart-orange\",\n investment: \"bg-chart-purple/10 text-chart-purple\",\n loan: \"bg-chart-red/10 text-chart-red\",\n vehicle: \"bg-chart-yellow/10 text-chart-yellow\",\n property: \"bg-chart-yellow/10 text-chart-yellow\",\n cash: \"bg-chart-green/10 text-chart-green\",\n};\n" }, { "name": "src/components/analytics/CashflowChart.tsx", "type": "text/plain", "content": "import { GroupedBarChart, type BarSeries } from \"@/components/charts/GroupedBarChart\";\nimport { TooltipRow } from \"@/components/charts/ChartTooltip\";\nimport { useMoney } from \"@/hooks/useMoney\";\n\nimport type { CashflowPoint } from \"./cashflow-data\";\n\nconst SERIES: BarSeries<\"income\" | \"expenses\">[] = [\n { key: \"income\", label: \"Income\", colorVar: \"--series-income\" },\n { key: \"expenses\", label: \"Expenses\", colorVar: \"--series-expense\" },\n];\nconst getLabel = (d: CashflowPoint) => d.label;\nconst getValue = (d: CashflowPoint, key: \"income\" | \"expenses\") => d[key];\n\n/**\n * Income vs expenses per month.\n *\n * Two series, so this is the one genuinely categorical chart in the app. The\n * green/red pair is inherently the worst case for red-green colour blindness\n * (validated ΔE 6.7–7.2, inside the 6–8 floor band), which is legal only with\n * secondary encoding, hence the always-present legend, the gap between paired\n * bars, and the value labels in the tooltip.\n */\nexport function CashflowChart({ data }: { data: CashflowPoint[] }) {\n const { money, compact } = useMoney();\n\n if (data.length === 0) {\n return

No transactions to chart.

;\n }\n\n return (\n
\n {/* Legend is mandatory for two series, identity must never be colour alone. */}\n
\n \n \n Income\n \n \n \n Expenses\n \n
\n\n {/* 2px gap between adjacent fills keeps the pair readable without colour. */}\n (\n <>\n

{d.label}

\n \n \n \n \n )}\n />\n
\n );\n}\n" }, { "name": "src/components/analytics/SpendByCategoryChart.tsx", "type": "text/plain", "content": "import { HorizontalBarChart } from \"@/components/charts/HorizontalBarChart\";\nimport { useMoney } from \"@/hooks/useMoney\";\nimport { cn } from \"@/lib/utils\";\nimport type { Category } from \"@/lib/categories\";\n\nexport interface CategoryDatum {\n name: Category;\n value: number;\n pct: number;\n}\n\nconst getName = (d: CategoryDatum) => d.name;\nconst getValue = (d: CategoryDatum) => d.value;\n\n/**\n * Spending by category as a sorted horizontal bar chart.\n *\n * Deliberately NOT the donut this app used to carry (which was never rendered\n * anywhere anyway). Two reasons:\n * - Part-to-whole across ~20 long-named categories is a bar chart's job; a pie\n * makes the reader compare angles and truncates its own labels.\n * - The donut assigned colors by `index % 6` AFTER sorting by value, so a\n * category's color changed whenever the ranking changed and repeated every\n * 7th slice. Bar length already encodes magnitude, so one hue is correct and\n * colour never lies about identity.\n */\nexport function SpendByCategoryChart({\n data,\n onSelect,\n selected,\n}: {\n data: CategoryDatum[];\n onSelect?: (category: Category) => void;\n selected?: Category | null;\n}) {\n const { money, compact } = useMoney();\n\n if (data.length === 0) {\n return

No spending in this period.

;\n }\n\n return (\n onSelect(d.name) : undefined}\n renderTooltip={(d) => (\n <>\n

{d.name}

\n

\n {money(d.value)} · {d.pct.toFixed(1)}% of spend\n

\n {onSelect &&

Click to see transactions

}\n \n )}\n />\n );\n}\n\n/** The same numbers as an accessible table, the chart's non-visual equivalent. */\nexport function SpendByCategoryTable({ data }: { data: CategoryDatum[] }) {\n const { money } = useMoney();\n return (\n \n \n \n \n \n \n \n \n \n \n {data.map((d) => (\n \n \n \n \n \n ))}\n \n
Spending by category
CategorySpentShare
{d.name}{money(d.value)}{d.pct.toFixed(1)}%
\n );\n}\n" }, { "name": "src/components/analytics/cashflow-data.ts", "type": "text/plain", "content": "import { parseLocalDate } from \"@/lib/utils\";\nimport { monthKeyOf } from \"@/lib/format\";\nimport type { Transaction } from \"@/types/finance\";\nimport { countsAsSpend } from \"@/lib/transfers\";\n\nexport interface CashflowPoint {\n key: string;\n label: string;\n income: number;\n expenses: number;\n}\n\nexport function buildCashflow(transactions: Transaction[], months: number): CashflowPoint[] {\n const byMonth = new Map();\n for (const t of transactions) {\n if (!countsAsSpend(t)) continue;\n const key = monthKeyOf(t.date);\n if (!key || !Number.isFinite(t.amount)) continue;\n if (!byMonth.has(key)) byMonth.set(key, { income: 0, expenses: 0 });\n const bucket = byMonth.get(key)!;\n if (t.type === \"income\") bucket.income += Math.abs(t.amount);\n else bucket.expenses += Math.abs(t.amount);\n }\n return [...byMonth.entries()]\n .sort(([a], [b]) => a.localeCompare(b))\n .slice(-months)\n .map(([key, v]) => {\n const d = parseLocalDate(`${key}-01`);\n return {\n key,\n // The year is included: a 6-month window crossing a year boundary used\n // to render two identical \"Jan\" ticks.\n label: d.toLocaleDateString(\"en-US\", { month: \"short\", year: \"2-digit\" }),\n income: Math.round(v.income * 100) / 100,\n expenses: Math.round(v.expenses * 100) / 100,\n };\n });\n}\n" }, { "name": "src/components/auth/GoogleSignIn.tsx", "type": "text/plain", "content": "import { GoogleLogin, GoogleOAuthProvider, type GoogleLoginProps } from \"@react-oauth/google\";\n\nconst CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID || \"\";\nconst GSI_SCRIPT = \"https://accounts.google.com/gsi/client\";\n\n/** The Google button, with the provider that loads Google's ~100 kB sign-in\n * script. Mounting the provider here, not around the whole app, means that\n * script is only fetched and run where a visitor can actually sign in. */\nexport function GoogleSignIn(props: GoogleLoginProps) {\n return (\n \n \n \n );\n}\n\n/** Download Google's script ahead of the sign-in dialog without running it,\n * so the button appears at once when the dialog opens. */\nexport function prefetchGoogleSignIn() {\n if (!CLIENT_ID || document.querySelector(`link[href=\"${GSI_SCRIPT}\"]`)) return;\n const link = document.createElement(\"link\");\n link.rel = \"preload\";\n link.as = \"script\";\n link.href = GSI_SCRIPT;\n document.head.appendChild(link);\n}\n" }, { "name": "src/components/brand/Logo.tsx", "type": "text/plain", "content": "import { cn } from \"@/lib/utils\";\n\n/**\n * Architype Stedelijk: the five khmy$ glyph outlines from The Foundry's\n * specimen, set at their original advance widths with no added tracking.\n * Source: https://www.thefoundrytypes.com/fonts/architype-stedelijk/\n * Only the fixed logo artwork is included; no font software is bundled.\n */\nconst WORDMARK_PATH = [\n \"M17 667 Q10 667 5 662 Q0 657 0 650 L0 17 Q0 10 5 5 Q10 0 17 0 L78 0 Q85 0 90 5 Q95 10 95 17 L95 364 Q95 371 100 376 Q105 381 112 381 L269 381 Q276 381 281 376 Q286 371 286 364 L286 208 Q286 201 291 196 Q296 191 303 191 L364 191 Q371 191 376 196 Q381 201 381 208 L381 364 Q381 371 376 376 Q371 381 364 381 L303 381 Q296 381 291 386 Q286 391 286 398 L286 460 Q286 467 291 472 Q296 477 303 477 L364 477 Q371 477 376 482 Q381 487 381 494 L381 650 Q381 657 376 662 Q371 667 364 667 L303 667 Q296 667 291 662 Q286 657 286 650 L286 494 Q286 487 281 482 Q276 477 269 477 L112 477 Q105 477 100 482 Q95 487 95 494 L95 650 Q95 657 90 662 Q85 667 78 667 L17 667 Z\",\n \"M422 667 Q415 667 410 662 Q405 657 405 650 L405 17 Q405 10 410 5 Q415 0 422 0 L483 0 Q490 0 495 5 Q500 10 500 17 L500 174 Q500 181 505 186 Q510 191 517 191 L674 191 Q681 191 686 196 Q691 201 691 208 L691 269 Q691 276 696 281 Q701 286 708 286 L769 286 Q776 286 781 291 Q786 296 786 303 L786 650 Q786 657 781 662 Q776 667 769 667 L708 667 Q701 667 696 662 Q691 657 691 650 L691 303 Q691 296 686 291 Q681 286 674 286 L517 286 Q510 286 505 291 Q500 296 500 303 L500 650 Q500 657 495 662 Q490 667 483 667 L422 667 Z\",\n \"M827 667 Q820 667 815 662 Q810 657 810 650 L810 208 Q810 201 815 196 Q820 191 827 191 L1079 191 Q1086 191 1091 196 Q1096 201 1096 208 L1096 269 Q1096 276 1101 281 Q1106 286 1113 286 L1174 286 Q1181 286 1186 281 Q1191 276 1191 269 L1191 208 Q1191 201 1196 196 Q1201 191 1208 191 L1365 191 Q1372 191 1377 196 Q1382 201 1382 208 L1382 269 Q1382 276 1387 281 Q1392 286 1399 286 L1460 286 Q1467 286 1472 291 Q1477 296 1477 303 L1477 650 Q1477 657 1472 662 Q1467 667 1460 667 L1399 667 Q1392 667 1387 662 Q1382 657 1382 650 L1382 303 Q1382 296 1377 291 Q1372 286 1365 286 L1208 286 Q1201 286 1196 291 Q1191 296 1191 303 L1191 650 Q1191 657 1186 662 Q1181 667 1174 667 L1113 667 Q1106 667 1101 662 Q1096 657 1096 650 L1096 303 Q1096 296 1091 291 Q1086 286 1079 286 L922 286 Q915 286 910 291 Q905 296 905 303 L905 650 Q905 657 900 662 Q895 667 888 667 L827 667 Z\",\n \"M1613 667 Q1606 667 1601 662 Q1596 657 1596 650 L1596 589 Q1596 582 1591 577 Q1586 572 1579 572 L1518 572 Q1511 572 1506 567 Q1501 562 1501 555 L1501 208 Q1501 201 1506 196 Q1511 191 1518 191 L1579 191 Q1586 191 1591 196 Q1596 201 1596 208 L1596 555 Q1596 562 1601 567 Q1606 572 1613 572 L1770 572 Q1777 572 1782 567 Q1787 562 1787 555 L1787 208 Q1787 201 1792 196 Q1797 191 1804 191 L1865 191 Q1872 191 1877 196 Q1882 201 1882 208 L1882 745 Q1882 752 1877 757 Q1872 762 1865 762 L1804 762 Q1797 762 1792 767 Q1787 772 1787 779 L1787 840 Q1787 847 1782 852 Q1777 857 1770 857 L1518 857 Q1511 857 1506 852 Q1501 847 1501 840 L1501 779 Q1501 772 1506 767 Q1511 762 1518 762 L1770 762 Q1777 762 1782 757 Q1787 752 1787 745 L1787 684 Q1787 677 1782 672 Q1777 667 1770 667 L1613 667 Z\",\n \"M1923 667 Q1916 667 1911 662 Q1906 657 1906 650 L1906 589 Q1906 582 1911 577 Q1916 572 1923 572 L2175 572 Q2182 572 2187 567 Q2192 562 2192 555 L2192 494 Q2192 487 2187 482 Q2182 477 2175 477 L1923 477 Q1916 477 1911 472 Q1906 467 1906 460 L1906 303 Q1906 296 1911 291 Q1916 286 1923 286 L1984 286 Q1991 286 1996 281 Q2001 276 2001 269 L2001 208 Q2001 201 2006 196 Q2011 191 2018 191 L2079 191 Q2086 191 2091 186 Q2096 181 2096 174 L2096 113 Q2096 106 2101 101 Q2106 96 2113 96 L2175 96 Q2182 96 2187 101 Q2192 106 2192 113 L2192 174 Q2192 181 2197 186 Q2202 191 2209 191 L2270 191 Q2277 191 2282 196 Q2287 201 2287 208 L2287 269 Q2287 276 2282 281 Q2277 286 2270 286 L2018 286 Q2011 286 2006 291 Q2001 296 2001 303 L2001 364 Q2001 371 2006 376 Q2011 381 2018 381 L2270 381 Q2277 381 2282 386 Q2287 391 2287 398 L2287 555 Q2287 562 2282 567 Q2277 572 2270 572 L2209 572 Q2202 572 2197 577 Q2192 582 2192 589 L2192 745 Q2192 752 2187 757 Q2182 762 2175 762 L2113 762 Q2106 762 2101 757 Q2096 752 2096 745 L2096 684 Q2096 677 2091 672 Q2086 667 2079 667 L1923 667 Z\",\n].join(\" \");\n\nconst MONOGRAM_PATH = \"M17 667 Q10 667 5 662 Q0 657 0 650 L0 17 Q0 10 5 5 Q10 0 17 0 L78 0 Q85 0 90 5 Q95 10 95 17 L95 364 Q95 371 100 376 Q105 381 112 381 L269 381 Q276 381 281 376 Q286 371 286 364 L286 208 Q286 201 291 196 Q296 191 303 191 L364 191 Q371 191 376 196 Q381 201 381 208 L381 364 Q381 371 376 376 Q371 381 364 381 L303 381 Q296 381 291 386 Q286 391 286 398 L286 460 Q286 467 291 472 Q296 477 303 477 L364 477 Q371 477 376 482 Q381 487 381 494 L381 650 Q381 657 376 662 Q371 667 364 667 L303 667 Q296 667 291 662 Q286 657 286 650 L286 494 Q286 487 281 482 Q276 477 269 477 L112 477 Q105 477 100 482 Q95 487 95 494 L95 650 Q95 657 90 662 Q85 667 78 667 L17 667 Z\";\n\nexport type LogoTone = \"landing\" | \"app\" | \"mono\" | \"inverse\" | \"onPrimary\" | \"teal\";\n\nconst TONES: Record = {\n landing: \"brand-wordmark\",\n app: \"brand-wordmark\",\n mono: \"text-foreground\",\n inverse: \"text-background\",\n onPrimary: \"text-primary-foreground\",\n teal: \"text-[hsl(174_60%_40%)]\",\n};\n\n/** Architype Stedelijk khmy$. Size by height to preserve the letterforms. */\nexport function Logo({ className, tone = \"landing\" }: { className?: string; tone?: LogoTone }) {\n return (\n \n \n \n );\n}\n\n/** The same Architype Stedelijk k for square browser icons and avatars. */\nexport function LogoMark({ className, tone = \"landing\" }: { className?: string; tone?: LogoTone }) {\n return (\n \n \n \n );\n}\n\n/** Standalone outlined wordmark for brand-kit downloads. */\nexport function logoSvg(color: string): string {\n if (!/^#[0-9a-f]{6}$/i.test(color)) throw new Error(\"Logo export requires a six-digit hex color\");\n return `\\n`;\n}\n\n/** Browser icon using the same Stedelijk k, white against a dark surface. */\nexport function faviconSvg(): string {\n return `\\n`;\n}\n" }, { "name": "src/components/brand/PublicFooter.tsx", "type": "text/plain", "content": "import { useEffect, useState, type ReactNode } from \"react\";\nimport { ArrowUpRight } from \"lucide-react\";\nimport { Logo } from \"@/components/brand/Logo\";\nimport { APP_ORIGIN, DEMO_ORIGIN } from \"@/lib/deployment\";\n\ntype Palette = \"landing-dark\" | \"landing-light\";\n\n/** \"landing-dark\" when the page is in dark mode, tracking the root class as it changes. */\nexport function useRootPalette(): Palette {\n // The static branding render runs without a DOM; default to light there.\n const read = (): Palette =>\n typeof document !== \"undefined\" && document.documentElement.classList.contains(\"dark\") ? \"landing-dark\" : \"landing-light\";\n const [palette, setPalette] = useState(read);\n useEffect(() => {\n const observer = new MutationObserver(() => setPalette(read()));\n observer.observe(document.documentElement, { attributes: true, attributeFilter: [\"class\"] });\n setPalette(read());\n return () => observer.disconnect();\n }, []);\n return palette;\n}\n\nconst link = \"inline-flex min-h-[44px] items-center hover:text-land-fg\";\n\n/**\n * The footer shared by every public page: wordmark, legal and brand links,\n * credits and the large teal wordmark on a black panel (black in both themes).\n * It reads the landing palette tokens, so it needs a `landing-*` scope: pass\n * `palette` to wrap it in one, or omit it inside a page that already has one.\n * `onSignIn` opens a sign-in dialog; without it, \"Sign in\" links to the site.\n */\nexport function PublicFooter({ palette, onSignIn }: { palette?: Palette; onSignIn?: () => void }) {\n const body: ReactNode = (\n \n );\n return palette ?
{body}
: body;\n}\n" }, { "name": "src/components/charts/BubbleChart.tsx", "type": "text/plain", "content": "import { useMemo, useState } from \"react\";\nimport { Pack, hierarchy } from \"@visx/hierarchy\";\nimport { Group } from \"@visx/group\";\nimport type { DonutSlice } from \"./DonutChart\";\n\ninterface Props {\n data: DonutSlice[];\n size: number;\n formatValue: (n: number) => string;\n}\n\n/** Synthetic root d3-hierarchy packs against; never rendered itself. */\ninterface Root {\n children: DonutSlice[];\n}\n\n/**\n * The same DonutSlice[] a DonutChart takes, laid out as proportional\n * circles instead of a ring. A caller toggling between the two swaps one\n * component for the other with no data reshaping.\n */\nexport function BubbleChart({ data, size, formatValue }: Props) {\n const [active, setActive] = useState(null);\n const total = data.reduce((s, d) => s + d.value, 0);\n\n const root = useMemo(() => {\n const shown = data.filter((d) => d.value > 0);\n return hierarchy({ children: shown })\n .sum((d) => (\"value\" in d ? (d as unknown as DonutSlice).value : 0))\n .sort((a, b) => (b.value ?? 0) - (a.value ?? 0));\n }, [data]);\n\n if (data.every((d) => d.value <= 0)) return null;\n\n return (\n
\n \n \n {(packed) => (\n \n {packed\n .descendants()\n .filter((d) => d.depth > 0)\n .map((c) => {\n const d = c.data as unknown as DonutSlice;\n const isActive = active === d.name;\n const pct = total > 0 ? (d.value / total) * 100 : 0;\n const r = c.r;\n const showLabel = r > 22;\n return (\n setActive(d.name)}\n onPointerLeave={() => setActive(null)}\n onFocus={() => setActive(d.name)}\n onBlur={() => setActive(null)}\n >\n \n {showLabel && (\n \n {pct.toFixed(0)}%\n \n )}\n {showLabel && (\n \n {d.name}\n \n )}\n \n );\n })}\n \n )}\n \n \n
\n );\n}\n" }, { "name": "src/components/charts/CalendarHeatmap.tsx", "type": "text/plain", "content": "import { useEffect, useId, useMemo, useRef, useState, type KeyboardEvent } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { format } from \"date-fns\";\nimport { cn, parseLocalDate } from \"@/lib/utils\";\nimport {\n activityLevel, activityThresholds, calendarWeeks, inCalendarSelection, orderedSelection,\n type ActivityDay, type CalendarSelection, type FlowDirection,\n} from \"@/lib/calendarActivity\";\n\ninterface Props {\n year: number;\n days: ReadonlyMap;\n direction: FlowDirection;\n selection: CalendarSelection | null;\n onSelect: (selection: CalendarSelection | null) => void;\n formatValue: (amount: number) => string;\n today: string;\n /** A transaction ledger may contain future-dated entries; Home only plots posted activity. */\n allowFuture?: boolean;\n}\n\nconst levelClasses = [\n \"bg-muted/80 dark:bg-white/[0.035]\",\n \"bg-teal-200 dark:bg-teal-900/60\",\n \"bg-teal-400/80 dark:bg-teal-700\",\n \"bg-teal-500 dark:bg-teal-500/80\",\n \"bg-teal-700 dark:bg-teal-300\",\n];\n\nexport function CalendarHeatmap({ year, days, direction, selection, onSelect, formatValue, today, allowFuture = false }: Props) {\n const weeks = useMemo(() => calendarWeeks(year), [year]);\n const dates = useMemo(() => weeks.flat().filter((d): d is string => !!d && (allowFuture || d <= today)), [weeks, today, allowFuture]);\n const thresholds = useMemo(() => activityThresholds(days, direction), [days, direction]);\n const grid = useRef(null);\n const drag = useRef<{ anchor: string; end: string; id: number } | null>(null);\n const skipClick = useRef(false);\n const resetClickTimer = useRef>();\n const [preview, setPreview] = useState(null);\n const [focused, setFocused] = useState(today.startsWith(String(year)) ? today : `${year}-01-01`);\n const [hover, setHover] = useState<{ date: string; x: number; y: number } | null>(null);\n const hintId = useId();\n const tooltipId = useId();\n const active = preview ?? selection;\n const focusDate = dates.includes(focused) ? focused : dates[0];\n const lastOnSelect = useRef(onSelect);\n lastOnSelect.current = onSelect;\n\n useEffect(() => {\n const finish = (event: PointerEvent) => {\n const current = drag.current;\n if (!current || current.id !== event.pointerId) return;\n if (current.anchor !== current.end) {\n lastOnSelect.current(orderedSelection(current.anchor, current.end));\n skipClick.current = true;\n // The browser's synthetic click follows pointerup in the same task.\n // A release outside the chart must not swallow the next real click.\n resetClickTimer.current = setTimeout(() => { skipClick.current = false; }, 0);\n }\n drag.current = null;\n setPreview(null);\n };\n const cancel = () => { drag.current = null; setPreview(null); };\n const escape = (e: globalThis.KeyboardEvent) => { if (e.key === \"Escape\") cancel(); };\n const dismiss = () => setHover(null);\n window.addEventListener(\"pointerup\", finish);\n window.addEventListener(\"pointercancel\", cancel);\n window.addEventListener(\"blur\", cancel);\n window.addEventListener(\"keydown\", escape);\n window.addEventListener(\"scroll\", dismiss, true);\n window.addEventListener(\"resize\", dismiss);\n return () => {\n window.removeEventListener(\"pointerup\", finish);\n window.removeEventListener(\"pointercancel\", cancel);\n window.removeEventListener(\"blur\", cancel);\n window.removeEventListener(\"keydown\", escape);\n window.removeEventListener(\"scroll\", dismiss, true);\n window.removeEventListener(\"resize\", dismiss);\n clearTimeout(resetClickTimer.current);\n };\n }, []);\n\n const showTooltip = (date: string, target: HTMLElement) => {\n const rect = target.getBoundingClientRect();\n setHover({ date, x: rect.left + rect.width / 2, y: rect.top });\n };\n\n const toggleDay = (date: string) => {\n onSelect(selection?.from === date && selection.to === date ? null : { from: date, to: date });\n };\n\n const keyboard = (event: KeyboardEvent, date: string) => {\n if (event.key === \"Escape\") {\n event.preventDefault(); event.stopPropagation();\n drag.current = null; setPreview(null); setHover(null); onSelect(null);\n return;\n }\n const index = dates.indexOf(date);\n const weekday = new Date(`${date}T00:00:00Z`).getUTCDay();\n const next = event.key === \"ArrowLeft\" ? index - 7 : event.key === \"ArrowRight\" ? index + 7\n : event.key === \"ArrowUp\" ? index - 1 : event.key === \"ArrowDown\" ? index + 1\n : event.key === \"Home\" ? (event.ctrlKey || event.metaKey ? 0 : index - weekday)\n : event.key === \"End\" ? (event.ctrlKey || event.metaKey ? dates.length - 1 : index + 6 - weekday) : null;\n if (next === null) return;\n event.preventDefault(); event.stopPropagation();\n const target = dates[Math.max(0, Math.min(dates.length - 1, next))];\n setFocused(target);\n grid.current?.querySelector(`[data-date=\"${target}\"]`)?.focus();\n };\n\n const hovered = hover ? days.get(hover.date) : undefined;\n const resetHint = selection?.from === hover?.date && selection?.to === hover?.date;\n const tooltip = hover && typeof document !== \"undefined\" ? createPortal(\n 140 ? hover.y - 12 : hover.y + 28, transform: hover.y > 140 ? \"translateY(-100%)\" : undefined }}\n >\n

{format(parseLocalDate(hover.date), \"EEEE, MMMM d, yyyy\")}

\n

{formatValue(hovered?.[direction] ?? 0)} {direction}

\n

{resetHint ? \"Press to reset\" : \"Press to select day · Drag for range\"}

\n
, document.body,\n ) : null;\n\n return (\n
\n

Use arrow keys to explore days, Enter or Space to select a day, and Escape to clear. Drag across days or use the date picker to select a range.

\n
setHover(null)}>\n
\n
\n {weeks.map((week, i) => {\n const first = week.find(d => d?.endsWith(\"-01\"));\n return {first ? format(parseLocalDate(first), \"MMM\") : \"\"};\n })}\n
\n
\n
\n {[\"\", \"Mon\", \"\", \"Wed\", \"\", \"Fri\", \"\"].map((label, i) => {label})}\n
\n
\n {weeks.map((week, i) => (\n
\n {week.map((date, j) => {\n if (!date) return ;\n const future = date > today;\n const disabled = future && !allowFuture;\n const amount = days.get(date)?.[direction] ?? 0;\n const level = activityLevel(amount, thresholds);\n const selected = !!active && inCalendarSelection(date, active);\n return (\n { setFocused(date); showTooltip(date, event.currentTarget); }}\n onBlur={() => setHover(null)}\n onPointerEnter={event => {\n if (disabled) return;\n showTooltip(date, event.currentTarget);\n if (drag.current && drag.current.id === event.pointerId) {\n drag.current.end = date;\n setPreview(orderedSelection(drag.current.anchor, date));\n }\n }}\n onPointerDown={event => {\n if (event.button !== 0 || event.pointerType === \"touch\") return;\n drag.current = { anchor: date, end: date, id: event.pointerId };\n // Avoid implicit touch/pen capture swallowing enter events.\n if (event.currentTarget.hasPointerCapture?.(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);\n }}\n onClick={() => { if (!skipClick.current) toggleDay(date); }}\n onKeyDown={event => keyboard(event, date)}\n />\n );\n })}\n
\n ))}\n
\n
\n
\n
\n {tooltip}\n
\n );\n}\n" }, { "name": "src/components/charts/ChartTooltip.tsx", "type": "text/plain", "content": "import type { ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nconst TOOLTIP_WIDTH_GUESS = 200;\nconst OFFSET = 12;\n\n/**\n * The one tooltip panel every chart uses, positioned inside the chart's\n * `relative` wrapper. It flips to the left of the pointer near the right edge\n * so it never spills out of the card.\n */\nexport function ChartTooltip({\n x,\n y,\n containerWidth,\n children,\n}: {\n x: number;\n y: number;\n containerWidth: number;\n children: ReactNode;\n}) {\n const flip = x + OFFSET + TOOLTIP_WIDTH_GUESS > containerWidth;\n return (\n \n
\n {children}\n
\n \n );\n}\n\n/** A tooltip row: series key (a short line or square of its colour), name, value. */\nexport function TooltipRow({\n color,\n label,\n value,\n mark = \"rect\",\n className,\n}: {\n color?: string;\n label: ReactNode;\n value: ReactNode;\n mark?: \"rect\" | \"line\";\n className?: string;\n}) {\n return (\n

\n \n {color && (\n \n )}\n {label}\n \n {value}\n

\n );\n}\n" }, { "name": "src/components/charts/ChartTypeToggle.tsx", "type": "text/plain", "content": "import type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Icon-only sibling of SegmentedControl: switches a chart's visual form\n * (line/bar, donut/bubbles) rather than its data range, so it reads as a\n * distinct, smaller control next to the period switcher rather than a second\n * one of the same kind.\n */\nexport function ChartTypeToggle({\n options,\n value,\n onChange,\n label,\n className,\n}: {\n options: readonly { value: T; icon: LucideIcon; label: string }[];\n value: T;\n onChange: (value: NoInfer) => void;\n label: string;\n className?: string;\n}) {\n return (\n \n {options.map((o) => (\n onChange(o.value)}\n onKeyDown={event => {\n const index = options.findIndex(option => option.value === o.value);\n const next = event.key === \"ArrowRight\" || event.key === \"ArrowDown\" ? (index + 1) % options.length\n : event.key === \"ArrowLeft\" || event.key === \"ArrowUp\" ? (index - 1 + options.length) % options.length\n : event.key === \"Home\" ? 0 : event.key === \"End\" ? options.length - 1 : null;\n if (next === null) return;\n event.preventDefault();\n onChange(options[next].value);\n event.currentTarget.parentElement?.querySelectorAll('[role=\"radio\"]')[next]?.focus();\n }}\n className={cn(\n \"flex items-center justify-center h-6 w-6 rounded transition-colors\",\n value === o.value\n ? \"bg-muted text-foreground\"\n : \"text-muted-foreground hover:text-foreground hover:bg-muted/50\"\n )}\n >\n \n \n ))}\n \n );\n}\n" }, { "name": "src/components/charts/DonutChart.tsx", "type": "text/plain", "content": "import { useState, type PointerEvent, type ReactNode } from \"react\";\nimport { Pie } from \"@visx/shape\";\nimport { Group } from \"@visx/group\";\nimport { localPoint } from \"@visx/event\";\nimport { ChartTooltip, TooltipRow } from \"./ChartTooltip\";\n\nexport interface DonutBreakdownPart {\n key: string;\n label: string;\n /** Positive magnitude; parts should sum to (or near) the slice's own value. */\n value: number;\n /** Name of an HSL colour token, e.g. \"--chart-green\". */\n colorVar: string;\n}\n\nexport interface DonutSlice {\n name: string;\n value: number;\n color: string;\n /** What this slice's value is made of, e.g. cost basis vs. gain. Shown as a\n * small segmented bar and a value per part in the hover tooltip; omit when\n * there's nothing to break the slice down into. */\n breakdown?: DonutBreakdownPart[];\n}\n\ninterface Props {\n data: DonutSlice[];\n size: number;\n thickness?: number;\n formatValue: (n: number) => string;\n /** Centre readout when nothing is hovered, e.g. the total. */\n centerLabel: string;\n centerValue: ReactNode;\n /** Highlight a slice from outside (e.g. the table row being hovered). When\n * given, it takes over from the donut's own hover state. */\n active?: string | null;\n /** Called when the pointer or focus moves onto / off a slice. */\n onActiveChange?: (name: string | null) => void;\n}\n\n/** A thin bar split by explicit parts (not auto-assigned identity colours,\n * unlike WeightBar) — used for a value's own composition, e.g. principal vs\n * gain, where colour means direction rather than \"which entity\". */\nfunction CompositionBar({ parts, total }: { parts: DonutBreakdownPart[]; total: number }) {\n const shown = parts.filter((p) => p.value !== 0);\n if (shown.length === 0 || total <= 0) return null;\n return (\n
\n {shown.map((p) => (\n \n ))}\n
\n );\n}\n\n/**\n * A donut whose centre is the readout: hovering or focusing a slice swaps the\n * centre from the total to that slice's name, value and share, no floating\n * tooltip covering the ring. The active slice lifts slightly; the rest fade.\n *\n * A slice with `breakdown` also gets a floating tooltip near the pointer\n * (the ring is curved, so a fixed-position readout can't sit \"on\" a slice the\n * way a bar or bin can) showing what the value is made of: a small segmented\n * bar plus one row per part.\n */\nexport function DonutChart({ data, size, thickness = 30, formatValue, centerLabel, centerValue, active: activeProp, onActiveChange }: Props) {\n const [internalActive, setInternalActive] = useState(null);\n const active = activeProp !== undefined ? activeProp : internalActive;\n const setActive = (name: string | null) => {\n setInternalActive(name);\n onActiveChange?.(name);\n };\n const [pointer, setPointer] = useState<{ x: number; y: number } | null>(null);\n const radius = size / 2;\n const total = data.reduce((s, d) => s + d.value, 0);\n const hovered = data.find((d) => d.name === active);\n // The centre readout must fit inside the ring's hole, not a fixed guess at\n // padding: a smaller `size` (this component is used at everything from 140\n // to 200+) or a thicker ring shrinks the hole, and a fixed px-10 either\n // wasted space or let long text spill out past the ring with no guard.\n const innerDiameter = Math.max(0, 2 * (radius - 4 - thickness));\n const textBoxSize = innerDiameter * 0.86;\n\n const track = (e: PointerEvent) => {\n const pt = localPoint(e);\n if (pt) setPointer({ x: pt.x, y: pt.y });\n };\n\n return (\n
\n \n \n d.value}\n pieSort={null}\n outerRadius={radius - 4}\n innerRadius={radius - 4 - thickness}\n padAngle={0.02}\n cornerRadius={4}\n >\n {(pie) =>\n pie.arcs.map((arc) => {\n const isActive = active === arc.data.name;\n const pct = total > 0 ? (arc.data.value / total) * 100 : 0;\n return (\n `${p.label} ${formatValue(p.value)}`).join(\", \") : \"\"\n }`}\n className=\"outline-none cursor-pointer\"\n style={{ transition: \"opacity 150ms ease, transform 150ms ease\" }}\n onPointerEnter={(e) => { setActive(arc.data.name); track(e); }}\n onPointerMove={track}\n onPointerLeave={() => { setActive(null); setPointer(null); }}\n onFocus={() => setActive(arc.data.name)}\n onBlur={() => setActive(null)}\n />\n );\n })\n }\n \n \n \n
\n
\n \n {hovered ? hovered.name : centerLabel}\n \n \n {hovered ? formatValue(hovered.value) : centerValue}\n \n {hovered && total > 0 && (\n \n {((hovered.value / total) * 100).toFixed(1)}%\n \n )}\n
\n
\n {hovered?.breakdown && pointer && (() => {\n // The parts' own sum is the bar's 100%, not the slice's current\n // value: a losing holding's parts are \"current value\" + \"loss\",\n // which together equal what was originally invested, a larger\n // number than the now-smaller current value.\n const partsTotal = hovered.breakdown.reduce((s, p) => s + Math.abs(p.value), 0);\n return (\n \n

{hovered.name}

\n \n {hovered.breakdown.map((p) => (\n 0 ? ` · ${((Math.abs(p.value) / partsTotal) * 100).toFixed(0)}%` : \"\"\n }`}\n />\n ))}\n \n );\n })()}\n
\n );\n}\n" }, { "name": "src/components/charts/GroupedBarChart.tsx", "type": "text/plain", "content": "import { useMemo, useState, type ReactNode } from \"react\";\nimport { BarRounded } from \"@visx/shape\";\nimport { AxisBottom, AxisLeft } from \"@visx/axis\";\nimport { GridRows } from \"@visx/grid\";\nimport { Group } from \"@visx/group\";\nimport { scaleBand, scaleLinear } from \"@visx/scale\";\nimport { useParentSize } from \"@visx/responsive\";\nimport { ChartTooltip } from \"./ChartTooltip\";\n\nexport interface BarSeries {\n key: K;\n label: string;\n /** Name of an HSL colour token, e.g. `--series-income`. */\n colorVar: string;\n}\n\ninterface Props {\n data: T[];\n series: BarSeries[];\n /** Category label for each datum (x axis). */\n getLabel: (d: T) => string;\n getValue: (d: T, key: K) => number;\n height: number;\n formatAxisValue: (n: number) => string;\n renderTooltip: (d: T) => ReactNode;\n yAxisWidth?: number;\n}\n\nconst MARGIN = { top: 8, right: 8, bottom: 28 };\nconst MAX_BAR = 22;\nconst BAR_GAP = 2;\nconst axisText = { fill: \"hsl(var(--muted-foreground))\", fontSize: 10 } as const;\n\n/**\n * Side-by-side columns per category (income vs expenses per month). Columns\n * are capped at 22px with a 2px gap inside each pair, rounded only at the\n * data end, and the whole category band is the hover target.\n */\nexport function GroupedBarChart({\n data,\n series,\n getLabel,\n getValue,\n height,\n formatAxisValue,\n renderTooltip,\n yAxisWidth = 52,\n}: Props) {\n const { parentRef, width } = useParentSize({ debounceTime: 30 });\n const [active, setActive] = useState(null);\n const innerW = Math.max(0, width - yAxisWidth - MARGIN.right);\n const innerH = Math.max(0, height - MARGIN.top - MARGIN.bottom);\n\n const xScale = useMemo(\n () => scaleBand({ domain: data.map((_, i) => i), range: [0, innerW], paddingInner: 0.35, paddingOuter: 0.2 }),\n [data, innerW]\n );\n const yScale = useMemo(() => {\n const max = Math.max(0, ...data.flatMap((d) => series.map((s) => getValue(d, s.key))));\n return scaleLinear({ domain: [0, max || 1], range: [innerH, 0], nice: 4 });\n }, [data, series, getValue, innerH]);\n\n const band = xScale.bandwidth();\n const barW = Math.max(1, Math.min(MAX_BAR, (band - BAR_GAP * (series.length - 1)) / series.length));\n const groupW = barW * series.length + BAR_GAP * (series.length - 1);\n\n return (\n
\n {width > 0 && (\n \n \n \n {data.map((d, i) => {\n const bx = xScale(i) ?? 0;\n const gx = bx + (band - groupW) / 2;\n return (\n \n {active === i && (\n \n )}\n {series.map((s, si) => {\n const v = getValue(d, s.key);\n const top = yScale(v);\n const h = innerH - top;\n if (h <= 0) return null;\n return (\n \n );\n })}\n `${s.label} ${formatAxisValue(getValue(d, s.key))}`).join(\", \")}`}\n className=\"outline-none\"\n onPointerEnter={() => setActive(i)}\n onPointerLeave={() => setActive(null)}\n onFocus={() => setActive(i)}\n onBlur={() => setActive(null)}\n />\n \n );\n })}\n formatAxisValue(Number(v))}\n tickLabelProps={() => ({ ...axisText, textAnchor: \"end\", dx: -6, dy: 3 })}\n />\n getLabel(data[Number(i)])}\n tickLabelProps={() => ({ ...axisText, textAnchor: \"middle\", dy: 4 })}\n />\n \n \n )}\n {active !== null && data[active] && (\n \n {renderTooltip(data[active])}\n \n )}\n
\n );\n}\n" }, { "name": "src/components/charts/HorizontalBarChart.tsx", "type": "text/plain", "content": "import { useMemo, useState, type ReactNode } from \"react\";\nimport { BarRounded } from \"@visx/shape\";\nimport { Group } from \"@visx/group\";\nimport { scaleBand, scaleLinear } from \"@visx/scale\";\nimport { useParentSize } from \"@visx/responsive\";\nimport { ChartTooltip } from \"./ChartTooltip\";\n\ninterface Props {\n data: T[];\n getLabel: (d: T) => string;\n getValue: (d: T) => number;\n /** Name of an HSL colour token for the bars. */\n colorVar: string;\n /** Direct label at each bar's tip. */\n formatValue: (n: number) => string;\n renderTooltip: (d: T) => ReactNode;\n onSelect?: (d: T) => void;\n /** Label of the selected row; the others fade back. */\n selected?: string | null;\n labelWidth?: number;\n /** Rows shrink (down to 22px) so a long tail fits inside this height. */\n maxHeight?: number;\n}\n\nconst ROW = 34;\nconst MIN_ROW = 22;\nconst MAX_BAR = 20;\nconst VALUE_GUTTER = 64;\n\nfunction truncate(s: string, max: number) {\n return s.length > max ? `${s.slice(0, max - 1)}…` : s;\n}\n\n/**\n * Sorted horizontal bars with the category on the left and the value at the\n * tip. One hue (length already encodes magnitude), so opacity is free to\n * carry selection. Rows are keyboard-focusable and Enter selects.\n */\nexport function HorizontalBarChart({\n data,\n getLabel,\n getValue,\n colorVar,\n formatValue,\n renderTooltip,\n onSelect,\n selected,\n labelWidth = 132,\n maxHeight = 520,\n}: Props) {\n const { parentRef, width } = useParentSize({ debounceTime: 30 });\n const [active, setActive] = useState(null);\n const row = Math.max(MIN_ROW, Math.min(ROW, (maxHeight - 8) / Math.max(1, data.length)));\n const height = Math.max(180, data.length * row + 8);\n const innerW = Math.max(0, width - labelWidth - VALUE_GUTTER);\n\n const yScale = useMemo(\n () => scaleBand({ domain: data.map((_, i) => i), range: [4, height - 4], paddingInner: 0.3 }),\n [data, height]\n );\n const xScale = useMemo(\n () => scaleLinear({ domain: [0, Math.max(0, ...data.map(getValue)) || 1], range: [0, innerW] }),\n [data, getValue, innerW]\n );\n const barH = Math.min(MAX_BAR, yScale.bandwidth());\n // ~6.6px per character at 11px, less the 10px gap before the bar.\n const maxChars = Math.floor((labelWidth - 12) / 6.6);\n\n return (\n
\n {width > 0 && (\n \n {data.map((d, i) => {\n const label = getLabel(d);\n const v = getValue(d);\n const rowY = yScale(i) ?? 0;\n const cy = rowY + yScale.bandwidth() / 2;\n const w = Math.max(v > 0 ? 2 : 0, xScale(v));\n const faded = !!selected && selected !== label;\n return (\n rect:first-child]:fill-muted\"\n style={{ cursor: onSelect ? \"pointer\" : undefined }}\n onPointerEnter={() => setActive(i)}\n onPointerLeave={() => setActive(null)}\n onFocus={() => setActive(i)}\n onBlur={() => setActive(null)}\n onClick={() => onSelect?.(d)}\n onKeyDown={(e) => {\n if (onSelect && (e.key === \"Enter\" || e.key === \" \")) {\n e.preventDefault();\n onSelect(d);\n }\n }}\n >\n {/* Full-row hit target, washed on hover. */}\n \n \n {label}\n {truncate(label, maxChars)}\n \n \n {w > 0 && (\n \n )}\n \n {formatValue(v)}\n \n \n \n );\n })}\n \n )}\n {active !== null && data[active] && (\n \n {renderTooltip(data[active])}\n \n )}\n
\n );\n}\n" }, { "name": "src/components/charts/SegmentedControl.tsx", "type": "text/plain", "content": "import { cn } from \"@/lib/utils\";\n\n/**\n * The period switcher (30 days / 3 months / …) that sat hand-rolled above each\n * time-series chart. Same look, now shared, and exposed as a radio group so\n * screen readers announce the selected range.\n */\nexport function SegmentedControl({\n options,\n value,\n onChange,\n label,\n className,\n}: {\n options: readonly { value: T; label: string }[];\n value: T;\n onChange: (value: NoInfer) => void;\n label: string;\n className?: string;\n}) {\n return (\n
\n {options.map((o) => (\n onChange(o.value)}\n onKeyDown={(event) => {\n const index = options.findIndex(option => option.value === o.value);\n const next = event.key === \"ArrowRight\" || event.key === \"ArrowDown\" ? (index + 1) % options.length\n : event.key === \"ArrowLeft\" || event.key === \"ArrowUp\" ? (index - 1 + options.length) % options.length\n : event.key === \"Home\" ? 0 : event.key === \"End\" ? options.length - 1 : null;\n if (next === null) return;\n event.preventDefault();\n onChange(options[next].value);\n const buttons = event.currentTarget.parentElement?.querySelectorAll('[role=\"radio\"]');\n buttons?.[next]?.focus();\n }}\n className={cn(\n \"px-2.5 py-1 text-xs font-medium rounded-md transition-colors\",\n value === o.value\n ? \"bg-muted text-foreground\"\n : \"text-muted-foreground hover:text-foreground hover:bg-muted/50\"\n )}\n >\n {o.label}\n \n ))}\n
\n );\n}\n" }, { "name": "src/components/charts/TimeSeriesChart.tsx", "type": "text/plain", "content": "import { useCallback, useId, useMemo, useState, type KeyboardEvent, type PointerEvent } from \"react\";\nimport { AreaClosed, Line, LinePath } from \"@visx/shape\";\nimport { AxisBottom, AxisLeft } from \"@visx/axis\";\nimport { GridRows } from \"@visx/grid\";\nimport { Group } from \"@visx/group\";\nimport { scaleLinear, scaleTime } from \"@visx/scale\";\nimport { curveMonotoneX } from \"@visx/curve\";\nimport { localPoint } from \"@visx/event\";\nimport { useParentSize } from \"@visx/responsive\";\nimport { bisector, extent } from \"d3-array\";\nimport { parseLocalDate } from \"@/lib/utils\";\nimport { ChartTooltip, TooltipRow } from \"./ChartTooltip\";\n\nexport interface TimePoint {\n /** Local calendar date, `YYYY-MM-DD`. */\n date: string;\n value: number;\n}\n\ninterface Props {\n data: TimePoint[];\n height: number;\n /** Name of an HSL colour token, e.g. `--chart-blue`. */\n colorVar?: string;\n /** Series name shown in the tooltip, e.g. \"Balance\". */\n label: string;\n formatValue: (n: number) => string;\n formatAxisValue?: (n: number) => string;\n /** Tooltip date, so it honours the user's date-format setting. */\n formatDate?: (date: string) => string;\n /** Draw a zero baseline (with this caption) whenever the series dips below 0. */\n zeroLineLabel?: string;\n yAxisWidth?: number;\n /** Daily flow amounts need a true zero baseline even in line mode. */\n zeroBaseline?: boolean;\n /** \"line\" (default): area + line, the original look. \"bar\": one column per\n * point, sharing the same scales/axes/tooltip/keyboard nav. */\n chartType?: \"line\" | \"bar\";\n}\n\nconst MARGIN = { top: 8, right: 8, bottom: 28 };\nconst axisText = { fill: \"hsl(var(--muted-foreground))\", fontSize: 10 } as const;\ntype P = { t: Date; v: number; date: string };\nconst byDate = bisector((d) => d.t).center;\n\n/**\n * Area + line over time with a snapping crosshair, the chart behind every\n * balance and price trend. Monotone curve rather than Recharts' \"natural\":\n * natural overshoots between points, drawing balances that never existed.\n *\n * Arrow keys walk the points when the chart has focus, so the readout is not\n * pointer-only.\n */\nexport function TimeSeriesChart({\n data,\n height,\n colorVar = \"--primary\",\n label,\n formatValue,\n formatAxisValue = formatValue,\n formatDate = (d) => parseLocalDate(d).toLocaleDateString(undefined, { month: \"short\", day: \"numeric\", year: \"numeric\" }),\n zeroLineLabel,\n yAxisWidth = 48,\n zeroBaseline = false,\n chartType = \"line\",\n}: Props) {\n const { parentRef, width } = useParentSize({ debounceTime: 30 });\n const gradientId = useId();\n const [active, setActive] = useState(null);\n const color = `hsl(var(${colorVar}))`;\n\n const points = useMemo(\n () =>\n data\n .map((d) => ({ t: parseLocalDate(d.date), v: d.value, date: d.date }))\n // A row with an unreadable date can't be placed on a time axis.\n .filter((p) => !Number.isNaN(p.t.getTime()) && Number.isFinite(p.v)),\n [data]\n );\n const innerW = Math.max(0, width - yAxisWidth - MARGIN.right);\n const innerH = Math.max(0, height - MARGIN.top - MARGIN.bottom);\n const dipsBelowZero = !!zeroLineLabel && points.some((p) => p.v < 0);\n\n const xScale = useMemo(() => {\n const [lo, hi] = extent(points, (p) => p.t) as [Date, Date];\n return scaleTime({ domain: [lo ?? new Date(), hi ?? new Date()], range: [0, innerW] });\n }, [points, innerW]);\n\n const yScale = useMemo(() => {\n let [lo, hi] = extent(points, (p) => p.v) as [number, number];\n lo ??= 0;\n hi ??= 0;\n if (dipsBelowZero) hi = Math.max(hi, 0);\n // A bar's height only reads correctly against a true zero baseline (two\n // bars twice as tall as each other should mean twice the value); the\n // line chart has no such requirement and keeps the tighter, padded-to-\n // the-data domain that makes small movements visible.\n if (chartType === \"bar\" || zeroBaseline) lo = Math.min(lo, 0);\n const topPad = (hi - lo) * 0.08 || Math.abs(hi) * 0.08 || 1;\n const bottomPad = chartType === \"bar\" || zeroBaseline ? 0 : topPad;\n return scaleLinear({ domain: [lo - bottomPad, hi + topPad], range: [innerH, 0], nice: 4 });\n }, [points, innerH, dipsBelowZero, chartType, zeroBaseline]);\n\n const spanDays = points.length > 1 ? (points[points.length - 1].t.getTime() - points[0].t.getTime()) / 86_400_000 : 0;\n const tickDate = (d: Date) =>\n d.toLocaleDateString(undefined, spanDays > 300 ? { month: \"short\", year: \"2-digit\" } : { month: \"short\", day: \"numeric\" });\n\n const onPointerMove = useCallback(\n (e: PointerEvent) => {\n const pt = localPoint(e);\n if (!pt || points.length === 0) return;\n setActive(byDate(points, xScale.invert(pt.x - yAxisWidth)));\n },\n [points, xScale, yAxisWidth]\n );\n\n const onKeyDown = (e: KeyboardEvent) => {\n if (points.length === 0) return;\n const last = points.length - 1;\n const next =\n e.key === \"ArrowLeft\" ? Math.max(0, (active ?? last) - 1)\n : e.key === \"ArrowRight\" ? Math.min(last, (active ?? last) + 1)\n : e.key === \"Home\" ? 0\n : e.key === \"End\" ? last\n : null;\n if (next === null) return;\n e.preventDefault();\n setActive(next);\n };\n\n const shown = active !== null ? points[active] : null;\n const lastPoint = points[points.length - 1];\n const x = (p: P) => xScale(p.t);\n const y = (p: P) => yScale(p.v);\n\n // Bar width from the tightest gap between consecutive points, so daily\n // data doesn't touch and sparse data doesn't turn into hairlines.\n const barWidth = useMemo(() => {\n if (points.length < 2) return Math.min(24, innerW * 0.5);\n const xs = points.map((p) => xScale(p.t)).sort((a, b) => a - b);\n let minGap = Infinity;\n for (let i = 1; i < xs.length; i++) minGap = Math.min(minGap, xs[i] - xs[i - 1]);\n return Math.max(2, Math.min(28, minGap * 0.6));\n }, [points, xScale, innerW]);\n\n return (\n
\n {width > 0 && points.length > 0 && (\n setActive((a) => a ?? points.length - 1)}\n onBlur={() => setActive(null)}\n className=\"outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm\"\n >\n \n \n \n \n \n \n \n \n {dipsBelowZero && (\n <>\n \n {zeroLineLabel}\n \n )}\n {chartType === \"bar\" ? (\n points.map((p, i) => {\n const top = y(p);\n // Bars grow from the true zero line (the yScale domain\n // itself extends to 0 in bar mode, see above), so height is\n // always proportional to value, not just to the visible range.\n return (\n \n );\n })\n ) : (\n <>\n \n \n \n )}\n formatAxisValue(Number(v))}\n tickLabelProps={() => ({ ...axisText, textAnchor: \"end\", dx: -6, dy: 3 })}\n />\n tickDate(v as Date)}\n tickLabelProps={() => ({ ...axisText, textAnchor: \"middle\", dy: 4 })}\n />\n {/* Bar mode signals the active point through the bar's own\n opacity above; a dot sitting on top of a column, or a\n crosshair cutting through it, would be redundant. */}\n {chartType === \"line\" && (\n shown ? (\n \n \n \n \n ) : (\n // Resting end-dot marks \"today\" on the line.\n \n )\n )}\n \n {/* Hit area covers the whole plot: readers aim at a date, not a 2px line. */}\n setActive(null)}\n />\n \n )}\n {shown && (\n \n

{formatDate(shown.date)}

\n \n \n )}\n
\n );\n}\n" }, { "name": "src/components/charts/WeightRing.tsx", "type": "text/plain", "content": "/**\n * A tiny circular progress ring showing one row's share of a total, for a\n * table where a bar would take a whole column but a ring fits inline next to\n * the label it belongs to.\n */\nexport function WeightRing({ pct, size = 22, thickness = 3 }: { pct: number; size?: number; thickness?: number }) {\n const clamped = Math.max(0, Math.min(100, pct));\n const radius = (size - thickness) / 2;\n const circumference = 2 * Math.PI * radius;\n const offset = circumference * (1 - clamped / 100);\n return (\n \n \n \n \n );\n}\n" }, { "name": "src/components/commandPaletteConfig.ts", "type": "text/plain", "content": "import { DASHBOARD_PATH } from \"@/lib/deployment\";\nimport type { ComponentType } from \"react\";\nimport { ArrowLeftRight, BarChart3, FileBarChart, Flag, Home, Landmark, Lightbulb, Settings, Target, TrendingUp, Wallet } from \"lucide-react\";\n\nexport const PAGES: { label: string; to: string; keys: string; icon: ComponentType<{ className?: string }> }[] = [\n { label: \"Home\", to: DASHBOARD_PATH, keys: \"g h\", icon: Home },\n { label: \"Transactions\", to: \"/transactions\", keys: \"g t\", icon: ArrowLeftRight },\n { label: \"Analytics\", to: \"/analytics\", keys: \"g a\", icon: BarChart3 },\n { label: \"Reports\", to: \"/reports\", keys: \"g r\", icon: FileBarChart },\n { label: \"Budgets\", to: \"/budgets\", keys: \"g b\", icon: Target },\n { label: \"Investments\", to: \"/investments\", keys: \"g i\", icon: TrendingUp },\n { label: \"Accounts\", to: \"/accounts\", keys: \"g c\", icon: Landmark },\n { label: \"Assets\", to: \"/assets\", keys: \"g e\", icon: Wallet },\n { label: \"Financial planning\", to: \"/planning\", keys: \"g p\", icon: Lightbulb },\n { label: \"Goals\", to: \"/goals\", keys: \"g g\", icon: Flag },\n { label: \"Settings\", to: \"/settings\", keys: \"g s\", icon: Settings },\n];\n\n/** Other components open the palette by dispatching this (e.g. the top-bar button). */\nexport const OPEN_PALETTE_EVENT = \"open-command-palette\";\n" }, { "name": "src/components/dashboard/BalanceChart.tsx", "type": "text/plain", "content": "import { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { TimeSeriesChart } from \"@/components/charts/TimeSeriesChart\";\nimport { SegmentedControl } from \"@/components/charts/SegmentedControl\";\nimport { ChartTypeToggle } from \"@/components/charts/ChartTypeToggle\";\nimport { useFinanceData } from \"@/context/FinanceDataContext\";\nimport { useMemo, useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { useMoney } from \"@/hooks/useMoney\";\nimport { periodChange } from \"@/lib/balanceSheet\";\nimport { cashBalanceSeries } from \"@/lib/balanceHistory\";\nimport { useParentSize } from \"@visx/responsive\";\nimport { TrendingDown, TrendingUp, LineChart as LineChartIcon, BarChart3 } from \"lucide-react\";\n\nconst CHART_TYPES = [\n { value: \"line\", icon: LineChartIcon, label: \"Line\" },\n { value: \"bar\", icon: BarChart3, label: \"Bar\" },\n] as const;\n\nconst periods = [\n { label: \"30 days\", days: 30 },\n { label: \"3 months\", days: 90 },\n { label: \"6 months\", days: 180 },\n { label: \"All time\", days: 999 },\n];\nconst periodOptions = periods.map((p) => ({ value: p.label, label: p.label }));\n\ninterface BalanceChartProps {\n inline?: boolean;\n}\n\nexport function BalanceChart({ inline }: BalanceChartProps) {\n const { transactions, accounts } = useFinanceData({ summary: true });\n const [period, setPeriod] = useState(\"3 months\");\n const [chartType, setChartType] = useState<\"line\" | \"bar\">(\"line\");\n const { compact, money, date: fmtDate } = useMoney();\n\n // Spendable cash (checking + savings) over time: see cashBalanceSeries for\n // why cars, loans and brokerage accounts are left out and how the line is\n // smoothed into a trend instead of a heartbeat.\n const days = periods.find((p) => p.label === period)?.days ?? 90;\n const data = useMemo(\n () => cashBalanceSeries(transactions, accounts, days >= 999 ? null : days),\n [transactions, accounts, days]\n );\n\n const change = useMemo(() => periodChange(data.map((d) => d.value)), [data]);\n const { parentRef: fillRef, height: fillHeight } = useParentSize({ debounceTime: 30 });\n\n const chart = (\n
\n
\n {change ? (\n

\n {change.amount > 0 ? (\n \n ) : change.amount < 0 ? (\n \n ) : null}\n 0 ? \"text-chart-green\" : change.amount < 0 ? \"text-chart-red\" : \"text-foreground\")}>\n {change.amount > 0 ? \"+\" : change.amount < 0 ? \"-\" : \"\"}{money(Math.abs(change.amount))}\n {change.pct !== null && ` (${change.pct > 0 ? \"+\" : \"\"}${change.pct.toFixed(1)}%)`}\n \n {period === \"All time\" ? \"all time\" : `over ${period}`}\n

\n ) : (\n \n )}\n
\n \n \n
\n
\n {/* Inline, the plot grows to fill its card when the card beside it is\n taller, instead of leaving a blank band under the chart. */}\n
\n {data.length ? fmtDate(d)}\n chartType={chartType}\n /> :

No transactions to chart for checking and savings.

}\n
\n
\n );\n\n if (inline) return chart;\n\n return (\n \n \n
\n Balance Over Time\n Your total balance over time\n
\n \n {chart}\n \n );\n}\n" }, { "name": "src/components/dashboard/CashflowSankeyChart.tsx", "type": "text/plain", "content": "import { useMemo, useState, type PointerEvent } from \"react\";\nimport { sankey, sankeyLinkHorizontal, type SankeyNodeMinimal, type SankeyLinkMinimal } from \"d3-sankey\";\nimport { useParentSize } from \"@visx/responsive\";\nimport { localPoint } from \"@visx/event\";\nimport type { CashflowNode, CashflowLink, SankeyNodeKind } from \"@/lib/cashflowSankey\";\nimport { shareColor } from \"@/components/dashboard/shareColors\";\nimport { useMoney } from \"@/hooks/useMoney\";\nimport { ChartTooltip } from \"@/components/charts/ChartTooltip\";\n\ntype LaidOutNode = CashflowNode & Required, \"x0\" | \"x1\" | \"y0\" | \"y1\" | \"depth\">> & { value?: number };\ntype LaidOutLink = CashflowLink & SankeyLinkMinimal & { source: LaidOutNode; target: LaidOutNode };\n\nconst NODE_WIDTH = 10;\nconst NODE_PADDING = 16;\nconst ROW_HEIGHT = 34;\n//: Node labels render outside the node rects (left column labels to their\n//: left, right column to their right), so the layout's own extent has to\n//: leave room for them or the SVG's default overflow:hidden clips every\n//: label off the canvas entirely.\nconst LABEL_MARGIN = 152;\n\n// Emphasis levels for hover/focus. A hovered node lights up every link\n// touching it (and those links' other endpoints); a hovered link lights up\n// only itself and its own two endpoints. Everything else fades.\nconst LINK_OPACITY = 0.4;\nconst LINK_OPACITY_CONNECTED = 0.8;\nconst LINK_OPACITY_ACTIVE = 0.9;\nconst LINK_OPACITY_DIMMED = 0.06;\nconst NODE_OPACITY_DIMMED = 0.25;\nconst TRANSITION = \"opacity 200ms ease, stroke-opacity 200ms ease\";\n\ntype Hover = { type: \"node\"; id: string } | { type: \"link\"; index: number } | null;\n\nfunction nodeFill(kind: SankeyNodeKind, expenseRank: number): string {\n if (kind === \"income\" || kind === \"surplus\") return \"hsl(var(--chart-green))\";\n if (kind === \"hub\") return \"hsl(var(--foreground))\";\n return shareColor(expenseRank);\n}\n\n//: An income source is a merchant name and can be arbitrarily long; without\n//: a cap it would run past the reserved label margin regardless of size.\nfunction truncate(s: string, max = 18): string {\n return s.length > max ? `${s.slice(0, max - 1)}…` : s;\n}\n\n/**\n * Income sources -> Cash flow -> expense categories (+ surplus), Sure's\n * dashboard Cashflow diagram. Built directly on d3-sankey (no visx\n * equivalent exists for this layout) with a plain SVG render: node rects\n * carry identity colour, each link is tinted by whichever endpoint isn't the\n * hub, so a flow visually belongs to the source or category it touches\n * rather than the neutral hub in the middle.\n */\nexport function CashflowSankeyChart({ nodes, links }: { nodes: CashflowNode[]; links: CashflowLink[] }) {\n const { money, compact } = useMoney();\n const { parentRef, width } = useParentSize({ debounceTime: 30 });\n const [hover, setHover] = useState(null);\n const [pointer, setPointer] = useState<{ x: number; y: number } | null>(null);\n\n const expenseRank = useMemo(() => {\n const ranks = new Map();\n nodes.filter((n) => n.kind === \"expense\").forEach((n, i) => ranks.set(n.id, i));\n return ranks;\n }, [nodes]);\n\n const maxColumnRows = useMemo(() => {\n const byDepthCount = new Map();\n for (const n of nodes) byDepthCount.set(n.kind, (byDepthCount.get(n.kind) ?? 0) + 1);\n return Math.max(byDepthCount.get(\"income\") ?? 0, (byDepthCount.get(\"expense\") ?? 0) + (byDepthCount.get(\"surplus\") ?? 0));\n }, [nodes]);\n const height = Math.max(220, maxColumnRows * ROW_HEIGHT + 40);\n\n const { laidOutNodes, laidOutLinks } = useMemo(() => {\n if (nodes.length === 0 || width === 0) return { laidOutNodes: [] as LaidOutNode[], laidOutLinks: [] as LaidOutLink[] };\n const gen = sankey()\n .nodeId((d) => d.id)\n .nodeWidth(NODE_WIDTH)\n .nodePadding(NODE_PADDING)\n .extent([\n [LABEL_MARGIN, 10],\n [Math.max(LABEL_MARGIN + 40, width - LABEL_MARGIN), height - 10],\n ]);\n const graph = gen({\n nodes: nodes.map((d) => ({ ...d })),\n links: links.map((d) => ({ ...d })),\n });\n return { laidOutNodes: graph.nodes as LaidOutNode[], laidOutLinks: graph.links as LaidOutLink[] };\n }, [nodes, links, width, height]);\n\n // Total flow through the hub — d3-sankey gives every node a `.value` of\n // max(incoming, outgoing) when none is supplied explicitly, so the hub's is\n // the total cash flow for the period. Link tooltips show each flow's share\n // of this, not of their own column, so a link reads the same whether it's\n // hovered on the income or the expense side.\n const totalFlow = useMemo(\n () => laidOutNodes.find((n) => n.kind === \"hub\")?.value ?? 0,\n [laidOutNodes]\n );\n\n // What a hover lights up: the hovered thing itself, plus everything one\n // hop away from it (a node's links and their other ends, or a link's own\n // two endpoints).\n const connected = useMemo(() => {\n if (!hover) return null;\n const nodeIds = new Set();\n const linkIndexes = new Set();\n if (hover.type === \"node\") {\n nodeIds.add(hover.id);\n laidOutLinks.forEach((l, i) => {\n if (l.source.id === hover.id || l.target.id === hover.id) {\n linkIndexes.add(i);\n nodeIds.add(l.source.id);\n nodeIds.add(l.target.id);\n }\n });\n } else {\n const l = laidOutLinks[hover.index];\n if (l) {\n linkIndexes.add(hover.index);\n nodeIds.add(l.source.id);\n nodeIds.add(l.target.id);\n }\n }\n return { nodeIds, linkIndexes };\n }, [hover, laidOutLinks]);\n\n const linkOpacity = (index: number): number => {\n if (!hover) return LINK_OPACITY;\n if (hover.type === \"link\") return index === hover.index ? LINK_OPACITY_ACTIVE : LINK_OPACITY_DIMMED;\n return connected?.linkIndexes.has(index) ? LINK_OPACITY_CONNECTED : LINK_OPACITY_DIMMED;\n };\n\n const nodeOpacity = (id: string): number => {\n if (!hover) return 1;\n return connected?.nodeIds.has(id) ? 1 : NODE_OPACITY_DIMMED;\n };\n\n const clearHover = () => { setHover(null); setPointer(null); };\n const track = (e: PointerEvent) => {\n const pt = localPoint(e);\n if (pt) setPointer({ x: pt.x, y: pt.y });\n };\n\n const linkPath = sankeyLinkHorizontal();\n\n if (nodes.length === 0) {\n return (\n
\n No income or spending in this period.\n
\n );\n }\n\n const maxDepth = Math.max(...laidOutNodes.map((n) => n.depth), 0);\n const hoveredLink = hover?.type === \"link\" ? laidOutLinks[hover.index] : undefined;\n\n return (\n
\n {width > 0 && (\n \n \n {laidOutLinks.map((l, i) => {\n // The link \"belongs\" to whichever side isn't the neutral hub,\n // so income -> hub is coloured by the source and hub -> expense\n // by the target.\n const owner = l.source.kind === \"hub\" ? l.target : l.source;\n const d = linkPath(l) ?? \"\";\n const pct = totalFlow > 0 ? (l.value / totalFlow) * 100 : 0;\n return (\n \n \n {/* Wider transparent hit area so thin flows and the gap\n right at a node's edge are still easy to hover, which\n is what caused the flicker moving from a node onto its\n links. */}\n { setHover({ type: \"link\", index: i }); track(e); }}\n onPointerMove={track}\n onPointerLeave={clearHover}\n onFocus={() => setHover({ type: \"link\", index: i })}\n onBlur={clearHover}\n />\n \n );\n })}\n \n \n {laidOutNodes.map((n) => {\n const fill = nodeFill(n.kind, expenseRank.get(n.id) ?? 0);\n const isLeft = n.depth === 0;\n const isRight = n.depth === maxDepth;\n const cy = (n.y0 + n.y1) / 2;\n const value = n.kind === \"hub\" ? undefined : n.value;\n return (\n setHover({ type: \"node\", id: n.id })}\n onPointerLeave={clearHover}\n onFocus={() => setHover({ type: \"node\", id: n.id })}\n onBlur={clearHover}\n >\n \n {n.kind !== \"hub\" && (\n \n {n.name}\n {truncate(n.name)}\n {value != null && (\n \n {compact(value)}\n \n )}\n \n )}\n \n );\n })}\n \n \n )}\n {hoveredLink && pointer && (\n \n

\n {hoveredLink.source.name} → {hoveredLink.target.name}\n

\n

\n {money(hoveredLink.value)} ({totalFlow > 0 ? ((hoveredLink.value / totalFlow) * 100).toFixed(1) : \"0.0\"}%)\n

\n \n )}\n
\n );\n}\n" }, { "name": "src/components/dashboard/CollapseToggle.tsx", "type": "text/plain", "content": "import { ChevronDown } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\n/** Chevron button that shows or hides a dashboard section. */\nexport function CollapseToggle({ collapsed, onToggle, label, controls }: { collapsed: boolean; onToggle: () => void; label: string; controls: string }) {\n return (\n \n \n \n );\n}\n" }, { "name": "src/components/dashboard/ForecastWidget.tsx", "type": "text/plain", "content": "import { useMemo } from \"react\";\nimport { useFinanceData } from \"@/context/FinanceDataContext\";\nimport { useMoney } from \"@/hooks/useMoney\";\nimport { cn } from \"@/lib/utils\";\nimport { Progress } from \"@/components/ui/progress\";\nimport { TrendingUp, ArrowRight } from \"lucide-react\";\nimport { Link } from \"react-router-dom\";\nimport { monthKey } from \"@/lib/format\";\nimport { projectMonthEnd } from \"@/lib/budgets\";\n\n/**\n * Projected end-of-month balance.\n *\n * The previous version fetched budgets once on mount (so it never reflected an\n * edit), ignored income entirely, and used `max(totalBudget, actualSpend)` with\n * no sense of how far through the month it was, on the 2nd it projected a full\n * month of spending, on the 28th almost none. It now extrapolates real spend at\n * the current daily rate and counts income still expected.\n */\nexport function ForecastWidget() {\n const { accounts, transactions } = useFinanceData({ summary: true });\n const { money } = useMoney();\n\n const currentBalance = useMemo(\n () =>\n accounts\n .filter((a) => a.type === \"checking\" || a.type === \"savings\")\n .reduce((s, a) => s + a.balance, 0),\n [accounts]\n );\n\n const p = useMemo(\n () => projectMonthEnd(transactions, currentBalance, monthKey(new Date())),\n [transactions, currentBalance]\n );\n\n const isPositive = p.projectedBalance >= 0;\n const hasData = currentBalance !== 0 || p.spentToDate > 0;\n const spendRatio =\n currentBalance > 0 ? Math.min((p.projectedSpend / currentBalance) * 100, 100) : 0;\n const daysLeft = p.daysInMonth - p.daysElapsed;\n\n if (!hasData) {\n return (\n
\n \n

Connect your bank to see a forecast

\n
\n );\n }\n\n return (\n
\n
\n

\n Projected end of month\n

\n \n {money(p.projectedBalance)}\n

\n

\n {daysLeft > 0 ? `${daysLeft} days left · ` : \"\"}\n {money(p.spentToDate)} spent so far\n

\n
\n\n
\n div]:transition-all [&>div]:duration-700 [&>div]:ease-out\",\n spendRatio > 85\n ? \"[&>div]:bg-chart-red\"\n : spendRatio > 60\n ? \"[&>div]:bg-chart-yellow\"\n : \"[&>div]:bg-chart-green\"\n )}\n />\n
\n Balance {money(currentBalance)}\n Projected spend {money(p.projectedSpend)}\n
\n
\n\n \n View forecast \n \n
\n );\n}\n" }, { "name": "src/components/dashboard/OutflowsWidget.tsx", "type": "text/plain", "content": "import { useMemo, useState } from \"react\";\nimport { useParentSize } from \"@visx/responsive\";\nimport { DonutChart } from \"@/components/charts/DonutChart\";\nimport { BubbleChart } from \"@/components/charts/BubbleChart\";\nimport { ChartTypeToggle } from \"@/components/charts/ChartTypeToggle\";\nimport { categorySpendBreakdown } from \"@/lib/categorySpend\";\nimport { shareColor } from \"@/components/dashboard/shareColors\";\nimport { useMoney } from \"@/hooks/useMoney\";\nimport { PieChart, Circle } from \"lucide-react\";\nimport type { Transaction } from \"@/types/finance\";\n\n//: Slices beyond this rank fold into a single \"Other\" row, the same cutoff\n//: (and the same colour-cycling-to-muted fallback) the balance sheet's\n//: account list already uses via shareColor.\nconst MAX_SLICES = 5;\n\n/**\n * Dashboard \"Outflows\": this period's spending by category as a donut with\n * a ranked list beside it, matching Sure's dashboard widget of the same\n * name. Shares `categorySpendBreakdown` with the Analytics page's category\n * chart, so the two surfaces never disagree on what counts as spending.\n */\nconst CHART_TYPES = [\n { value: \"donut\", icon: PieChart, label: \"Donut\" },\n { value: \"bubbles\", icon: Circle, label: \"Bubbles\" },\n] as const;\n\nexport function OutflowsWidget({ transactions, donutOnly = false }: { transactions: Transaction[]; donutOnly?: boolean }) {\n const { money, compact } = useMoney();\n const { parentRef, width } = useParentSize({ debounceTime: 30 });\n const [chartType, setChartType] = useState<\"donut\" | \"bubbles\">(\"donut\");\n const breakdown = useMemo(() => categorySpendBreakdown(transactions), [transactions]);\n const total = breakdown.reduce((s, d) => s + d.value, 0);\n\n const top = breakdown.slice(0, MAX_SLICES);\n const rest = breakdown.slice(MAX_SLICES);\n const otherValue = rest.reduce((s, d) => s + d.value, 0);\n const rows = otherValue > 0\n ? [...top, { name: \"Other\", value: otherValue, pct: total > 0 ? (otherValue / total) * 100 : 0 }]\n : top;\n\n if (breakdown.length === 0) {\n return (\n
\n No spending in this period.\n
\n );\n }\n\n const slices = rows.map((r, i) => ({ name: r.name, value: r.value, color: shareColor(i) }));\n\n if (donutOnly) {\n return (\n
\n {width > 0 && }\n
\n );\n }\n\n return (\n
\n
\n \n
\n
\n {chartType === \"donut\" ? (\n \n ) : (\n \n )}\n
\n {rows.map((r, i) => (\n
\n
\n \n \n {r.name}\n \n \n {money(r.value)} · {r.pct.toFixed(0)}%\n \n
\n
\n
\n
\n
\n ))}\n
\n
\n
\n );\n}\n" }, { "name": "src/components/dashboard/RecentTransactions.tsx", "type": "text/plain", "content": "import { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { useFinanceData } from \"@/context/FinanceDataContext\";\nimport { cn } from \"@/lib/utils\";\nimport { useMoney } from \"@/hooks/useMoney\";\nimport { refinedMerchantLabel } from \"@/lib/merchant\";\nimport { normalizeCategory, UNCATEGORIZED } from \"@/lib/categories\";\nimport { Link, useNavigate } from \"react-router-dom\";\nimport { MerchantAvatar } from \"@/components/elements/CategoryIcon\";\nimport { CollapseToggle } from \"@/components/dashboard/CollapseToggle\";\nimport { useCollapsed } from \"@/hooks/useCollapsed\";\nimport { useMerchantRefinements } from \"@/hooks/useMerchantRefinements\";\n\nexport function RecentTransactions({ rail = false, limit }: { rail?: boolean; limit?: number }) {\n const { transactions } = useFinanceData();\n const { moneyAbs, date: fmtDate } = useMoney();\n const navigate = useNavigate();\n const [collapsed, toggle] = useCollapsed(\"recent\");\n const { data: refinements } = useMerchantRefinements();\n // A transaction with no date (a malformed import/sync row) has no\n // meaningful recency and would crash the sort below (comparing null).\n const recent = transactions\n .filter((t) => t.date)\n .sort((a, b) => b.date.localeCompare(a.date))\n .slice(0, limit ?? (rail ? 14 : 8));\n\n if (recent.length === 0) {\n return (\n \n \n No recent transactions.\n \n \n );\n }\n\n return (\n \n \n
\n Recent transactions\n \n
\n View all\n \n \n
\n {recent.map((txn) => (\n navigate(`/transactions/${txn.id}`)}\n >\n {rail ? (\n <>\n
\n

\n {refinedMerchantLabel(txn.description, refinements, txn.date, txn.category)}\n

\n = 0 ? \"text-chart-green\" : \"text-foreground\")}>\n {txn.amount >= 0 ? \"+\" : \"-\"}{moneyAbs(txn.amount)}\n \n
\n

\n {fmtDate(txn.date, \"short\")}\n {normalizeCategory(txn.category) !== UNCATEGORIZED && · {normalizeCategory(txn.category)}}\n

\n \n ) : (\n <>\n
\n \n
\n

\n {refinedMerchantLabel(txn.description, refinements, txn.date, txn.category)}\n

\n

\n {fmtDate(txn.date)}\n {normalizeCategory(txn.category) !== UNCATEGORIZED && (\n · {normalizeCategory(txn.category)}\n )}\n

\n
\n
\n = 0 ? \"text-chart-green\" : \"text-foreground\")}>\n {txn.amount >= 0 ? \"+\" : \"-\"}{moneyAbs(txn.amount)}\n \n \n )}\n
\n ))}\n
\n \n \n );\n}\n" }, { "name": "src/components/dashboard/StatCard.tsx", "type": "text/plain", "content": "import { Card, CardContent, CardFooter, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { cn } from \"@/lib/utils\";\nimport { TrendingUp, TrendingDown } from \"lucide-react\";\nimport { Link } from \"react-router-dom\";\n\ninterface StatCardProps {\n title: string;\n value: string;\n change?: string;\n changeType?: \"positive\" | \"negative\" | \"neutral\";\n description?: string;\n href?: string;\n}\n\nexport function StatCard({ title, value, change, changeType = \"neutral\", description, href }: StatCardProps) {\n const content = (\n \n \n
\n {title}\n {change && (\n \n {changeType === \"positive\" && }\n {changeType === \"negative\" && }\n {change}\n \n )}\n
\n \n \n

{value}

\n \n {description && (\n \n

{description}

\n \n )}\n \n );\n\n if (href) return {content};\n return content;\n}\n" }, { "name": "src/components/dashboard/UpcomingList.tsx", "type": "text/plain", "content": "import { differenceInCalendarDays } from \"date-fns\";\nimport { X } from \"lucide-react\";\nimport { CategoryIcon } from \"@/components/elements/CategoryIcon\";\nimport { Button } from \"@/components/ui/button\";\nimport { useMoney } from \"@/hooks/useMoney\";\nimport { parseLocalDate, cn } from \"@/lib/utils\";\nimport { useUpcomingRecurring, useRecurringMutations } from \"@/hooks/useRecurring\";\nimport { CADENCE_LABEL } from \"@/lib/recurring\";\nimport type { RecurringDto } from \"@/lib/api\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\n\nfunction dueLabel(dateStr: string, today = new Date()): string {\n const days = differenceInCalendarDays(parseLocalDate(dateStr), today);\n if (days <= 0) return \"Due today\";\n if (days === 1) return \"Tomorrow\";\n return `In ${days} days`;\n}\n\n/**\n * Predicted next occurrences of the user's detected bills, subscriptions and\n * paychecks, soonest first. Shared by the dashboard's Upcoming widget and\n * the Transactions page's Upcoming section, one query and one dismiss\n * action so a merchant dismissed in either place disappears from both.\n */\nexport function UpcomingList({ days = 30, limit }: { days?: number; limit?: number }) {\n const { data, isLoading } = useUpcomingRecurring(days);\n const { dismiss } = useRecurringMutations(days);\n const { money } = useMoney();\n\n const rows = limit ? (data ?? []).slice(0, limit) : data ?? [];\n\n // This query is in flight from the moment the page mounts, same as\n // everything else on it, but returning null while it resolves left this\n // one section visibly blank until it did - a pop-in the rest of the page\n // (which shows a skeleton instead) doesn't have. A plain `null` here\n // was never noticeable on the dashboard, where it sits well below the\n // fold, but the Transactions page puts it right in view.\n if (isLoading) {\n return (\n
\n {Array.from({ length: limit ?? 3 }).map((_, i) => (\n
\n \n
\n \n \n
\n \n
\n ))}\n
\n );\n }\n\n if (rows.length === 0) {\n return (\n

\n Nothing recurring due in the next {days} days.\n

\n );\n }\n\n return (\n
\n {rows.map((r: RecurringDto) => (\n \n \n
\n

{r.merchantName}

\n

\n {CADENCE_LABEL[r.cadence]} · {dueLabel(r.nextDate)}\n

\n
\n \n {r.type === \"income\" ? \"+\" : \"-\"}{money(r.typicalAmount)}\n \n dismiss.mutate(r.id)}\n >\n \n \n
\n ))}\n \n );\n}\n" }, { "name": "src/components/dashboard/WeightBar.tsx", "type": "text/plain", "content": "import { cn } from \"@/lib/utils\";\nimport { SHARE_COLORS, shareColor } from \"./shareColors\";\n\n/**\n * One thin bar split into each item's share, with a 2px surface gap between\n * segments. Identity comes from the matching dot on each row below, so the\n * bar never relies on colour alone.\n */\nexport function WeightBar({ shares, label, className }: { shares: { key: string; share: number }[]; label: string; className?: string }) {\n const shown = shares.filter((s) => s.share > 0);\n const main = shown.slice(0, SHARE_COLORS.length);\n const other = shown.slice(SHARE_COLORS.length).reduce((s, x) => s + x.share, 0);\n const segments = [...main.map((s, i) => ({ ...s, color: shareColor(i) })), ...(other > 0 ? [{ key: \"other\", share: other, color: shareColor(99) }] : [])];\n return (\n
\n {segments.length === 0 ? (\n
\n ) : (\n segments.map((s) => (\n
\n ))\n )}\n
\n );\n}\n" }, { "name": "src/components/dashboard/shareColors.ts", "type": "text/plain", "content": "/** Categorical order for account shares; past these, accounts fold into \"Other\". */\nexport const SHARE_COLORS = [\"--chart-blue\", \"--chart-purple\", \"--chart-green\", \"--chart-orange\", \"--chart-yellow\"] as const;\nconst OTHER = \"--muted-foreground\";\n\n/** The colour for the i-th item of a side, so the bar and the row dots agree. */\nexport function shareColor(i: number) {\n return `hsl(var(${SHARE_COLORS[i] ?? OTHER}))`;\n}\n" }, { "name": "src/components/elements/AnimatedMoney.tsx", "type": "text/plain", "content": "import NumberFlow from \"@number-flow/react\";\nimport { useMoney } from \"@/hooks/useMoney\";\nimport { formatMoney, localeFor, maskedMoney } from \"@/lib/format\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A headline amount that counts to its new value when it changes (a refresh,\n * switching month). Uses the user's currency setting by default; in privacy\n * mode it shows the mask instead. NumberFlow honours prefers-reduced-motion\n * on its own.\n *\n * Pass `currency` to override the app-wide setting for amounts that carry\n * their own currency regardless of it, e.g. an investment holding priced in\n * its native market's currency.\n */\nexport function AnimatedMoney({\n value,\n currency: currencyOverride,\n signDisplay = \"auto\",\n className,\n}: {\n value: number;\n currency?: string;\n signDisplay?: \"auto\" | \"exceptZero\" | \"never\";\n className?: string;\n}) {\n const { currency: appCurrency, hidden } = useMoney();\n const currency = currencyOverride ?? appCurrency;\n if (hidden) {\n return (\n \n {maskedMoney(currency, Number.isFinite(value) ? value : 0, { signDisplay })}\n \n );\n }\n const n = Number.isFinite(value) ? value : 0;\n const format = { style: \"currency\", currency, minimumFractionDigits: 2, maximumFractionDigits: 2, signDisplay } as const;\n let label: string;\n try {\n label = new Intl.NumberFormat(localeFor(currency), format).format(n);\n } catch {\n // A currency setting Intl doesn't recognise: show the plain formatter's\n // fallback text rather than letting NumberFlow throw mid-render.\n return {formatMoney(n, currency, { signDisplay })};\n }\n return (\n \n {/* NumberFlow renders spinning digit strips in its shadow DOM, which read\n as noise to assistive tech; they get a plain-text twin instead. */}\n \n {label}\n \n );\n}\n" }, { "name": "src/components/elements/BulkTagPicker.tsx", "type": "text/plain", "content": "import { useState } from \"react\";\nimport { Check, ChevronDown, Plus, Tag as TagIcon } from \"lucide-react\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from \"@/components/ui/command\";\nimport { Button } from \"@/components/ui/button\";\nimport type { TagDto } from \"@/lib/api\";\nimport { tagColorValue } from \"@/lib/tagColors\";\nimport { cn } from \"@/lib/utils\";\n\nfunction TagDot({ tag }: { tag: TagDto }) {\n return ;\n}\n\ninterface Props {\n tags: TagDto[];\n /** How many records this would apply to, for the button's confirm label. */\n count: number;\n onApply: (tagIds: string[]) => void;\n /** Creates a new tag (with the default colour) and returns its id, so it\n * can be picked immediately without a second round trip. */\n onCreate?: (name: string) => Promise;\n disabled?: boolean;\n}\n\n/**\n * Multi-select tag picker for the bulk-selection floating bar: unlike\n * TagPicker (one transaction, shows and toggles its current tags), this has\n * no \"current\" state to show - the selection is a mix of transactions with\n * different tags already on them - so it only ever adds. Picks build up\n * locally and apply together in one call when \"Apply\" is pressed, rather\n * than firing a request per tag.\n */\nexport function BulkTagPicker({ tags, count, onApply, onCreate, disabled }: Props) {\n const [open, setOpen] = useState(false);\n const [query, setQuery] = useState(\"\");\n const [picked, setPicked] = useState([]);\n const [creating, setCreating] = useState(false);\n\n const q = query.trim().toLowerCase();\n const shown = q ? tags.filter((t) => t.name.toLowerCase().includes(q)) : tags;\n const exactMatch = tags.some((t) => t.name.toLowerCase() === q);\n\n const toggle = (id: string) => {\n setPicked((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));\n };\n\n const reset = () => {\n setPicked([]);\n setQuery(\"\");\n };\n\n const createAndPick = async () => {\n if (!onCreate || !query.trim() || creating) return;\n setCreating(true);\n try {\n const id = await onCreate(query.trim());\n setPicked((prev) => [...prev, id]);\n setQuery(\"\");\n } finally {\n setCreating(false);\n }\n };\n\n const apply = () => {\n if (picked.length === 0) return;\n onApply(picked);\n setOpen(false);\n reset();\n };\n\n return (\n { setOpen(o); if (!o) reset(); }} modal>\n \n \n \n \n \n \n \n {shown.length === 0 && (\n \n {onCreate && query.trim() ? (\n void createAndPick()}\n disabled={creating}\n className={cn(\"flex w-full items-center gap-2 px-2 py-1.5 text-sm text-left rounded-sm hover:bg-accent\", creating && \"opacity-50\")}\n >\n \n Create \"{query.trim()}\"\n \n ) : (\n \"No tags found.\"\n )}\n \n )}\n \n {shown.map((t) => (\n toggle(t.id)} className=\"gap-2\">\n \n {t.name}\n {picked.includes(t.id) && }\n \n ))}\n {onCreate && query.trim() && !exactMatch && shown.length > 0 && (\n void createAndPick()} className=\"gap-2 text-primary\">\n \n Create \"{query.trim()}\"\n \n )}\n \n \n \n {picked.length > 0 && (\n
\n \n
\n )}\n \n \n );\n}\n" }, { "name": "src/components/elements/CategoryIcon.tsx", "type": "text/plain", "content": "import { categoryBadgeClass, normalizeCategory } from \"@/lib/categories\";\nimport { normalizeMerchant } from \"@/lib/merchant\";\nimport { cn } from \"@/lib/utils\";\nimport { CATEGORY_ICON } from \"./categoryIcons\";\n\nconst SIZES = {\n xs: { box: \"h-5 w-5\", icon: 11, text: \"text-[10px]\" },\n sm: { box: \"h-6 w-6\", icon: 12, text: \"text-[11px]\" },\n md: { box: \"h-8 w-8\", icon: 14, text: \"text-xs\" },\n} as const;\n\ntype Size = keyof typeof SIZES;\n\n/** A category's icon on a disc tinted with the category's badge colour. */\nexport function CategoryIcon({ category, size = \"md\", className }: { category: string; size?: Size; className?: string }) {\n const c = normalizeCategory(category);\n const Icon = CATEGORY_ICON[c];\n const s = SIZES[size];\n return (\n \n \n \n );\n}\n\n/**\n * Round avatar for a transaction: the merchant's initial, tinted with its\n * category's colour. The initial comes from the cleaned merchant name, the\n * raw description starts with bank noise, so \"CHECKCARD 0411 STARBUCKS\" used to\n * render as \"C\".\n */\nexport function MerchantAvatar({\n description,\n category,\n size = \"md\",\n className,\n}: {\n description: string;\n category: string;\n size?: Size;\n className?: string;\n}) {\n const name = normalizeMerchant(description) || description;\n const initial = (name.match(/[\\p{L}\\p{N}]/u)?.[0] ?? \"?\").toUpperCase();\n const s = SIZES[size];\n return (\n \n {initial}\n \n );\n}\n\n/** The category chip: icon + name, in the category's badge colours. */\nexport function CategoryBadge({ category, className }: { category: string; className?: string }) {\n const c = normalizeCategory(category);\n const Icon = CATEGORY_ICON[c];\n return (\n \n \n {category}\n \n );\n}\n" }, { "name": "src/components/elements/CategoryPicker.tsx", "type": "text/plain", "content": "import { useContext } from \"react\";\nimport { CategoryCatalogContext } from \"@/context/CategoryCatalogContext\";\nimport { useState, type ReactNode } from \"react\";\nimport { Check, ChevronDown, LayoutGrid } from \"lucide-react\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from \"@/components/ui/command\";\nimport { CATEGORIES } from \"@/lib/categories\";\nimport { cn } from \"@/lib/utils\";\nimport { CategoryIcon } from \"./CategoryIcon\";\n\nexport const ALL_CATEGORIES = \"all\";\n\ninterface Props {\n value: string;\n onChange: (category: string) => void;\n categories?: readonly string[];\n /** Adds an \"all\" row (value `\"all\"`) above the categories, for filters. */\n allLabel?: string;\n placeholder?: string;\n /** Replaces the default select-style trigger, e.g. a bulk-action button. */\n trigger?: ReactNode;\n triggerClassName?: string;\n align?: \"start\" | \"center\" | \"end\";\n disabled?: boolean;\n \"aria-label\"?: string;\n}\n\n/**\n * Searchable category picker. Twenty categories is past what a plain select\n * list scans comfortably, so typing narrows the list; each row carries the\n * category's icon and colour so the choice is recognisable before it is read.\n *\n * The default trigger matches the app's select trigger, so it drops into any\n * form or filter row in place of a `, whose chrome (icon, dropdown styling, light/dark\n * behavior) is entirely OS/browser-drawn and can't be made to match the\n * rest of the UI. Every other date-pickable field already used this\n * Popover+Calendar pattern inline (AddTransactionDialog, Reports' own\n * previous picker, GoalsTracker, the investment dialogs); this pulls it\n * into one place instead of a sixth copy.\n */\nexport function DatePicker({\n value, onChange, maxDate, minDate, placeholder = \"Pick a date\", clearable, className, \"aria-label\": ariaLabel,\n}: Props) {\n const [open, setOpen] = useState(false);\n const { date: fmt } = useMoney();\n const selected = value ? parseLocalDate(value) : undefined;\n\n return (\n \n \n \n \n {value ? fmt(value, \"medium\") : placeholder}\n {clearable && value && (\n { e.stopPropagation(); onChange(null); }}\n onKeyDown={(e) => { if (e.key === \"Enter\" || e.key === \" \") { e.stopPropagation(); onChange(null); } }}\n className=\"rounded-sm p-0.5 -mr-1 hover:bg-muted-foreground/20 transition-colors shrink-0\"\n >\n \n \n )}\n \n \n \n { if (d) onChange(toDateString(d)); setOpen(false); }}\n disabled={(d) => (maxDate != null && d > maxDate) || (minDate != null && d < minDate)}\n defaultMonth={selected ?? maxDate}\n initialFocus\n />\n \n \n );\n}\n" }, { "name": "src/components/elements/DetailRow.tsx", "type": "text/plain", "content": "import type { ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/** A label on the left, its value on the right, the rows of a detail panel. */\nexport function DetailRow({ label, children, className }: { label: string; children: ReactNode; className?: string }) {\n return (\n
\n
{label}
\n
{children}
\n
\n );\n}\n" }, { "name": "src/components/elements/EmptyState.tsx", "type": "text/plain", "content": "import type { ReactNode } from \"react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * One empty state for the whole app. `page` is the first-run screen (nothing\n * imported yet); `inline` sits inside a card when a filter or a section comes\n * up empty.\n */\nexport function EmptyState({\n icon: Icon,\n title,\n description,\n action,\n variant = \"page\",\n className,\n}: {\n icon?: LucideIcon;\n title: string;\n description?: ReactNode;\n action?: ReactNode;\n variant?: \"page\" | \"inline\";\n className?: string;\n}) {\n const page = variant === \"page\";\n return (\n \n {Icon &&\n (page ? (\n
\n \n
\n ) : (\n
\n \n
\n ))}\n
\n

{title}

\n {description &&

{description}

}\n
\n {action}\n
\n );\n}\n" }, { "name": "src/components/elements/MonthPicker.tsx", "type": "text/plain", "content": "import { useState } from \"react\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport { Button } from \"@/components/ui/button\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\nconst MONTHS = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"];\n\n/** Click the month/year straight to any month within a year, instead of\n * stepping one at a time - opens on the trigger's own year, not always the\n * current one, so jumping to a month a year ago doesn't first require\n * paging the popover back itself. */\nexport function MonthPicker({\n value, onChange, maxDate, label,\n}: {\n value: Date;\n onChange: (date: Date) => void;\n /** No month after this one is selectable - typically \"today\". */\n maxDate?: Date;\n label: string;\n}) {\n const [open, setOpen] = useState(false);\n const [year, setYear] = useState(value.getFullYear());\n\n const maxYear = maxDate?.getFullYear();\n const maxMonth = maxDate?.getMonth();\n\n return (\n {\n setOpen(o);\n if (o) setYear(value.getFullYear());\n }}\n >\n \n \n {value.toLocaleDateString(\"en-US\", { month: \"long\", year: \"numeric\" })}\n \n \n \n
\n setYear((y) => y - 1)}\n aria-label=\"Previous year\"\n >\n \n \n {year}\n setYear((y) => y + 1)}\n disabled={maxYear != null && year >= maxYear}\n aria-label=\"Next year\"\n >\n \n \n
\n
\n {MONTHS.map((m, i) => {\n const isFuture = maxYear != null && maxMonth != null && (year > maxYear || (year === maxYear && i > maxMonth));\n const isSelected = year === value.getFullYear() && i === value.getMonth();\n return (\n {\n onChange(new Date(year, i, 1));\n setOpen(false);\n }}\n className={cn(\n \"text-sm rounded-md py-1.5 transition-colors\",\n isSelected\n ? \"bg-primary text-primary-foreground font-medium\"\n : isFuture\n ? \"text-muted-foreground/40 cursor-not-allowed\"\n : \"text-foreground hover:bg-muted\"\n )}\n >\n {m}\n \n );\n })}\n
\n \n \n );\n}\n" }, { "name": "src/components/elements/SearchInput.tsx", "type": "text/plain", "content": "import { forwardRef, useEffect, useImperativeHandle, useRef } from \"react\";\nimport { Search, X } from \"lucide-react\";\nimport { Input } from \"@/components/ui/input\";\nimport { cn } from \"@/lib/utils\";\n\nfunction isTypingTarget(el: EventTarget | null) {\n if (!(el instanceof HTMLElement)) return false;\n return el.isContentEditable || [\"INPUT\", \"TEXTAREA\", \"SELECT\"].includes(el.tagName);\n}\n\ninterface Props {\n value: string;\n onChange: (value: string) => void;\n placeholder?: string;\n className?: string;\n /** Focus on \"/\" from anywhere on the page (unless the user is typing). */\n shortcut?: boolean;\n /** Runs before the shortcut focuses, e.g. to reveal a collapsed filter panel. */\n onShortcut?: () => void;\n}\n\n/**\n * Search box with a \"/\" shortcut hint. The hint swaps to a clear button once\n * there is a query; Escape clears, and a second Escape leaves the field.\n */\nexport const SearchInput = forwardRef(function SearchInput(\n { value, onChange, placeholder = \"Search…\", className, shortcut = true, onShortcut },\n ref\n) {\n const inputRef = useRef(null);\n useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\n\n useEffect(() => {\n if (!shortcut) return;\n const onKey = (e: KeyboardEvent) => {\n if (e.key !== \"/\" || e.metaKey || e.ctrlKey || e.altKey || isTypingTarget(e.target)) return;\n e.preventDefault();\n onShortcut?.();\n inputRef.current?.focus();\n inputRef.current?.select();\n };\n window.addEventListener(\"keydown\", onKey);\n return () => window.removeEventListener(\"keydown\", onKey);\n }, [shortcut, onShortcut]);\n\n return (\n
\n \n onChange(e.target.value)}\n onKeyDown={(e) => {\n if (e.key !== \"Escape\") return;\n if (value) onChange(\"\");\n else inputRef.current?.blur();\n }}\n />\n {value ? (\n {\n onChange(\"\");\n inputRef.current?.focus();\n }}\n className=\"absolute right-2 top-1/2 -translate-y-1/2 rounded-sm p-1 text-muted-foreground hover:text-foreground\"\n >\n \n \n ) : (\n shortcut && (\n \n /\n \n )\n )}\n
\n );\n});\n" }, { "name": "src/components/elements/SplitEditor.tsx", "type": "text/plain", "content": "import { useEffect, useState } from \"react\";\nimport { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from \"@/components/ui/dialog\";\nimport { Input } from \"@/components/ui/input\";\nimport { Button } from \"@/components/ui/button\";\nimport { CategoryPicker } from \"@/components/elements/CategoryPicker\";\nimport { useMoney } from \"@/hooks/useMoney\";\nimport { UNCATEGORIZED } from \"@/lib/categories\";\nimport type { SplitDto, SplitInput } from \"@/lib/api\";\nimport { Plus, X } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Row {\n category: string;\n amount: string;\n}\n\nconst emptyRow = (): Row => ({ category: UNCATEGORIZED, amount: \"\" });\n\ninterface Props {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n /** The parent transaction's signed amount; splits target its magnitude. */\n transactionAmount: number;\n initialSplits: SplitDto[];\n onSave: (splits: SplitInput[]) => Promise;\n saving?: boolean;\n}\n\n/**\n * Divides one transaction's amount across several categories. Sends the\n * whole set on save (set_transaction_splits replaces it wholesale), so this\n * always starts from the current splits (or two blank rows for a first-time\n * split) rather than diffing individual add/remove operations.\n */\nexport function SplitEditor({ open, onOpenChange, transactionAmount, initialSplits, onSave, saving }: Props) {\n const { moneyAbs } = useMoney();\n const [rows, setRows] = useState([emptyRow(), emptyRow()]);\n const target = Math.abs(transactionAmount);\n\n useEffect(() => {\n if (!open) return;\n setRows(\n initialSplits.length > 0\n ? initialSplits.map((s) => ({ category: s.category || UNCATEGORIZED, amount: String(s.amount) }))\n : [emptyRow(), emptyRow()]\n );\n }, [open, initialSplits]);\n\n const sum = rows.reduce((n, r) => n + (parseFloat(r.amount) || 0), 0);\n const remaining = Math.round((target - sum) * 100) / 100;\n const balanced = Math.abs(remaining) < 0.01;\n const rowsValid = rows.every((r) => r.category && (parseFloat(r.amount) || 0) > 0);\n const canSave = rows.length >= 2 && rowsValid && balanced;\n\n const update = (i: number, patch: Partial) =>\n setRows((prev) => prev.map((r, idx) => (idx === i ? { ...r, ...patch } : r)));\n const addRow = () => setRows((prev) => [...prev, emptyRow()]);\n const removeRow = (i: number) => setRows((prev) => prev.filter((_, idx) => idx !== i));\n\n const save = async () => {\n if (!canSave) return;\n await onSave(rows.map((r) => ({ category: r.category, amount: Math.round(parseFloat(r.amount) * 100) / 100 })));\n onOpenChange(false);\n };\n\n const removeSplit = async () => {\n await onSave([]);\n onOpenChange(false);\n };\n\n return (\n \n \n Split transaction\n
\n {rows.map((row, i) => (\n
\n update(i, { category: c })}\n triggerClassName=\"h-9 flex-1\"\n />\n update(i, { amount: e.target.value })}\n className=\"w-24 shrink-0\"\n />\n removeRow(i)}\n disabled={rows.length <= 1}\n >\n \n \n
\n ))}\n\n \n\n
\n Total: {moneyAbs(target)}\n \n {balanced ? \"Balanced\" : remaining > 0 ? `${moneyAbs(remaining)} left` : `${moneyAbs(Math.abs(remaining))} over`}\n \n
\n
\n \n {initialSplits.length > 0 ? (\n \n ) : }\n
\n \n \n
\n \n \n \n );\n}\n" }, { "name": "src/components/elements/TagFilterPicker.tsx", "type": "text/plain", "content": "import { useState } from \"react\";\nimport { Check, ChevronDown, Tag as TagIcon } from \"lucide-react\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport { Command, CommandGroup, CommandItem, CommandList } from \"@/components/ui/command\";\nimport type { TagDto } from \"@/lib/api\";\nimport { tagColorValue } from \"@/lib/tagColors\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Props {\n /** Every tag the user has defined. */\n tags: TagDto[];\n /** Ids of the tags currently filtering the table. Empty = no filter. */\n selectedIds: string[];\n onChange: (ids: string[]) => void;\n disabled?: boolean;\n}\n\n/**\n * Multi-select tag filter: same trigger shape as the other filter Selects in\n * this bar (Category, Type), but opens a checklist instead of a single pick,\n * so \"Business\" and \"Travel\" can narrow the table together instead of one\n * replacing the other. Selecting a row toggles it without closing the\n * popover - TagPicker's own contract, since picking several tags in one go\n * is the whole point of a filter like this.\n */\nexport function TagFilterPicker({ tags, selectedIds, onChange, disabled }: Props) {\n const [open, setOpen] = useState(false);\n\n const toggle = (id: string) => {\n onChange(selectedIds.includes(id) ? selectedIds.filter((x) => x !== id) : [...selectedIds, id]);\n };\n\n const label =\n selectedIds.length === 0\n ? \"All Tags\"\n : selectedIds.length === 1\n ? tags.find((t) => t.id === selectedIds[0])?.name ?? \"1 tag\"\n : `${selectedIds.length} tags`;\n\n return (\n \n \n \n \n \n {label}\n \n \n \n \n \n \n \n \n onChange([])} className=\"gap-2\">\n All Tags\n {selectedIds.length === 0 && }\n \n {tags.map((t) => (\n toggle(t.id)} className=\"gap-2\">\n \n {t.name}\n {selectedIds.includes(t.id) && }\n \n ))}\n {tags.length === 0 &&
No tags yet
}\n \n \n \n \n \n );\n}\n" }, { "name": "src/components/elements/TagPicker.tsx", "type": "text/plain", "content": "import { useState } from \"react\";\nimport { Check, ChevronDown, Plus, Tag as TagIcon, X } from \"lucide-react\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from \"@/components/ui/command\";\nimport type { TagDto } from \"@/lib/api\";\nimport { tagColorValue } from \"@/lib/tagColors\";\nimport { cn } from \"@/lib/utils\";\n\nfunction TagDot({ tag }: { tag: TagDto }) {\n return ;\n}\n\ninterface Props {\n /** Every tag the user has defined. */\n tags: TagDto[];\n /** Ids of the tags currently on this transaction. */\n selectedIds: string[];\n onChange: (ids: string[]) => void;\n /** Creates a new tag (with the default colour) and returns its id, so it\n * can be selected immediately without a second round trip. */\n onCreate?: (name: string) => Promise;\n disabled?: boolean;\n}\n\n/**\n * Multi-select tag picker: selected tags show as small removable pills, the\n * popover list toggles membership instead of replacing a single value like\n * CategoryPicker does. Typing a name with no match offers to create it.\n */\nexport function TagPicker({ tags, selectedIds, onChange, onCreate, disabled }: Props) {\n const [open, setOpen] = useState(false);\n const [query, setQuery] = useState(\"\");\n const [creating, setCreating] = useState(false);\n\n const selected = tags.filter((t) => selectedIds.includes(t.id));\n const q = query.trim().toLowerCase();\n const shown = q ? tags.filter((t) => t.name.toLowerCase().includes(q)) : tags;\n const exactMatch = tags.some((t) => t.name.toLowerCase() === q);\n\n const toggle = (id: string) => {\n onChange(selectedIds.includes(id) ? selectedIds.filter((x) => x !== id) : [...selectedIds, id]);\n };\n\n const createAndSelect = async () => {\n if (!onCreate || !query.trim() || creating) return;\n setCreating(true);\n try {\n const id = await onCreate(query.trim());\n onChange([...selectedIds, id]);\n setQuery(\"\");\n } finally {\n setCreating(false);\n }\n };\n\n return (\n
\n {selected.length > 0 && (\n
\n {selected.map((t) => (\n \n \n {t.name}\n toggle(t.id)}\n className=\"rounded-full p-0.5 hover:bg-muted-foreground/20 transition-colors\"\n >\n \n \n \n ))}\n
\n )}\n { setOpen(o); if (!o) setQuery(\"\"); }} modal>\n \n \n \n {selected.length > 0 ? \"Add tag\" : \"Add tags\"}\n \n \n \n \n \n \n \n {shown.length === 0 && (\n \n {onCreate && query.trim() ? (\n void createAndSelect()}\n disabled={creating}\n className={cn(\"flex w-full items-center gap-2 px-2 py-1.5 text-sm text-left rounded-sm hover:bg-accent\", creating && \"opacity-50\")}\n >\n \n Create \"{query.trim()}\"\n \n ) : (\n \"No tags found.\"\n )}\n \n )}\n \n {shown.map((t) => (\n toggle(t.id)} className=\"gap-2\">\n \n {t.name}\n {selectedIds.includes(t.id) && }\n \n ))}\n {onCreate && query.trim() && !exactMatch && shown.length > 0 && (\n void createAndSelect()} className=\"gap-2 text-primary\">\n \n Create \"{query.trim()}\"\n \n )}\n \n \n \n \n \n
\n );\n}\n" }, { "name": "src/components/elements/categoryIcons.ts", "type": "text/plain", "content": "import {\n ArrowLeftRight,\n Banknote,\n Car,\n CircleHelp,\n Clapperboard,\n Gift,\n GraduationCap,\n HeartPulse,\n Home,\n PawPrint,\n Plane,\n Receipt,\n Repeat,\n Shield,\n ShoppingBag,\n ShoppingCart,\n Sparkles,\n TrendingUp,\n Utensils,\n Zap,\n type LucideIcon,\n} from \"lucide-react\";\nimport type { Category } from \"@/lib/categories\";\n\n/** One icon per canonical category, shared by avatars, badges and pickers. */\nexport const CATEGORY_ICON: Record = {\n \"Food & Dining\": Utensils,\n Groceries: ShoppingCart,\n Transportation: Car,\n Shopping: ShoppingBag,\n Entertainment: Clapperboard,\n Subscriptions: Repeat,\n \"Bills & Utilities\": Zap,\n Housing: Home,\n Health: HeartPulse,\n Insurance: Shield,\n Travel: Plane,\n Education: GraduationCap,\n \"Personal Care\": Sparkles,\n \"Gifts & Donations\": Gift,\n Pets: PawPrint,\n \"Fees & Charges\": Receipt,\n Transfers: ArrowLeftRight,\n Investments: TrendingUp,\n Income: Banknote,\n Uncategorized: CircleHelp,\n};\n" }, { "name": "src/components/enhancements/CategoryTools.tsx", "type": "text/plain", "content": "import { useState } from \"react\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport { registerCustomCategories } from \"@/lib/categories\";\nimport { api } from \"@/lib/api\";\nimport { Input } from \"@/components/ui/input\";\nimport { Button } from \"@/components/ui/button\";\nimport { ToolCard, QueryError, useToolAction } from \"./shared\";\n\nexport type CustomCategory = { id: string; name: string; archived: boolean };\nexport function CategoryTools() {\n const [name, setName] = useState(\"\");\n const query = useQuery({ queryKey: [\"enhanced\", \"categories\"], queryFn: async () => { const rows = await api.enhanced.get(\"categories\"); registerCustomCategories(rows.map(r => r.name)); return rows; } });\n const action = useToolAction();\n return \n \n
{ e.preventDefault(); action.mutate(async () => { await api.enhanced.post(\"categories\", { name: name.trim() }); setName(\"\"); }); }}>\n setName(e.target.value)} placeholder=\"e.g. Community garden\" required />\n \n
\n {query.data?.map(c =>
{c.name}{c.archived ? \" (archived)\" : \"\"}\n
)}\n

Archiving keeps historical transactions intact and removes the category from new-entry pickers.

\n ;\n}\nexport function RulePreview({ id, onRun, busy }: { id: string; onRun: () => void; busy: boolean }) {\n const [open, setOpen] = useState(false);\n const preview = useQuery({ queryKey: [\"enhanced\", \"rule-preview\", id], queryFn: () => api.enhanced.get<{ matched: number; changes: { id: string; description: string; before: string; after: string }[] }>(`rules/${id}/preview`), enabled: open, staleTime: 0 });\n return
\n \n {open &&
\n {preview.isPending ?

Loading preview…

: preview.data && <>

{preview.data.matched} transactions match. Preview shows up to 100; running applies to all matches.

\n {preview.data.changes.map(c =>

{c.description}: {c.before} → {c.after}

)}\n }\n
}\n
;\n}\n" }, { "name": "src/components/enhancements/CurrencyTools.tsx", "type": "text/plain", "content": "import { useState } from \"react\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport { api } from \"@/lib/api\";\nimport { useFinanceData } from \"@/context/FinanceDataContext\";\nimport { useMoney } from \"@/hooks/useMoney\";\nimport { formatMoney, toDateString } from \"@/lib/format\";\nimport { Input } from \"@/components/ui/input\";\nimport { Button } from \"@/components/ui/button\";\nimport { ToolCard, QueryError, useToolAction } from \"./shared\";\n\nexport const CURRENCIES = [\"USD\", \"INR\", \"EUR\", \"GBP\", \"CAD\", \"AUD\", \"JPY\", \"CHF\", \"SGD\", \"NZD\", \"AED\", \"HKD\", \"CNY\", \"KRW\", \"MXN\", \"BRL\", \"SEK\", \"NOK\", \"DKK\", \"ZAR\"];\nexport const selectClass = \"h-10 rounded-md border border-input bg-background px-3 text-sm\";\nexport function useAccountCurrencies() {\n return useQuery({ queryKey: [\"enhanced\", \"currencies\"], queryFn: () => api.enhanced.get>(\"currencies\") });\n}\nexport function CurrencyTools() {\n const { accounts, currency } = useFinanceData();\n const query = useAccountCurrencies();\n const action = useToolAction();\n const [selection, setSelection] = useState>({});\n return \n \n

Confirm the unit used by each account. This labels existing amounts without converting them. Confirmed currencies cannot be changed here.

\n {accounts.map(a =>
{a.nickname || a.name}\n {query.data?.[a.id] ? {query.data[a.id]} · confirmed : a.id.startsWith(\"plaid-\") ? Refresh bank sync to confirm currency : <>\n \n }\n
)}\n ;\n}\n\ntype Report = { currency: string | null; accountId: string | null; income: number; expenses: number; net: number; categories: Record };\nexport function CurrencyReport() {\n useMoney(); // Subscribe to the shared privacy preference.\n const today = new Date();\n const [start, setStart] = useState(toDateString(new Date(today.getFullYear(), today.getMonth(), 1)));\n const [end, setEnd] = useState(toDateString(today));\n const valid = !!start && !!end && start <= end;\n const report = useQuery({ queryKey: [\"enhanced\", \"currency-report\", start, end], enabled: valid,\n queryFn: () => api.enhanced.get(`reports?start=${start}&end=${end}`) });\n return \n
\n
\n {!valid &&

Choose a valid date range.

}\n

Currencies are reported separately. Splits count against their own categories; internal transfers are excluded. Unconfirmed amounts have no currency label.

\n {report.data?.map(g =>

{g.currency || `Unconfirmed account: ${g.accountId}`}

\n {!g.currency ?

Confirm account currencies in Settings → Data Sources to include these amounts in monetary totals.

: <>\n

In {formatMoney(g.income, g.currency)} · Out {formatMoney(g.expenses, g.currency)} · Net {formatMoney(g.net, g.currency)}

\n {Object.entries(g.categories).map(([c, amount]) =>

{c}{formatMoney(amount, g.currency)}

)}\n }\n
)}\n {!report.isPending && !report.error && report.data?.length === 0 &&

No dated transactions in this period.

}\n ;\n}\n\ntype Result = { currency: string; expected: number; difference: number; transactionCount: number; hasUndatedTransactions: boolean;\n transactions: { id: string; date: string; description: string; amount: number }[] };\ntype Saved = { id: string; startDate: string; endDate: string; currency: string; difference: number; stale: boolean };\nexport function ReconciliationTool({ accountId }: { accountId: string }) {\n const { hidden } = useMoney();\n const currency = useAccountCurrencies();\n const [startDate, setStart] = useState(\"\");\n const [endDate, setEnd] = useState(\"\");\n const [opening, setOpening] = useState(\"\");\n const [closing, setClosing] = useState(\"\");\n const [preview, setPreview] = useState(null);\n const saved = useQuery({ queryKey: [\"enhanced\", \"reconciliations\", accountId], enabled: !!currency.data?.[accountId], queryFn: () => api.enhanced.get(`accounts/${encodeURIComponent(accountId)}/reconciliations`) });\n const action = useToolAction();\n const payload = { startDate, endDate, opening: Number(opening), closing: Number(closing) };\n const valid = startDate && endDate && startDate <= endDate && opening !== \"\" && closing !== \"\" && Number.isFinite(Number(opening)) && Number.isFinite(Number(closing));\n const edit = (fn: () => void) => { fn(); setPreview(null); };\n return \n {!currency.data?.[accountId] ?

Confirm this account's currency in Settings → Data Sources first.

: <>\n

Compare the statement's opening and closing balances with the ledger. Both dates are inclusive. For credit cards and loans, enter positive balances owed. Saving a comparison does not change your account balance.

\n
\n \n \n \n \n
\n \n {preview &&

Expected {formatMoney(preview.expected, preview.currency)} · Difference {formatMoney(preview.difference, preview.currency)} · {preview.transactionCount} transactions

\n {preview.hasUndatedTransactions &&

Undated transactions exist and are excluded. Review their dates before relying on this comparison.

}\n
Review included transactions{preview.transactions.map(t =>

{t.date} · {t.description} · {formatMoney(t.amount, preview.currency)}

)}
\n \n
}\n \n {saved.data?.map(s =>

{s.startDate}–{s.endDate}: difference {formatMoney(s.difference, s.currency)}{s.stale ? \" · ledger changed; compare again\" : \"\"}

)}\n }\n ;\n}\n" }, { "name": "src/components/enhancements/PlanningTools.tsx", "type": "text/plain", "content": "import { useId, useState } from \"react\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport { api } from \"@/lib/api\";\nimport { useFinanceData } from \"@/context/FinanceDataContext\";\nimport { useMoney } from \"@/hooks/useMoney\";\nimport { formatMoney, toDateString } from \"@/lib/format\";\nimport { parseLocalDate } from \"@/lib/utils\";\nimport { Input } from \"@/components/ui/input\";\nimport { Button } from \"@/components/ui/button\";\nimport { Label } from \"@/components/ui/label\";\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from \"@/components/ui/dialog\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/ui/select\";\nimport { CategoryPicker } from \"@/components/elements/CategoryPicker\";\nimport { DatePicker } from \"@/components/elements/DatePicker\";\nimport { Link } from \"react-router-dom\";\nimport { ToolCard, QueryError, useToolAction } from \"./shared\";\nimport { useAccountCurrencies } from \"./CurrencyTools\";\n\ntype Scheduled = { id: string; title: string; amount: number; currency: string; type: string; category: string; accountId: string; nextDate: string; cadence: string; active: boolean };\ntype Forecast = { basis: string; unconfirmedAccounts: string[]; groups: { currency: string; opening: number; scheduledEnd: number; scenarioEnd: number;\n events: { date: string; title: string; amount: number; balance: number; overdue: boolean }[] }[] };\n\nexport function PlanningTools({ compact = false }: { compact?: boolean }) {\n const { accounts } = useFinanceData();\n const { hidden } = useMoney();\n const id = useId();\n const [addOpen, setAddOpen] = useState(false);\n const [listOpen, setListOpen] = useState(false);\n const [forecastOpen, setForecastOpen] = useState(false);\n const currencies = useAccountCurrencies();\n const schedules = useQuery({ queryKey: [\"enhanced\", \"schedules\"], queryFn: () => api.enhanced.get(\"schedules\") });\n const [title, setTitle] = useState(\"\");\n const [amount, setAmount] = useState(\"\");\n const [accountId, setAccount] = useState(\"\");\n const [type, setType] = useState(\"expense\");\n const [category, setCategory] = useState(\"Bills & Utilities\");\n const [nextDate, setDate] = useState(toDateString(new Date()));\n const [cadence, setCadence] = useState(\"monthly\");\n const [extraSpend, setSpend] = useState(\"0\");\n const [end, setEnd] = useState(toDateString(new Date(Date.now() + 30 * 86400000)));\n const action = useToolAction();\n const today = toDateString(new Date());\n const validScenario = !!end && end >= today && extraSpend !== \"\" && Number.isFinite(Number(extraSpend)) && Number(extraSpend) >= 0;\n const forecast = useQuery({ queryKey: [\"enhanced\", \"forecast\", today, end, extraSpend], enabled: validScenario && (compact || forecastOpen),\n queryFn: () => api.enhanced.get(`forecast?start=${today}&end=${end}&extra_spend=${Number(extraSpend)}`) });\n const available = accounts.filter(a => [\"checking\", \"savings\", \"cash\", \"credit\", \"loan\"].includes(a.type) && currencies.data?.[a.id]);\n const valid = !!title.trim() && Number(amount) > 0 && Number.isFinite(Number(amount)) && available.some(account => account.id === accountId) && !!nextDate;\n const forecastResults =
\n {!validScenario &&

Choose a valid period and nonnegative scenario spending.

}\n \n {forecast.isFetching &&

Updating forecast…

}\n {forecast.data?.unconfirmedAccounts.length ?

Confirm the currency of {forecast.data.unconfirmedAccounts.length} accounts in Data Sources to include them.

: null}\n {forecast.data?.groups.map(group =>
\n

{group.currency} · Current {formatMoney(group.opening, group.currency)} · Scheduled end {formatMoney(group.scheduledEnd, group.currency)}{!compact && <> · Scenario {formatMoney(group.scenarioEnd, group.currency)}}

\n {(compact ? group.events.slice(0, 5) : group.events).map((event, i) =>

{event.date} · {event.title}{event.overdue ? \" (overdue)\" : \"\"}{formatMoney(event.amount, group.currency)}

)}\n
)}\n

{forecast.data?.basis || \"Based on current balances and scheduled items.\"}

\n
;\n\n return <>\n {!compact && <>\n \n \n

Plan expected bills and income in one place.

\n

{schedules.data?.length || 0} scheduled items

\n
\n \n Add a scheduled bill or incomePlan a future transaction. This does not make a bank payment.\n \n {!accounts.length ?

Connect your bank to choose an account for this schedule.

: !available.length ?

Choose an account currency in Settings → Data Sources to start.

: null}\n
{ event.preventDefault(); if (valid) action.mutate(async () => {\n await api.enhanced.post(\"schedules\", { title: title.trim(), amount: Number(amount), type, category, accountId, currency: currencies.data![accountId], nextDate, cadence });\n setTitle(\"\"); setAmount(\"\"); setAddOpen(false);\n }); }}>\n
\n
setTitle(event.target.value)} maxLength={120} required />
\n
setAmount(event.target.value)} required />
\n
\n
\n
setDate(value || \"\")} aria-label=\"Due date\" />
\n
\n
\n
\n
\n
\n \n Scheduled itemsSkip a payment already in your transactions. Record manually adds a ledger entry without making a bank payment.\n \n {!schedules.data?.length &&

No scheduled items yet. Add a bill or income to get started.

}\n {schedules.data?.map(schedule =>
\n

{schedule.title} · {formatMoney(schedule.amount, schedule.currency)}

{schedule.nextDate} · {schedule.cadence} · {schedule.type}{!schedule.active ? \" · paused / completed\" : schedule.nextDate < today ? \" · overdue\" : \"\"}

\n
{schedule.active && <>}\n
\n
)}\n \n }\n \n {compact ? forecastResults : <>

Explore how upcoming payments and extra spending could affect your balance.

}\n \n {!compact && Cashflow forecastCurrent balances plus scheduled items and your spending scenario. This is an estimate.\n
setEnd(value || \"\")} />
setSpend(event.target.value)} />
\n {forecastResults}\n }\n ;\n}\n" }, { "name": "src/components/enhancements/SecurityTools.tsx", "type": "text/plain", "content": "import { useQuery } from \"@tanstack/react-query\";\nimport { api } from \"@/lib/api\";\nimport { useAuth } from \"@/context/AuthContext\";\nimport { Button } from \"@/components/ui/button\";\nimport { Switch } from \"@/components/ui/switch\";\nimport { ToolCard, QueryError, useToolAction } from \"./shared\";\n\nexport function SecurityTools() {\n const sessions = useQuery({ queryKey: [\"sessions\"], queryFn: api.sessions.list });\n const privacy = useQuery({ queryKey: [\"enhanced\", \"privacy\"], queryFn: () => api.enhanced.get<{ hostedAi: boolean }>(\"privacy\") });\n const action = useToolAction();\n const { logout, user } = useAuth();\n return <>\n \n \n {sessions.isPending &&

Loading sessions…

}\n {sessions.data?.map(s =>
\n

{s.current ? \"This browser\" : s.label}

Expires {new Date(s.expiresAt).toLocaleString()}

\n \n
)}\n \n

API keys remain active until you revoke them separately.

\n \n \n \n \n

Off by default. When enabled, transaction descriptions may be sent to the configured hosted AI provider, including when the local model is unavailable. Local categorization and your rules work without this permission.

\n \n ;\n}\n" }, { "name": "src/components/enhancements/SyncTools.tsx", "type": "text/plain", "content": "import { useQuery } from \"@tanstack/react-query\";\nimport { api } from \"@/lib/api\";\nimport { useFinanceData } from \"@/context/FinanceDataContext\";\nimport { Button } from \"@/components/ui/button\";\nimport { ToolCard, QueryError, useToolAction } from \"./shared\";\n\ntype Status = { provider: string; status: string; attemptedAt: string; succeededAt: string | null; error: string | null; stale: boolean };\nexport function SyncTools() {\n const query = useQuery({ queryKey: [\"enhanced\", \"sync-status\"], queryFn: () => api.enhanced.get(\"sync-status\"), refetchInterval: 15000 });\n const { syncPlaid, plaidItems } = useFinanceData();\n const action = useToolAction();\n return \n \n {!query.isPending && !query.error && !query.data?.length &&

No sync attempts recorded yet.

}\n {query.data?.map(s =>

{s.provider}: {s.status}{s.stale ? \" · needs refresh\" : \"\"}

\n

Last attempt: {new Date(s.attemptedAt).toLocaleString()}. Last complete success: {s.succeededAt ? new Date(s.succeededAt).toLocaleString() : \"none\"}.

\n {s.error &&

{s.error}

}\n
)}\n {plaidItems.filter(item => item.sync_error).map(item =>
\n

{item.institution_name || \"Linked bank\"}: {item.requires_reconnect ? \"Sign-in required\" : \"Sync needs attention\"}

\n

{item.sync_error}

\n {item.requires_reconnect && Reconnect this bank}\n
)}\n \n

Retries update saved bank records by their provider IDs. A failed source does not remove its saved data.

\n {plaidItems.some(item => item.requires_reconnect) &&

Banks requiring sign-in must be reconnected below before they can sync again.

}\n ;\n}\n" }, { "name": "src/components/enhancements/shared.tsx", "type": "text/plain", "content": "import type { ReactNode } from \"react\";\nimport { useMutation, useQueryClient } from \"@tanstack/react-query\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { toast } from \"sonner\";\n\nexport function ToolCard({ title, children }: { title: string; children: ReactNode }) {\n return {title}{children};\n}\nexport function QueryError({ error }: { error: unknown }) {\n return error ?

Couldn't load this tool. Check your connection and try again.

: null;\n}\nexport function useToolAction() {\n const client = useQueryClient();\n return useMutation({\n mutationFn: (action: () => Promise) => action(),\n onSuccess: () => { void client.invalidateQueries(); toast.success(\"Saved\"); },\n onError: (error: Error) => toast.error(error.message || \"Couldn't save. Please retry.\"),\n });\n}\n" }, { "name": "src/components/import/ImportDialog.tsx", "type": "text/plain", "content": "import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from \"@/components/ui/dialog\";\nimport { Button } from \"@/components/ui/button\";\nimport { Label } from \"@/components/ui/label\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/ui/select\";\nimport { Upload, FileText, AlertTriangle, CheckCircle2, Loader2, ArrowLeft } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { toast } from \"sonner\";\nimport { useFinanceData } from \"@/context/FinanceDataContext\";\nimport { useMoney } from \"@/hooks/useMoney\";\nimport {\n parseCsv, detectMapping, buildTransactions,\n EMPTY_MAPPING, type ColumnMapping, type ColumnKey, type ImportRow, type ParsedFile,\n} from \"@/lib/import/parse\";\nimport { extractPdfTransactions, pdfRowsAsRecords, PDF_HEADERS } from \"@/lib/import/pdf\";\nimport { CategoryBadge } from \"@/components/elements/CategoryIcon\";\nimport { accountDisplayName, canHoldTransactions } from \"@/lib/accounts\";\n\ntype Step = \"choose\" | \"map\" | \"done\";\n\nconst REQUIRED: ColumnKey[] = [\"date\", \"description\"];\n\nconst FIELD_LABELS: Record = {\n date: \"Date\",\n description: \"Description\",\n amount: \"Amount\",\n category: \"Category (optional)\",\n debit: \"Debit / money out\",\n credit: \"Credit / money in\",\n};\n\n/**\n * Import transactions from a CSV or bank export.\n *\n * `lib/csv-parser.ts` and `lib/pdf-parser.ts` shipped in this repo, fully\n * written and referenced by nothing, while every empty state in the app invited\n * the user to \"Import Data\" and then offered only Plaid. This is the flow those\n * modules were missing.\n */\nexport function ImportDialog({\n open,\n onOpenChange,\n}: {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n}) {\n const { accounts: allAccounts, transactions, addTransactions, refreshData, dateFormat } = useFinanceData();\n const accounts = useMemo(() => allAccounts.filter((a) => canHoldTransactions(a.type)), [allAccounts]);\n const { money } = useMoney();\n\n const [step, setStep] = useState(\"choose\");\n const [fileName, setFileName] = useState(\"\");\n const [parsed, setParsed] = useState(null);\n const [mapping, setMapping] = useState(EMPTY_MAPPING);\n const [accountId, setAccountId] = useState(accounts[0]?.id ?? \"\");\n const [allPositiveAreExpenses, setAllPositiveAreExpenses] = useState(false);\n const [skipDuplicates, setSkipDuplicates] = useState(true);\n const [busy, setBusy] = useState(false);\n const [dragging, setDragging] = useState(false);\n const [pdfNote, setPdfNote] = useState(\"\");\n const [imported, setImported] = useState(0);\n const inputRef = useRef(null);\n\n // `accounts` is empty on first render while the context loads, so seeding the\n // selection from useState's initial value leaves it blank forever, and with\n // no account the preview can build nothing and the import button never\n // enables. Adopt the first account as soon as one exists.\n useEffect(() => {\n if (!accountId && accounts.length > 0) setAccountId(accounts[0].id);\n }, [accounts, accountId]);\n\n const reset = useCallback(() => {\n setStep(\"choose\");\n setFileName(\"\");\n setParsed(null);\n setMapping(EMPTY_MAPPING);\n setAllPositiveAreExpenses(false);\n setSkipDuplicates(true);\n setImported(0);\n setPdfNote(\"\");\n setAccountId(accounts[0]?.id ?? \"\");\n }, [accounts]);\n\n const handleFile = useCallback(\n async (file: File) => {\n const isPdf = /\\.pdf$/i.test(file.name);\n if (!isPdf && !/\\.(csv|tsv|txt)$/i.test(file.name)) {\n toast.error(\"Choose a .csv or .pdf statement\");\n return;\n }\n setBusy(true);\n try {\n let result: ParsedFile;\n if (isPdf) {\n // PDF statements have no schema, so this is a guess, which is exactly\n // why it lands on the same preview step for confirmation.\n const extracted = await extractPdfTransactions(file, dateFormat);\n if (extracted.rows.length === 0) {\n toast.error(\"Couldn't find any transactions in that PDF\");\n return;\n }\n result = { headers: PDF_HEADERS, rows: pdfRowsAsRecords(extracted.rows) };\n setPdfNote(\n extracted.skipped > 0\n ? `Read ${extracted.rows.length} of ${extracted.scanned} statement lines, check the preview.`\n : `Read ${extracted.rows.length} lines, check the preview before importing.`\n );\n } else {\n result = await parseCsv(file);\n setPdfNote(\"\");\n if (result.rows.length === 0) {\n toast.error(\"That file has no rows\");\n return;\n }\n }\n setParsed(result);\n setMapping(detectMapping(result.headers));\n setFileName(file.name);\n setStep(\"map\");\n } catch {\n toast.error(\"Couldn't read that file\");\n } finally {\n setBusy(false);\n }\n },\n [dateFormat]\n );\n\n const account = accounts.find((a) => a.id === accountId);\n\n /** Preview is computed live, so changing a mapping updates it immediately. */\n const rows: ImportRow[] = useMemo(() => {\n if (!parsed || !account) return [];\n return buildTransactions(parsed.rows, {\n mapping,\n dateFormat,\n accountId,\n accountName: accountDisplayName(account),\n existing: transactions,\n treatAmountsAsExpenses: allPositiveAreExpenses,\n });\n }, [parsed, mapping, dateFormat, accountId, account, transactions, allPositiveAreExpenses]);\n\n const valid = rows.filter((r) => r.transaction);\n const failed = rows.filter((r) => !r.transaction);\n const duplicates = valid.filter((r) => r.duplicate);\n const toImport = skipDuplicates ? valid.filter((r) => !r.duplicate) : valid;\n\n const hasAmountSource = !!mapping.amount || !!mapping.debit || !!mapping.credit;\n const missing = REQUIRED.filter((k) => !mapping[k]);\n const canImport = missing.length === 0 && hasAmountSource && !!accountId && toImport.length > 0;\n\n const doImport = async () => {\n setBusy(true);\n try {\n await addTransactions(toImport.map((r) => r.transaction!));\n setImported(toImport.length);\n setStep(\"done\");\n refreshData();\n } catch {\n toast.error(\"Import failed\");\n } finally {\n setBusy(false);\n }\n };\n\n const close = (o: boolean) => {\n if (!o) reset();\n onOpenChange(o);\n };\n\n return (\n \n \n \n \n {step === \"choose\" && \"Import transactions\"}\n {step === \"map\" && \"Check the columns\"}\n {step === \"done\" && \"Import complete\"}\n \n \n\n {step === \"choose\" && (\n
\n {accounts.length === 0 ? (\n

\n Add or connect an account first, imported transactions need somewhere to live.\n

\n ) : (\n <>\n inputRef.current?.click()}\n onKeyDown={(e) => (e.key === \"Enter\" || e.key === \" \") && inputRef.current?.click()}\n onDragOver={(e) => { e.preventDefault(); setDragging(true); }}\n onDragLeave={() => setDragging(false)}\n onDrop={(e) => {\n e.preventDefault();\n setDragging(false);\n const f = e.dataTransfer.files?.[0];\n if (f) void handleFile(f);\n }}\n className={cn(\n \"border-2 border-dashed rounded-xl p-10 text-center transition-colors cursor-pointer\",\n dragging ? \"border-primary bg-primary/5\" : \"border-border hover:border-primary/50\"\n )}\n >\n {busy ? (\n \n ) : (\n \n )}\n

\n Drop a CSV or PDF statement here, or click to choose\n

\n

\n CSV is most reliable; PDF statements are read best-effort and shown for review\n

\n
\n {\n const f = e.target.files?.[0];\n if (f) void handleFile(f);\n e.target.value = \"\";\n }}\n />\n \n )}\n
\n )}\n\n {step === \"map\" && parsed && (\n
\n
\n \n {fileName}\n · {parsed.rows.length} rows\n
\n\n {pdfNote && (\n

\n \n {pdfNote}\n

\n )}\n\n
\n \n \n
\n\n
\n \n
\n {(Object.keys(FIELD_LABELS) as ColumnKey[]).map((key) => (\n
\n

\n {FIELD_LABELS[key]}\n {REQUIRED.includes(key) && *}\n

\n setMapping((m) => ({ ...m, [key]: v === \"__none__\" ? \"\" : v }))}\n >\n \n \n Not mapped\n {parsed.headers.map((h) => {h})}\n \n \n
\n ))}\n
\n {!hasAmountSource && (\n

\n Map an Amount column, or a Debit/Credit pair.\n

\n )}\n

\n Ambiguous dates like 01/02/2026 are read as {dateFormat}, change that in\n Settings → Preferences.\n

\n
\n\n
\n \n \n
\n\n {/* Preview, what will actually be created. */}\n
\n
\n \n
\n \n {toImport.length} to import\n \n {duplicates.length > 0 && (\n \n {duplicates.length} duplicate{duplicates.length === 1 ? \"\" : \"s\"}\n \n )}\n {failed.length > 0 && (\n \n {failed.length} unreadable\n \n )}\n
\n
\n\n
\n {toImport.slice(0, 40).map((r) => (\n \n {r.transaction!.date}\n \n {r.transaction!.description}\n \n \n \n \n {money(r.transaction!.amount)}\n \n \n
\n ))}\n {toImport.length === 0 && (\n

\n Nothing to import with these settings.\n

\n )}\n
\n\n {/* Failures are listed rather than silently dropped, so a\n mis-mapped column is obvious instead of looking like data loss. */}\n {failed.length > 0 && (\n
\n \n \n {failed.length} row{failed.length === 1 ? \"\" : \"s\"} couldn't be read\n \n
\n {failed.slice(0, 20).map((r) => (\n

\n Row {r.index + 2}: {r.error}\n

\n ))}\n
\n
\n )}\n
\n \n )}\n\n {step === \"done\" && (\n
\n \n

\n Imported {imported} transaction{imported === 1 ? \"\" : \"s\"}\n

\n

\n They're in your transaction list and counted towards your budgets.\n

\n
\n )}\n\n \n {step === \"map\" ? (\n \n ) : }\n
\n \n {step === \"map\" && (\n \n )}\n {step === \"done\" && }\n
\n \n \n \n );\n}\n" }, { "name": "src/components/investments/AccountMenu.tsx", "type": "text/plain", "content": "import { useState } from \"react\";\nimport { MoreVertical, Pencil, Tag as TagIcon, Trash2, Unlink } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport {\n Dialog,\n DialogContent,\n DialogHeader,\n DialogTitle,\n} from \"@/components/ui/dialog\";\nimport {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogTitle,\n} from \"@/components/ui/alert-dialog\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { TagPicker } from \"@/components/elements/TagPicker\";\nimport { useTags, useTagMutations, useInvestmentAccountTags } from \"@/hooks/useTags\";\nimport { api } from \"@/lib/api\";\nimport { toast } from \"sonner\";\n\ninterface Props {\n accountId: string;\n accountLabel: string;\n isManual: boolean;\n onRenamed: () => void;\n onDeleted: () => void;\n}\n\n/**\n * Rename, tag, and delete/disconnect for an investment account, manual or\n * connected alike - renaming and tagging already work identically for both\n * server-side (PATCH /investment-accounts/{id} has no provider check), only\n * \"Delete\" vs \"Disconnect\" reads differently since a connected account has a\n * live sync to sever rather than data to simply remove.\n */\nexport function AccountMenu({ accountId, accountLabel, isManual, onRenamed, onDeleted }: Props) {\n const [renameOpen, setRenameOpen] = useState(false);\n const [tagsOpen, setTagsOpen] = useState(false);\n const [deleteOpen, setDeleteOpen] = useState(false);\n const [newLabel, setNewLabel] = useState(accountLabel);\n const [saving, setSaving] = useState(false);\n\n const { data: allTags } = useTags();\n const { create } = useTagMutations();\n const { data: accountTags, setTags } = useInvestmentAccountTags(tagsOpen ? accountId : undefined);\n\n const handleRename = async (e: React.FormEvent) => {\n e.preventDefault();\n const trimmed = newLabel.trim();\n if (!trimmed || trimmed === accountLabel) {\n setRenameOpen(false);\n return;\n }\n setSaving(true);\n try {\n await api.investments.rename(accountId, trimmed);\n onRenamed();\n setRenameOpen(false);\n toast.success(\"Account renamed\");\n } catch {\n toast.error(\"Failed to rename account\");\n } finally {\n setSaving(false);\n }\n };\n\n const handleDelete = async () => {\n try {\n await api.investments.disconnect(accountId);\n onDeleted();\n toast.success(isManual ? \"Portfolio deleted\" : \"Account disconnected\");\n } catch {\n toast.error(isManual ? \"Failed to delete portfolio\" : \"Failed to disconnect account\");\n }\n };\n\n return (\n <>\n \n \n {/* Stop propagation so clicking the menu on a card/link doesn't navigate */}\n e.preventDefault()}\n >\n \n Account actions\n \n \n {/* React portals bubble events through the REACT tree, not the DOM\n tree: even though this content renders into document.body (a\n Radix Portal), a click on one of its items still bubbles, as a\n React synthetic event, up through this component to the parent\n row's , navigating it before the dialog we opened ever\n shows. Stopping it here, once, covers every item below. */}\n e.stopPropagation()}>\n {\n setNewLabel(accountLabel);\n setRenameOpen(true);\n }}\n >\n \n Rename\n \n setTagsOpen(true)}>\n \n Tags\n \n \n setDeleteOpen(true)}\n className=\"text-destructive focus:text-destructive\"\n >\n {isManual ? : }\n {isManual ? \"Delete\" : \"Disconnect\"}\n \n \n \n\n {/* Rename dialog */}\n \n e.stopPropagation()}>\n \n Rename account\n \n
\n
\n \n setNewLabel(e.target.value)}\n autoFocus\n required\n />\n
\n
\n \n \n
\n
\n \n \n\n {/* Tags dialog */}\n \n e.stopPropagation()}>\n \n Tag \"{accountLabel}\"\n \n
\n t.id)}\n onChange={(ids) => setTags.mutate(ids)}\n onCreate={async (name) => {\n const created = await create.mutateAsync({ name });\n return created.id;\n }}\n />\n
\n \n \n\n {/* Delete/disconnect confirmation */}\n \n e.stopPropagation()}>\n \n {isManual ? \"Delete\" : \"Disconnect\"} {accountLabel}?\n \n {isManual\n ? \"This removes the portfolio and all its holdings. This action cannot be undone.\"\n : \"This severs the connection to this account. Holdings already synced stay in your history.\"}\n \n \n \n Cancel\n \n {isManual ? \"Delete\" : \"Disconnect\"}\n \n \n \n \n \n );\n}\n" }, { "name": "src/components/investments/AddInvestmentAccountButton.tsx", "type": "text/plain", "content": "import { useState } from \"react\";\nimport { useNavigate } from \"react-router-dom\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n} from \"@/components/ui/dropdown-menu\";\nimport { useFinanceData } from \"@/context/FinanceDataContext\";\nimport { useAuth } from \"@/context/AuthContext\";\nimport { api } from \"@/lib/api\";\nimport { Plus, Loader2, Building2, PencilLine } from \"lucide-react\";\nimport { toast } from \"sonner\";\n\ninterface Props {\n size?: \"sm\" | \"default\";\n label?: string;\n className?: string;\n}\n\n/**\n * Provider picker for adding an investment source: Kite (OAuth) and a Manual portfolio (created on the spot, then navigated to).\n * Shared by the Brokerages settings page and the Investments overview.\n */\nexport function AddInvestmentAccountButton({ size = \"default\", label = \"Add account\", className }: Props) {\n const { investmentAccounts, refreshData } = useFinanceData();\n const { user } = useAuth();\n const navigate = useNavigate();\n const [busy, setBusy] = useState(false);\n\n const connectKite = async () => {\n setBusy(true);\n try {\n const { login_url } = await api.investments.connectUrl(\"kite\");\n const w = 520, h = 740;\n const left = Math.max(0, Math.floor((window.screen.width - w) / 2));\n const top = Math.max(0, Math.floor((window.screen.height - h) / 4));\n const popup = window.open(login_url, \"investment_oauth\", `popup=yes,width=${w},height=${h},left=${left},top=${top}`);\n if (!popup) window.location.href = login_url;\n } catch (err) {\n toast.error(\"Failed to get login URL: \" + ((err as Error)?.message || \"Unknown error\"));\n } finally {\n setBusy(false);\n }\n };\n\n const addManual = async () => {\n setBusy(true);\n try {\n // Default the portfolio currency to an existing account's (e.g. an INR Kite\n // account) so manual holdings line up; backend falls back to USD.\n const currency = investmentAccounts[0]?.currency ?? \"USD\";\n const acct = await api.investments.createManual(\"Manual Portfolio\", currency);\n refreshData();\n toast.success(\"Manual portfolio ready, add your holdings\");\n navigate(`/investments/${acct.id}`);\n } catch (err) {\n toast.error(\"Failed to create manual portfolio: \" + ((err as Error)?.message || \"Unknown error\"));\n } finally {\n setBusy(false);\n }\n };\n\n return (\n \n \n \n \n \n Add investment source\n \n {user?.kiteEnabled && (\n \n Kite (Zerodha)\n \n )}\n \n Manual portfolio\n \n \n \n );\n}\n" }, { "name": "src/components/investments/AddInvestmentDialog.tsx", "type": "text/plain", "content": "import { useState } from \"react\";\nimport { format } from \"date-fns\";\nimport { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from \"@/components/ui/dialog\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/ui/select\";\nimport { Button } from \"@/components/ui/button\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport { Calendar as CalendarUI } from \"@/components/ui/calendar\";\nimport { Plus, Calendar as CalendarIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport type { Holding, HistoricalValue } from \"@/types/finance\";\nimport { ASSET_CATEGORIES } from \"@/lib/holdings\";\n\nexport function AddInvestmentDialog({ onAdd, defaultCurrency }: { onAdd: (h: Holding) => void; defaultCurrency: string }) {\n const [open, setOpen] = useState(false);\n const [name, setName] = useState(\"\");\n const [category, setCategory] = useState(\"Private Equity\");\n const [currency, setCurrency] = useState(defaultCurrency);\n const [details, setDetails] = useState(\"\");\n const [amount, setAmount] = useState(\"\");\n const [currentValue, setCurrentValue] = useState(\"\");\n const [ticker, setTicker] = useState(\"\");\n const [quantity, setQuantity] = useState(\"1\");\n const [dateObj, setDateObj] = useState(new Date());\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (!name || !amount || !dateObj) return;\n\n const dateStr = format(dateObj, \"yyyy-MM-dd\");\n const costBasis = parseFloat(amount) || 0;\n const price = currentValue ? parseFloat(currentValue) : costBasis;\n const shares = parseFloat(quantity) > 0 ? parseFloat(quantity) : 1;\n\n const history: HistoricalValue[] = [{ date: dateStr, value: costBasis }];\n const today = format(new Date(), \"yyyy-MM-dd\");\n if (price !== costBasis && dateStr !== today) {\n history.push({ date: today, value: price });\n }\n\n const derived = name.length > 4 ? name.substring(0, 4).toUpperCase() : name.toUpperCase();\n onAdd({\n id: `manual_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,\n name,\n // A linked public ticker enables live tracking; else a name-derived placeholder.\n symbol: ticker.trim() ? ticker.trim().toUpperCase() : derived,\n shares,\n price,\n costBasis,\n change: price - costBasis,\n changePercent: costBasis > 0 ? ((price - costBasis) / costBasis) * 100 : 0,\n currency,\n isManual: true,\n category,\n details,\n dateInvested: dateStr,\n history,\n });\n setOpen(false);\n setName(\"\"); setDetails(\"\"); setAmount(\"\"); setCurrentValue(\"\"); setTicker(\"\"); setQuantity(\"1\");\n setDateObj(new Date());\n };\n\n return (\n \n \n \n \n \n \n Add Manual Investment\n \n
\n
\n
\n \n setName(e.target.value)} required />\n
\n
\n \n \n
\n
\n \n \n \n \n \n \n d && setDateObj(d)} initialFocus />\n \n \n
\n
\n \n \n
\n
\n \n setAmount(e.target.value)} required />\n
\n
\n \n setQuantity(e.target.value)} />\n
\n
\n \n setCurrentValue(e.target.value)} />\n
\n
\n \n setTicker(e.target.value)} />\n

\n For a public ticker, enter avg cost in its trading currency (e.g. USD for SPCX). The live price will display in that native currency.\n

\n
\n
\n \n setDetails(e.target.value)} />\n
\n
\n \n
\n \n \n );\n}\n" }, { "name": "src/components/investments/AllocationPanel.tsx", "type": "text/plain", "content": "import { useMemo, useState } from \"react\";\nimport { Card, CardContent, CardHeader, CardTitle, CardDescription } from \"@/components/ui/card\";\nimport { DonutChart } from \"@/components/charts/DonutChart\";\nimport { BubbleChart } from \"@/components/charts/BubbleChart\";\nimport { ChartTypeToggle } from \"@/components/charts/ChartTypeToggle\";\nimport { SegmentedControl } from \"@/components/charts/SegmentedControl\";\nimport { shareColor } from \"@/components/dashboard/shareColors\";\nimport { allocationBreakdown, type AllocationMode } from \"@/lib/holdings\";\nimport { usePrivacy } from \"@/lib/privacy\";\nimport { formatMoney } from \"@/lib/format\";\nimport type { Holding } from \"@/types/finance\";\nimport { PieChart, Circle } from \"lucide-react\";\n\n// \"currency\" is deliberately not offered here: this panel receives holdings\n// already scoped to one currency (the caller filters, same as the headline\n// stats), so a currency breakdown of them would always be a single 100% slice.\nconst MODES: { value: AllocationMode; label: string }[] = [\n { value: \"asset\", label: \"Asset\" },\n { value: \"account\", label: \"Account\" },\n];\nconst CHART_TYPES = [\n { value: \"donut\", icon: PieChart, label: \"Donut\" },\n { value: \"bubbles\", icon: Circle, label: \"Bubbles\" },\n] as const;\n\nfunction fmt(v: number, c: string) {\n return formatMoney(v, c, { decimals: 0 });\n}\n\nexport function AllocationPanel({\n holdings, investmentAccounts, currency,\n}: {\n holdings: Holding[];\n investmentAccounts: { id: string; label: string }[];\n currency: string;\n}) {\n usePrivacy();\n const [mode, setMode] = useState(\"asset\");\n const [chartType, setChartType] = useState<\"donut\" | \"bubbles\">(\"donut\");\n\n const rows = useMemo(() => allocationBreakdown(holdings, mode, investmentAccounts), [holdings, mode, investmentAccounts]);\n const total = rows.reduce((s, r) => s + r.value, 0);\n const slices = rows.map((r, i) => ({ name: r.label, value: r.value, color: shareColor(i) }));\n\n return (\n \n \n
\n
\n Allocation\n
\n \n
\n \n \n \n {rows.length === 0 ? (\n

No holdings to allocate yet.

\n ) : (\n
\n {chartType === \"donut\" ? (\n fmt(v, currency)}\n centerLabel={`${rows.length} ${rows.length === 1 ? \"group\" : \"groups\"}`}\n centerValue={fmt(total, currency)}\n />\n ) : (\n fmt(v, currency)} />\n )}\n
\n {rows.map((r, i) => {\n const pct = total > 0 ? (r.value / total) * 100 : 0;\n return (\n
\n \n \n {r.label}\n \n {pct.toFixed(1)}%\n
\n );\n })}\n
\n
\n )}\n \n \n );\n}\n" }, { "name": "src/components/investments/ConnectedAccountsList.tsx", "type": "text/plain", "content": "import { useMemo, useState } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { SegmentedControl } from \"@/components/charts/SegmentedControl\";\nimport { shareColor } from \"@/components/dashboard/shareColors\";\nimport { useAllInvestmentAccountTags } from \"@/hooks/useTags\";\nimport { tagColorValue } from \"@/lib/tagColors\";\nimport { usePrivacy } from \"@/lib/privacy\";\nimport { formatMoney } from \"@/lib/format\";\nimport { cn } from \"@/lib/utils\";\nimport type { TagDto } from \"@/lib/api\";\n\nexport interface ConnectedAccountRow {\n id: string;\n label: string;\n to: string;\n value: number;\n pct: number;\n currency: string;\n /** The account's own currency, when its value is shown converted into another. */\n nativeCurrency?: string;\n connected: boolean;\n isManual: boolean;\n actions?: React.ReactNode;\n}\n\ntype SortMode = \"value\" | \"name\";\nconst SORT_OPTIONS: { value: SortMode; label: string }[] = [\n { value: \"value\", label: \"Value\" },\n { value: \"name\", label: \"Name\" },\n];\n\nfunction fmt(v: number, c: string) {\n return formatMoney(v, c, { decimals: 0 });\n}\n\nfunction initials(label: string): string {\n const words = label.trim().split(/\\s+/).filter(Boolean);\n if (words.length === 0) return \"?\";\n if (words.length === 1) return words[0].slice(0, 2).toUpperCase();\n return (words[0][0] + words[1][0]).toUpperCase();\n}\n\n/**\n * Ranked, information-dense list of every connected/manual source, replacing\n * a grid of big cards: at a glance, which source is biggest and what share\n * of the total it is, the two things a card forces you to compare by eye.\n *\n * Sort (Value/Name) and an optional tag filter give two independent ways to\n * organize the list once it's got more than a handful of accounts in it.\n */\nexport function ConnectedAccountsList({ accounts, total, currency }: { accounts: ConnectedAccountRow[]; total: number; currency: string }) {\n usePrivacy();\n const [sortMode, setSortMode] = useState(\"value\");\n const [activeTagId, setActiveTagId] = useState(null);\n\n const accountIds = useMemo(() => accounts.map((a) => a.id), [accounts]);\n const tagsById = useAllInvestmentAccountTags(accountIds);\n\n const allTags = useMemo(() => {\n const seen = new Map();\n Object.values(tagsById).forEach((tags) => tags.forEach((t) => seen.set(t.id, t)));\n return [...seen.values()].sort((a, b) => a.name.localeCompare(b.name));\n }, [tagsById]);\n\n const filtered = activeTagId\n ? accounts.filter((a) => (tagsById[a.id] ?? []).some((t) => t.id === activeTagId))\n : accounts;\n\n const sorted = useMemo(() => {\n const rows = [...filtered];\n if (sortMode === \"name\") rows.sort((a, b) => a.label.localeCompare(b.label));\n else rows.sort((a, b) => b.value - a.value);\n return rows;\n }, [filtered, sortMode]);\n\n return (\n \n \n
\n Connected accounts\n {accounts.length}\n
\n {accounts.length > 1 && (\n
\n \n
\n )}\n {allTags.length > 0 && (\n
\n {allTags.map((t) => {\n const active = activeTagId === t.id;\n return (\n setActiveTagId(active ? null : t.id)}\n className={cn(\n \"inline-flex items-center gap-1 text-[11px] pl-1.5 pr-2 py-0.5 rounded-full border transition-colors\",\n active ? \"border-foreground bg-muted\" : \"border-border bg-muted/40 hover:bg-muted/70\"\n )}\n >\n \n {t.name}\n \n );\n })}\n
\n )}\n \n \n {sorted.length === 0 ? (\n

\n {activeTagId ? \"No accounts with that tag.\" : \"No accounts yet.\"}\n

\n ) : (\n sorted.map((a, i) => {\n const tags = tagsById[a.id] ?? [];\n return (\n \n \n {initials(a.label)}\n \n
\n

{a.label}

\n
\n \n \n {a.isManual ? \"Manual\" : a.connected ? \"Connected\" : \"Disconnected\"} · {a.nativeCurrency ?? a.currency}\n \n {tags.map((t) => (\n \n \n {t.name}\n \n ))}\n
\n
\n
\n

{fmt(a.value, a.currency)}

\n

\n {total > 0 ? `${a.pct.toFixed(1)}%` : \"—\"}\n

\n
\n {a.actions &&
{a.actions}
}\n \n );\n })\n )}\n \n \n );\n}\n" }, { "name": "src/components/investments/EditHoldingDialog.tsx", "type": "text/plain", "content": "import { useState, useEffect } from \"react\";\nimport { format, parseISO } from \"date-fns\";\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from \"@/components/ui/dialog\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/ui/select\";\nimport { Button } from \"@/components/ui/button\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport { Calendar as CalendarUI } from \"@/components/ui/calendar\";\nimport { Calendar as CalendarIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport type { Holding } from \"@/types/finance\";\nimport { mergeHistory, historyPointsFor, ASSET_CATEGORIES } from \"@/lib/holdings\";\n\ninterface Props {\n holding: Holding;\n open: boolean;\n onOpenChange: (open: boolean) => void;\n onSave: (updated: Holding) => void;\n}\n\nexport function EditHoldingDialog({ holding, open, onOpenChange, onSave }: Props) {\n const [name, setName] = useState(holding.name);\n const [category, setCategory] = useState(holding.category ?? \"Other\");\n const [currency, setCurrency] = useState(holding.currency ?? \"USD\");\n const [details, setDetails] = useState(holding.details ?? \"\");\n const [amount, setAmount] = useState(String(holding.costBasis));\n const [currentValue, setCurrentValue] = useState(String(holding.price));\n const [ticker, setTicker] = useState(holding.symbol ?? \"\");\n const [quantity, setQuantity] = useState(String(holding.shares ?? 1));\n const [dateObj, setDateObj] = useState(() => {\n if (holding.dateInvested) {\n try { return parseISO(holding.dateInvested); } catch { /* fall through */ }\n }\n return new Date();\n });\n\n // Sync fields whenever the holding prop changes (e.g. opening for a different row)\n useEffect(() => {\n setName(holding.name);\n setCategory(holding.category ?? \"Other\");\n setCurrency(holding.currency ?? \"USD\");\n setDetails(holding.details ?? \"\");\n setAmount(String(holding.costBasis));\n setCurrentValue(String(holding.price));\n setTicker(holding.symbol ?? \"\");\n setQuantity(String(holding.shares ?? 1));\n if (holding.dateInvested) {\n try { setDateObj(parseISO(holding.dateInvested)); } catch { setDateObj(new Date()); }\n } else {\n setDateObj(new Date());\n }\n }, [holding]);\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (!name || !amount) return;\n\n const dateStr = format(dateObj, \"yyyy-MM-dd\");\n const costBasis = parseFloat(amount) || 0;\n const price = currentValue ? parseFloat(currentValue) : costBasis;\n const shares = parseFloat(quantity) > 0 ? parseFloat(quantity) : 1;\n\n // Merge, never replace: this dialog used to rebuild `history` from scratch,\n // so editing a holding erased every price point it had accumulated.\n const history = mergeHistory(\n holding.history,\n historyPointsFor(dateStr, costBasis, price, shares)\n );\n\n const derived = name.length > 4 ? name.substring(0, 4).toUpperCase() : name.toUpperCase();\n onSave({\n ...holding,\n name,\n // A linked public ticker wins (enables live tracking); else fall back to a\n // name-derived placeholder for still-private holdings.\n symbol: ticker.trim() ? ticker.trim().toUpperCase() : derived,\n shares,\n price,\n costBasis,\n change: price - costBasis,\n changePercent: costBasis > 0 ? ((price - costBasis) / costBasis) * 100 : 0,\n currency,\n category,\n details,\n dateInvested: dateStr,\n history,\n });\n onOpenChange(false);\n };\n\n return (\n \n \n \n Edit Investment\n \n
\n
\n
\n \n setName(e.target.value)}\n required\n />\n
\n
\n \n \n
\n
\n \n \n \n \n \n {dateObj ? format(dateObj, \"PPP\") : \"Pick a date\"}\n \n \n \n d && setDateObj(d)} initialFocus />\n \n \n
\n
\n \n \n
\n
\n \n setAmount(e.target.value)}\n required\n />\n
\n
\n \n setQuantity(e.target.value)}\n />\n
\n
\n \n setCurrentValue(e.target.value)}\n />\n
\n
\n \n setTicker(e.target.value)}\n />\n

\n For a public ticker, enter avg cost in its trading currency (e.g. USD for SPCX). The live price will display in that native currency.\n

\n
\n
\n \n setDetails(e.target.value)}\n />\n
\n
\n \n
\n \n \n );\n}\n" }, { "name": "src/components/investments/ExposurePanel.tsx", "type": "text/plain", "content": "import { Card, CardContent, CardHeader, CardTitle, CardDescription } from \"@/components/ui/card\";\nimport { exposureStats } from \"@/lib/holdings\";\nimport type { Holding } from \"@/types/finance\";\n\nfunction Bar({ label, value, pct }: { label: string; value: string; pct: number }) {\n return (\n
\n
\n {label}\n {value}\n
\n
\n
\n
\n
\n );\n}\n\n/**\n * How concentrated the portfolio is, not a recommendation, a read: the\n * single biggest position, the top three combined, and whichever currency\n * dominates. Same underlying holdings the Allocation panel groups, a\n * different question about them.\n */\nexport function ExposurePanel({ holdings }: { holdings: Holding[] }) {\n const stats = exposureStats(holdings);\n\n return (\n \n \n Exposure\n Concentration across the portfolio\n \n \n {stats.total === 0 ? (\n

No holdings yet.

\n ) : (\n <>\n {stats.topHolding && (\n \n )}\n \n {stats.topCurrency && (\n \n )}\n \n )}\n \n \n );\n}\n" }, { "name": "src/components/investments/GoalsPanel.tsx", "type": "text/plain", "content": "import { Link } from \"react-router-dom\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport { Card, CardContent, CardHeader, CardTitle, CardDescription } from \"@/components/ui/card\";\nimport { api } from \"@/lib/api\";\nimport { Flag } from \"lucide-react\";\n\ninterface GoalDto {\n id: string;\n name: string;\n targetAmount: number;\n currentAmount: number;\n color: string;\n}\n\nconst MAX_SHOWN = 3;\n\n/**\n * Surfaces the user's existing goals (Goals Tracker) here too, so checking\n * progress doesn't mean leaving the investments view. This is not a \"funded\n * by investments\" computation, goals aren't linked to specific holdings or\n * accounts anywhere in this app, just each goal's own tracked progress.\n */\nexport function GoalsPanel() {\n const { data: goals, isLoading } = useQuery({\n queryKey: [\"goals\"],\n queryFn: () => api.get(\"goals\"),\n });\n\n const shown = (goals ?? []).slice(0, MAX_SHOWN);\n\n return (\n \n \n
\n
\n Goals\n Your active savings goals\n
\n \n View all\n \n
\n \n \n {isLoading ? (\n

Loading…

\n ) : shown.length === 0 ? (\n
\n \n \n Create your first goal\n \n
\n ) : (\n shown.map((g) => {\n const pct = g.targetAmount > 0 ? Math.min(100, (g.currentAmount / g.targetAmount) * 100) : 0;\n return (\n
\n
\n {g.name}\n {pct.toFixed(0)}%\n
\n
\n
\n
\n
\n );\n })\n )}\n \n \n );\n}\n" }, { "name": "src/components/investments/HoldingChart.tsx", "type": "text/plain", "content": "import { useEffect, useMemo, useState } from \"react\";\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from \"@/components/ui/dialog\";\nimport { TimeSeriesChart } from \"@/components/charts/TimeSeriesChart\";\nimport { SegmentedControl } from \"@/components/charts/SegmentedControl\";\nimport { Loader2, TrendingUp, TrendingDown, Info } from \"lucide-react\";\nimport { api } from \"@/lib/api\";\nimport { cn } from \"@/lib/utils\";\nimport type { Holding } from \"@/types/finance\";\nimport { usePrivacy } from \"@/lib/privacy\";\nimport { formatMoney } from \"@/lib/format\";\n\nconst PERIODS = [\"1mo\", \"3mo\", \"6mo\", \"1y\", \"2y\", \"5y\", \"10y\"] as const;\nconst PERIOD_LABEL: Record = { \"1mo\": \"1M\", \"3mo\": \"3M\", \"6mo\": \"6M\", \"1y\": \"1Y\", \"2y\": \"2Y\", \"5y\": \"5Y\", \"10y\": \"10Y\" };\nconst PERIOD_OPTIONS = PERIODS.map((p) => ({ value: p as string, label: PERIOD_LABEL[p] }));\n\ntype Quote = Awaited>;\n\nfunction fmtPrice(n: number, currency: string) {\n return formatMoney(n, currency, { decimals: 2 });\n}\n\ninterface Props {\n holding: Holding | null;\n open: boolean;\n onOpenChange: (open: boolean) => void;\n}\n\n/**\n * Live price + history for a manual holding linked to a public ticker (the\n * SpaceX-went-public case). Resolves the holding's symbol via the backend\n * /market/history endpoint (yfinance). Shows guidance when the symbol has no\n * public market data (still private / wrong ticker).\n */\nexport function HoldingChart({ holding, open, onOpenChange }: Props) {\n // Local formatter reads privacy mode; subscribe so toggling it re-renders.\n usePrivacy();\n const [period, setPeriod] = useState(\"1y\");\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(false);\n\n const symbol = holding?.symbol ?? \"\";\n const currency = holding?.currency ?? \"USD\";\n\n useEffect(() => {\n if (!open || !symbol) return;\n let cancelled = false;\n setLoading(true);\n setData(null);\n api.market\n .history(symbol, currency, period)\n .then((res) => { if (!cancelled) setData(res); })\n .catch(() => { if (!cancelled) setData(null); })\n .finally(() => { if (!cancelled) setLoading(false); });\n return () => { cancelled = true; };\n }, [open, symbol, currency, period]);\n\n const up = (data?.changePercent ?? 0) >= 0;\n const series = useMemo(\n () => (data?.series ?? []).map((p) => ({ date: String(p.date).slice(0, 10), value: p.close })),\n [data]\n );\n\n return (\n \n \n \n \n {holding?.name}\n {data?.found && data.resolved && (\n ({data.resolved})\n )}\n \n \n\n {loading ? (\n
\n \n

Fetching live market data…

\n
\n ) : data?.found && data.series.length > 1 ? (\n
\n
\n
\n

{fmtPrice(data.price ?? 0, data.currency)}

\n

\n {up ? : }\n {up ? \"+\" : \"\"}{fmtPrice(data.change ?? 0, data.currency)} ({up ? \"+\" : \"\"}{data.changePercent?.toFixed(2)}%)\n

\n
\n button]:px-2\" />\n
\n\n fmtPrice(v, data.currency)}\n formatAxisValue={(v) => fmtPrice(v, data.currency)}\n yAxisWidth={60}\n />\n

Live market data via Yahoo Finance. Tracking {symbol}.

\n
\n ) : (\n
\n
\n \n
\n
\n

No public market data for “{symbol}”

\n

\n This looks like a private or unlisted holding. Once it goes public, edit the holding and set its\n public ticker (e.g. AAPL, RELIANCE) to track the live price here.\n

\n
\n
\n )}\n \n \n );\n}\n" }, { "name": "src/components/investments/PortfolioAllocation.tsx", "type": "text/plain", "content": "import { useMemo, useState } from \"react\";\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from \"@/components/ui/table\";\nimport { WeightRing } from \"@/components/charts/WeightRing\";\nimport { Input } from \"@/components/ui/input\";\nimport { Badge } from \"@/components/ui/badge\";\nimport type { Holding } from \"@/types/finance\";\nimport { cn } from \"@/lib/utils\";\nimport { usePrivacy } from \"@/lib/privacy\";\nimport { formatMoney } from \"@/lib/format\";\nimport { Search } from \"lucide-react\";\n\ninterface Props {\n holdings: Holding[];\n currency: string;\n investmentAccounts: { id: string; label: string }[];\n}\n\nfunction fmt(v: number, c: string) {\n return formatMoney(v, c, { decimals: 0 });\n}\n\nconst TOP_N = 8;\n\n/**\n * Consolidated holdings, ranked by weight - the same table + ring pattern\n * already used on the per-account holdings page, just rolled up across every\n * connected source. Replaces the portfolio heatmap: a treemap needs every\n * tile to size against the others, so a handful of holdings with a missing\n * or zero price (common for a freshly-added manual position, or a brokerage\n * quote that hasn't synced yet) rendered as an invisible zero-area tile with\n * nothing on screen to say why. A table row always shows its value, even\n * when that value is $0.\n */\nexport function PortfolioAllocation({ holdings, currency, investmentAccounts }: Props) {\n // Local formatter reads privacy mode; subscribe so toggling it re-renders.\n usePrivacy();\n const [query, setQuery] = useState(\"\");\n\n const accountLabel = useMemo(\n () => new Map(investmentAccounts.map((a) => [a.id, a.label])),\n [investmentAccounts]\n );\n\n const { rows, top, restCount, restValue, restWeight } = useMemo(() => {\n const inCur = holdings.filter((h) => (h.currency ?? currency) === currency);\n const total = inCur.reduce((s, h) => s + h.shares * h.price, 0);\n const rows = inCur\n .map((h) => {\n const value = h.shares * h.price;\n return {\n ...h,\n value,\n returnVal: h.change * h.shares,\n weight: total > 0 ? (value / total) * 100 : 0,\n accountName: (h.investmentAccountId && accountLabel.get(h.investmentAccountId)) || \"Manual\",\n };\n })\n .sort((a, b) => b.value - a.value);\n\n const top = rows.slice(0, TOP_N);\n const rest = rows.slice(TOP_N);\n const restValue = rest.reduce((s, h) => s + h.value, 0);\n return { rows, top, restCount: rest.length, restValue, restWeight: total > 0 ? (restValue / total) * 100 : 0 };\n }, [holdings, currency, accountLabel]);\n\n const filtered = useMemo(() => {\n const q = query.trim().toLowerCase();\n if (!q) return null;\n return rows.filter((h) => h.symbol.toLowerCase().includes(q) || h.name.toLowerCase().includes(q));\n }, [rows, query]);\n\n const shown = filtered ?? top;\n\n if (rows.length === 0) return null;\n\n return (\n
\n
\n \n setQuery(e.target.value)}\n placeholder=\"Filter holdings…\"\n className=\"pl-8 h-8 text-sm bg-background\"\n />\n
\n
\n \n \n \n Holding\n Account\n Type\n Weight\n Value\n Return\n \n \n \n {shown.length === 0 ? (\n \n \n No holdings match \"{query}\".\n \n \n ) : (\n shown.map((h, i) => {\n const returnPct = Number.isFinite(h.changePercent) ? h.changePercent : null;\n const isPositive = h.changePercent >= 0;\n return (\n \n \n

{h.symbol}

\n

{h.name}

\n \n \n {h.accountName}\n \n {h.category || \"—\"}\n \n
\n \n {h.weight.toFixed(1)}%\n
\n \n {fmt(h.value, h.currency ?? currency)}\n \n \n {returnPct === null ? \"—\" : `${isPositive ? \"+\" : \"\"}${returnPct.toFixed(2)}%`}\n \n \n \n );\n })\n )}\n {!filtered && restCount > 0 && (\n \n {restCount} other holding{restCount === 1 ? \"\" : \"s\"}\n \n
\n \n {restWeight.toFixed(1)}%\n
\n \n {fmt(restValue, currency)}\n \n \n )}\n \n
\n
\n {!filtered && restCount > 0 && (\n

\n Showing {top.length} of {rows.length} holdings.\n

\n )}\n
\n );\n}\n" }, { "name": "src/components/investments/PortfolioValueChart.tsx", "type": "text/plain", "content": "import { useMemo, useState } from \"react\";\nimport { Card, CardContent, CardHeader } from \"@/components/ui/card\";\nimport { TimeSeriesChart } from \"@/components/charts/TimeSeriesChart\";\nimport { SegmentedControl } from \"@/components/charts/SegmentedControl\";\nimport { ChartTypeToggle } from \"@/components/charts/ChartTypeToggle\";\nimport { portfolioValueHistory, mergeSnapshotsIntoHistory } from \"@/lib/holdings\";\nimport { periodChange } from \"@/lib/balanceSheet\";\nimport { toDateString, formatCompactMoney } from \"@/lib/format\";\nimport { usePrivacy } from \"@/lib/privacy\";\nimport { formatMoney } from \"@/lib/format\";\nimport type { Holding } from \"@/types/finance\";\nimport { TrendingDown, TrendingUp, LineChart as LineChartIcon, BarChart3 } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\nconst PERIODS = [\n { label: \"1M\", days: 30 },\n { label: \"3M\", days: 90 },\n { label: \"1Y\", days: 365 },\n { label: \"All\", days: 999 },\n];\nconst PERIOD_OPTIONS = PERIODS.map((p) => ({ value: p.label, label: p.label }));\nconst CHART_TYPES = [\n { value: \"line\", icon: LineChartIcon, label: \"Line\" },\n { value: \"bar\", icon: BarChart3, label: \"Bar\" },\n] as const;\n\nfunction fmt(v: number, c: string) {\n return formatMoney(v, c, { decimals: 2 });\n}\n\n/**\n * \"Total portfolio value\" hero: the combined value of every same-currency\n * holding over time, see portfolioValueHistory for how sparse per-holding\n * history is turned into one series. A portfolio that's mostly brokerage-\n * synced (no stored history) will show a flatter early curve than reality,\n * an honest gap given the data actually available rather than a fabricated\n * smooth line - though as `snapshots` (a real recorded total per day,\n * see usePortfolioSnapshotOnMount) accumulate, they take over for any date\n * they cover, since they're the actual figure rather than an approximation.\n */\nexport function PortfolioValueChart({\n holdings, currency, snapshots,\n}: {\n holdings: Holding[];\n currency: string;\n snapshots?: { date: string; value: number }[];\n}) {\n usePrivacy();\n const [period, setPeriod] = useState(\"1Y\");\n const [chartType, setChartType] = useState<\"line\" | \"bar\">(\"line\");\n\n const allData = useMemo(\n () => mergeSnapshotsIntoHistory(portfolioValueHistory(holdings, currency), snapshots ?? []),\n [holdings, currency, snapshots]\n );\n\n const data = useMemo(() => {\n const days = PERIODS.find((p) => p.label === period)?.days;\n if (!days || days >= 999) return allData;\n const cutoff = new Date();\n cutoff.setDate(cutoff.getDate() - days);\n const cutoffStr = toDateString(cutoff);\n return allData.filter((d) => d.date >= cutoffStr);\n }, [allData, period]);\n\n const change = useMemo(() => periodChange(data.map((d) => d.value)), [data]);\n const latest = data[data.length - 1]?.value ?? 0;\n\n return (\n \n \n

Total portfolio value

\n

{fmt(latest, currency)}

\n {change && (\n

\n {change.amount > 0 ? (\n \n ) : change.amount < 0 ? (\n \n ) : null}\n 0 ? \"text-chart-green\" : change.amount < 0 ? \"text-chart-red\" : \"text-foreground\")}>\n {change.amount > 0 ? \"+\" : change.amount < 0 ? \"-\" : \"\"}{fmt(Math.abs(change.amount), currency)}\n {change.pct !== null && ` (${change.pct > 0 ? \"+\" : \"\"}${change.pct.toFixed(1)}%)`}\n \n over {period === \"All\" ? \"all time\" : period}\n

\n )}\n
\n \n \n
\n \n \n {data.length === 0 ? (\n

No value history yet.

\n ) : (\n fmt(v, currency)}\n formatAxisValue={(v) => formatCompactMoney(v, currency)}\n chartType={chartType}\n />\n )}\n \n \n );\n}\n" }, { "name": "src/components/investments/SourceCard.tsx", "type": "text/plain", "content": "import { Link } from \"react-router-dom\";\nimport { ArrowRight, TrendingUp, TrendingDown } from \"lucide-react\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { cn } from \"@/lib/utils\";\nimport { usePrivacy } from \"@/lib/privacy\";\nimport { formatMoney } from \"@/lib/format\";\n\ninterface CurrencyBreakdown {\n value: number;\n gain: number;\n gainPct: number;\n}\n\ninterface Props {\n name: string;\n icon: React.ReactNode;\n to: string;\n portfolioValue: number;\n totalGain: number;\n totalGainPct: number;\n holdingsCount: number;\n currency: string;\n connected: boolean;\n /** Optional action buttons rendered in the card header (e.g. rename/delete for manual accounts). */\n actions?: React.ReactNode;\n /**\n * When an account holds multiple currencies, pass a per-currency breakdown\n * so we avoid displaying a cross-currency sum. When present and length > 1,\n * the single-figure display is replaced with a stacked per-currency view.\n */\n currencyBreakdown?: Record;\n}\n\nfunction fmt(v: number, c: string) {\n return formatMoney(v, c, { decimals: 2 });\n}\n\nexport function SourceCard({ name, icon, to, portfolioValue, totalGain, totalGainPct, holdingsCount, currency, connected, actions, currencyBreakdown }: Props) {\n // Local formatter reads privacy mode; subscribe so toggling it re-renders.\n usePrivacy();\n const isPositive = totalGain >= 0;\n const breakdownEntries = currencyBreakdown ? Object.entries(currencyBreakdown) : [];\n const isMixed = breakdownEntries.length > 1;\n\n return (\n \n \n
\n \n
\n
\n
\n {icon}\n
\n
\n

{name}

\n
\n \n \n {connected ? \"Connected\" : \"Disconnected\"}\n \n
\n
\n
\n
\n {actions}\n \n
\n
\n\n
\n {isMixed ? (\n <>\n
\n {breakdownEntries.map(([c, bd]) => (\n

\n {fmt(bd.value, c)}\n

\n ))}\n
\n
\n
\n {breakdownEntries.map(([c, bd]) => (\n
\n {bd.gain >= 0 ? : }\n = 0 ? \"text-chart-green\" : \"text-chart-red\")}>\n {bd.gain >= 0 ? \"+\" : \"\"}{fmt(bd.gain, c)} ({bd.gainPct >= 0 ? \"+\" : \"\"}{bd.gainPct.toFixed(2)}%)\n \n
\n ))}\n
\n {holdingsCount} holdings\n
\n \n ) : (\n <>\n
\n

\n {fmt(portfolioValue, currency)}\n

\n
\n
\n
\n {isPositive ? : }\n \n {isPositive ? \"+\" : \"\"}{fmt(totalGain, currency)} ({isPositive ? \"+\" : \"\"}{totalGainPct.toFixed(2)}%)\n \n
\n {holdingsCount} holdings\n
\n \n )}\n
\n \n \n \n );\n}\n" }, { "name": "src/components/investments/TopMovers.tsx", "type": "text/plain", "content": "import { useMemo } from \"react\";\nimport { TrendingUp, TrendingDown } from \"lucide-react\";\nimport type { Holding } from \"@/types/finance\";\nimport { cn } from \"@/lib/utils\";\nimport { usePrivacy } from \"@/lib/privacy\";\nimport { formatMoney } from \"@/lib/format\";\n\ninterface Props {\n holdings: Holding[];\n currency: string;\n}\n\nfunction fmt(v: number, c: string) {\n return formatMoney(v, c, { decimals: 2 });\n}\n\nexport function TopMovers({ holdings, currency }: Props) {\n // Local formatter reads privacy mode; subscribe so toggling it re-renders.\n usePrivacy();\n // \"Movers\" means today's movement. Ranking by `changePercent` (total return\n // since purchase) just listed the oldest winners every day.\n const move = (h: Holding) => h.dayChangePercent ?? 0;\n\n const { gainers, losers } = useMemo(() => {\n const sorted = [...holdings].sort((a, b) => move(b) - move(a));\n return {\n gainers: sorted.filter((h) => move(h) > 0).slice(0, 3),\n losers: sorted.filter((h) => move(h) < 0).slice(-3).reverse(),\n };\n }, [holdings]);\n\n const renderList = (items: Holding[], isGainer: boolean) => (\n
\n {items.length === 0 && (\n

No {isGainer ? \"gainers\" : \"losers\"}

\n )}\n {items.map((h, i) => (\n \n
\n
\n {isGainer ? : }\n
\n
\n

{h.symbol}

\n

{fmt(h.price, h.currency ?? currency)}

\n
\n
\n \n {move(h) >= 0 ? \"+\" : \"\"}{move(h).toFixed(2)}%\n \n
\n ))}\n
\n );\n\n return (\n
\n
\n

Top gainers today

\n {renderList(gainers, true)}\n
\n
\n

Top losers today

\n {renderList(losers, false)}\n
\n
\n );\n}\n" }, { "name": "src/components/kite/KiteReconnectDialog.tsx", "type": "text/plain", "content": "import { useCallback, useState } from \"react\";\nimport { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from \"@/components/ui/dialog\";\nimport { Button } from \"@/components/ui/button\";\nimport { api } from \"@/lib/api\";\nimport { ExternalLink, Loader2, LogIn } from \"lucide-react\";\nimport { toast } from \"sonner\";\n\nconst OAUTH_WINDOW_NAME = \"investment_oauth\";\n\nfunction openLoginPopup(loginUrl: string) {\n const w = 520;\n const h = 740;\n const left = Math.max(0, Math.floor((window.screen.width - w) / 2));\n const top = Math.max(0, Math.floor((window.screen.height - h) / 4));\n const features = `popup=yes,width=${w},height=${h},left=${left},top=${top},scrollbars=yes,resizable=yes`;\n return window.open(loginUrl, OAUTH_WINDOW_NAME, features);\n}\n\ninterface KiteReconnectDialogProps {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n /** OAuth provider, defaults to \"kite\". */\n provider?: string;\n}\n\nexport function KiteReconnectDialog({ open, onOpenChange, provider = \"kite\" }: KiteReconnectDialogProps) {\n const [openingLogin, setOpeningLogin] = useState(false);\n const [openingPopup, setOpeningPopup] = useState(false);\n\n const fetchLoginUrl = useCallback(async () => {\n const { login_url } = await api.investments.connectUrl(provider);\n return login_url;\n }, [provider]);\n\n const handleOpenLogin = async () => {\n setOpeningLogin(true);\n try {\n const login_url = await fetchLoginUrl();\n window.open(login_url, \"_blank\", \"noopener,noreferrer\");\n } catch (err: unknown) {\n toast.error(\"Failed to get login URL: \" + (err instanceof Error ? err.message : \"Unknown error\"));\n } finally {\n setOpeningLogin(false);\n }\n };\n\n const handleOpenLoginPopup = async () => {\n setOpeningPopup(true);\n try {\n const login_url = await fetchLoginUrl();\n const win = openLoginPopup(login_url);\n if (!win) toast.error(\"Popup blocked, try “Open in a new tab” instead.\");\n } catch (err: unknown) {\n toast.error(\"Failed to get login URL: \" + (err instanceof Error ? err.message : \"Unknown error\"));\n } finally {\n setOpeningPopup(false);\n }\n };\n\n return (\n \n \n \n Reconnect your broker\n \n Your session has expired. Log in again and your holdings will refresh automatically.\n \n \n\n
\n \n \n {openingLogin ? : }\n Open in a new tab\n \n
\n \n \n );\n}\n" }, { "name": "src/components/landing/AboutAndTrust.tsx", "type": "text/plain", "content": "import { APP_ORIGIN } from \"@/lib/deployment\";\n\nconst link =\n \"inline-flex min-h-[44px] items-center gap-1.5 text-sm font-medium text-land-fg underline decoration-land-line underline-offset-4 transition hover:text-land-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-land-accent\";\n\n/** Says plainly what KHMYS is and how it handles data, for people and for\n * crawlers that read only the page text. Every claim here is stated on /privacy. */\nexport function AboutAndTrust() {\n return (\n \n
\n

\n WHAT IT IS\n

\n \n What is KHMYS?\n \n
\n
\n

\n KHMYS (Know\n How Much You Spend) is a personal finance web app. It brings your\n everyday spending, budgets, accounts, investments and goals into one\n place, so you can see where your money goes and decide what to do\n next. Connect a bank, import a CSV or PDF statement, or add\n transactions yourself.\n

\n
\n

How KHMYS handles your data

\n
    \n
  • You sign in with Google. KHMYS has no passwords of its own.
    • \n
  • \n Bank connections go through Plaid. You enter your bank login in\n Plaid’s window, never in KHMYS, and KHMYS asks Plaid for\n transactions only.\n
    • \n
  • \n No advertising, no ad cookies, and nothing sold. KHMYS does not\n move money.\n
    • \n
  • \n KHMYS does not charge anything today. There is no billing or\n subscription in the app.\n
    • \n
\n
\n

\n \n Privacy policy\n \n \n Security\n \n \n Contact support\n \n

\n

\n New to tracking money? Start with{\" \"}\n \n how to track your spending\n {\" \"}\n or{\" \"}\n \n how to build a monthly budget\n \n , browse all the{\" \"}\n \n guides\n \n , or read{\" \"}\n \n about KHMYS and who built it\n \n .\n

\n
\n \n );\n}\n" }, { "name": "src/components/plaid/BankReconnectButton.tsx", "type": "text/plain", "content": "import { useState } from \"react\";\nimport { toast } from \"sonner\";\nimport { Button } from \"@/components/ui/button\";\nimport { api } from \"@/lib/api\";\nimport { PlaidLinkSession } from \"./PlaidLinkSession\";\n\nexport function BankReconnectButton({ itemId, institution, onReconnected }: { itemId: string; institution: string; onReconnected: () => Promise }) {\n const [token, setToken] = useState(null);\n const [busy, setBusy] = useState(false);\n const start = async () => {\n setBusy(true);\n try { setToken((await api.plaid.createLinkToken(itemId)).link_token); }\n catch { toast.error(\"Couldn't start bank sign-in. Please try again.\"); }\n finally { setBusy(false); }\n };\n const complete = async () => {\n setToken(null);\n setBusy(true);\n // Update mode repairs the existing Item; never exchange a new public token.\n try { await onReconnected(); toast.success(`${institution} reconnected and synced`); }\n catch (error) { toast.error(error instanceof Error ? error.message : \"Bank sign-in completed, but sync needs another attempt.\"); }\n finally { setBusy(false); }\n };\n return token\n ? { void complete(); }} onClose={() => setToken(null)} />\n : ;\n}\n" }, { "name": "src/components/plaid/ConnectBankButton.tsx", "type": "text/plain", "content": "import { useEffect, useRef, useState } from \"react\";\nimport { Landmark } from \"lucide-react\";\nimport { toast } from \"sonner\";\nimport { Button, type ButtonProps } from \"@/components/ui/button\";\nimport { api } from \"@/lib/api\";\nimport { useFinanceData } from \"@/context/FinanceDataContext\";\nimport { PlaidLinkSession } from \"./PlaidLinkSession\";\n\nexport function ConnectBankButton({ children = \"Connect your bank\", autoStart = false, ...props }: ButtonProps & { autoStart?: boolean }) {\n const { syncPlaid, refreshData } = useFinanceData();\n const [token, setToken] = useState(null);\n const [busy, setBusy] = useState(false);\n const starting = useRef(false);\n const autoStarted = useRef(false);\n const start = async () => {\n if (starting.current) return;\n starting.current = true;\n setBusy(true);\n try { setToken((await api.plaid.createLinkToken()).link_token); }\n catch { toast.error(\"Couldn't start bank connection. Please try again.\"); }\n finally { setBusy(false); starting.current = false; }\n };\n useEffect(() => {\n if (!autoStart) autoStarted.current = false;\n if (autoStart && !autoStarted.current) { autoStarted.current = true; void start(); }\n // The initial navigation intent should run only once, including StrictMode.\n }, [autoStart]);\n const complete = async (publicToken: string) => {\n setToken(null);\n setBusy(true);\n try {\n await api.plaid.exchangeToken(publicToken);\n try { await syncPlaid(); toast.success(\"Bank connected and accounts updated\"); }\n catch (error) { refreshData(); toast.warning(error instanceof Error ? error.message : \"Bank connected. Sync needs another attempt.\"); }\n } catch { toast.error(\"Couldn't finish connecting the bank. Please try again.\"); }\n finally { setBusy(false); }\n };\n return token ? { void complete(publicToken); }} onClose={failed => { setToken(null); if (failed) toast.error(\"Bank connection wasn't completed. Please try again.\"); }} />\n : ;\n}\n" }, { "name": "src/components/plaid/PlaidLinkSession.tsx", "type": "text/plain", "content": "import { useEffect, useRef } from \"react\";\nimport { usePlaidLink } from \"react-plaid-link\";\nimport { Button } from \"@/components/ui/button\";\n\n/** One automatically opened Link session, shared by connect and reconnect. */\nexport function PlaidLinkSession({ token, onSuccess, onClose }: {\n token: string; onSuccess: (publicToken: string) => void; onClose: (failed?: boolean) => void;\n}) {\n const opened = useRef(false);\n const { open, ready, error } = usePlaidLink({\n token, onSuccess, onExit: error => onClose(Boolean(error)),\n });\n useEffect(() => {\n if (ready && !opened.current) { opened.current = true; open(); }\n }, [ready, open]);\n if (error) return

The secure bank window couldn't load. Refresh the page and try again.

;\n return
{ready ? \"Bank connection window open\" : \"Opening secure bank connection…\"}
;\n}\n" }, { "name": "src/components/skeletons/LoadingSkeletons.tsx", "type": "text/plain", "content": "import { Skeleton } from \"@/components/ui/skeleton\";\nimport { Card, CardContent, CardHeader } from \"@/components/ui/card\";\n\n/** Skeleton for stat cards (used on Home, Analytics) */\nexport function StatCardSkeleton() {\n return (\n \n \n \n \n \n \n \n );\n}\n\n/** Skeleton for transaction rows */\nexport function TransactionRowSkeleton({ count = 5 }: { count?: number }) {\n return (\n
\n {Array.from({ length: count }).map((_, i) => (\n
\n \n
\n \n \n
\n \n
\n ))}\n
\n );\n}\n\n/** Skeleton for chart areas */\nexport function ChartSkeleton({ height = 200 }: { height?: number }) {\n return (\n \n \n \n \n \n \n \n \n );\n}\n\n/** Skeleton for the full home page */\nexport function DashboardSkeleton() {\n return (\n
\n {/* Header */}\n
\n \n \n
\n\n {/* Stat cards row */}\n
\n {Array.from({ length: 4 }).map((_, i) => (\n \n ))}\n
\n\n {/* Chart placeholder */}\n \n\n {/* Transaction list */}\n \n \n \n \n \n \n \n \n
\n );\n}\n\n/** Skeleton for full-page content */\nexport function PageSkeleton() {\n return (\n
\n
\n \n \n
\n
\n {Array.from({ length: 4 }).map((_, i) => (\n \n ))}\n
\n \n \n \n \n \n
\n );\n}\n" }, { "name": "src/components/todos/TodoDetailSheet.tsx", "type": "text/plain", "content": "import { useEffect, useState } from \"react\";\nimport { Sheet, SheetContent, SheetHeader, SheetTitle } from \"@/components/ui/sheet\";\nimport { Button } from \"@/components/ui/button\";\nimport { Label } from \"@/components/ui/label\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/ui/select\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { CopyButton } from \"@/components/elements/CopyButton\";\nimport { TagPicker } from \"@/components/elements/TagPicker\";\nimport { DatePicker } from \"@/components/elements/DatePicker\";\nimport { toast } from \"sonner\";\nimport { Flag, Loader2, Trash2 } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { useTodoData } from \"@/context/TodoDataContext\";\nimport { useTags, useTagMutations, useTodoTags } from \"@/hooks/useTags\";\nimport { PRIORITY_LABELS, dueLabel } from \"@/lib/todos\";\nimport type { TodoDto } from \"@/lib/api\";\n\ninterface Props {\n todo: TodoDto | null;\n onClose: () => void;\n}\n\nconst NO_PRIORITY = \"none\";\n\nexport function TodoDetailSheet({ todo, onClose }: Props) {\n const { lists, updateTodo, deleteTodo, toggleTodo } = useTodoData();\n const { data: allTags = [] } = useTags();\n const { create: createTag } = useTagMutations();\n const { data: todoTags = [], setTags } = useTodoTags(todo?.id);\n const [title, setTitle] = useState(\"\");\n const [notes, setNotes] = useState(\"\");\n const [dueDate, setDueDate] = useState(\"\");\n const [priority, setPriority] = useState(NO_PRIORITY);\n const [flagged, setFlagged] = useState(false);\n const [listId, setListId] = useState(\"\");\n const [saving, setSaving] = useState(false);\n\n useEffect(() => {\n if (!todo) return;\n setTitle(todo.title);\n setNotes(todo.notes ?? \"\");\n setDueDate(todo.dueDate ?? \"\");\n setPriority(todo.priority ?? NO_PRIORITY);\n setFlagged(todo.flagged);\n setListId(todo.listId ?? \"\");\n }, [todo]);\n\n if (!todo) return null;\n\n const save = async (updates: Partial) => {\n setSaving(true);\n try {\n await updateTodo(todo.id, updates as never);\n } catch {\n toast.error(\"Couldn't save that change\");\n } finally {\n setSaving(false);\n }\n };\n\n const commitTitle = () => {\n const trimmed = title.trim();\n if (!trimmed) { setTitle(todo.title); return; }\n if (trimmed !== todo.title) void save({ title: trimmed });\n };\n\n const commitNotes = () => {\n const next = notes.trim() || null;\n if (next !== (todo.notes ?? null)) void save({ notes: next as never });\n };\n\n return (\n !open && onClose()}>\n \n \n \n Todo\n {todo.source !== \"manual\" && (\n via Shortcuts\n )}\n {saving && }\n \n \n\n
\n
\n void toggleTodo(todo).catch(() => toast.error(\"Couldn't update that\"))}\n className={cn(\n \"mt-1 h-5 w-5 shrink-0 rounded-full border-2 flex items-center justify-center transition-colors\",\n todo.completed ? \"bg-primary border-primary\" : \"border-muted-foreground/40 hover:border-primary\"\n )}\n >\n {todo.completed && }\n \n
\n setTitle(e.target.value)}\n onBlur={commitTitle}\n rows={1}\n className={cn(\"min-h-0 resize-none text-base font-medium\", todo.completed && \"line-through text-muted-foreground\")}\n />\n {todo.completed && todo.completedAt && (\n

Completed {dueLabel(todo.completedAt)}

\n )}\n
\n
\n\n
\n \n setNotes(e.target.value)}\n onBlur={commitNotes}\n placeholder=\"Add notes…\"\n rows={3}\n className=\"text-sm\"\n />\n
\n\n
\n
\n \n { setDueDate(d ?? \"\"); void save({ dueDate: d as never }); }}\n clearable\n />\n
\n
\n \n { setPriority(v); void save({ priority: (v === NO_PRIORITY ? null : v) as never }); }}\n >\n \n \n None\n {Object.entries(PRIORITY_LABELS).map(([value, label]) => (\n {label}\n ))}\n \n \n
\n
\n\n
\n \n { setListId(v); void save({ listId: v as never }); }}\n >\n \n \n {lists.map((l) => (\n {l.name}\n ))}\n \n \n
\n\n
\n \n t.id)}\n onChange={(ids) => setTags.mutate(ids)}\n onCreate={(name) => createTag.mutateAsync({ name }).then((t) => t.id)}\n disabled={setTags.isPending}\n />\n
\n\n { setFlagged(!flagged); void save({ flagged: !flagged as never }); }}\n className={cn(\n \"flex items-center gap-2 text-sm rounded-md border px-3 py-2 transition-colors\",\n flagged ? \"border-chart-orange/40 bg-chart-orange/10 text-chart-orange\" : \"border-border text-muted-foreground hover:text-foreground\"\n )}\n >\n \n {flagged ? \"Flagged\" : \"Flag this todo\"}\n \n\n
\n \n
\n \n {todo.url}\n \n \n
\n
\n\n {\n void deleteTodo(todo.id).catch(() => toast.error(\"Couldn't delete that\"));\n onClose();\n }}\n >\n Delete todo\n \n
\n \n \n );\n}\n" }, { "name": "src/components/transactions/AccountBalanceChart.tsx", "type": "text/plain", "content": "import { Card, CardContent, CardHeader, CardTitle, CardDescription } from \"@/components/ui/card\";\nimport { TimeSeriesChart } from \"@/components/charts/TimeSeriesChart\";\nimport { SegmentedControl } from \"@/components/charts/SegmentedControl\";\nimport { ChartTypeToggle } from \"@/components/charts/ChartTypeToggle\";\nimport { CalendarDays, LineChart } from \"lucide-react\";\nimport { useFinanceData } from \"@/context/FinanceDataContext\";\nimport { useMemo, useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { toDateString } from \"@/lib/format\";\nimport { useMoney } from \"@/hooks/useMoney\";\nimport { AnimatedMoney } from \"@/components/elements/AnimatedMoney\";\nimport { accountDisplayName } from \"@/lib/accounts\";\n\nconst periods = [\n { label: \"30 days\", days: 30 },\n { label: \"3 months\", days: 90 },\n { label: \"6 months\", days: 180 },\n { label: \"All time\", days: 999 },\n];\nconst periodOptions = periods.map((p) => ({ value: p.label, label: p.label }));\n\ninterface AccountBalanceChartProps {\n /** Accounts whose balances are summed into the chart. Empty = nothing selected. */\n accountIds: string[];\n /** Optional control rendered in the header (e.g. an account multi-select). */\n control?: React.ReactNode;\n /** Transactions supplies the linked heatmap; account detail retains its line-only view. */\n heatmap?: React.ReactNode;\n lineChart?: React.ReactNode;\n chartControls?: React.ReactNode;\n /** Optional companion chart, taking one fifth of the card on wide screens. */\n sideChart?: React.ReactNode;\n chartType?: \"line\" | \"heatmap\";\n onChartTypeChange?: (type: \"line\" | \"heatmap\") => void;\n /** True when every selected account's balance represents money owed\n * (credit cards, loans): plots the debt magnitude instead of the raw\n * (negative) balance, so the line rises as debt grows, in red — more debt\n * is unfavorable, the same convention Sure's credit card detail uses. */\n debt?: boolean;\n}\n\n/**\n * Balance-over-time for a chosen set of accounts. Mirrors the dashboard\n * BalanceChart math (anchor the curve to today's real balance, back-compute\n * history from signed daily flow) but scoped to the selected accounts so each\n * bank account shows \"how much money is in it\" rather than just transactions.\n */\nexport function AccountBalanceChart({ accountIds, control, debt, heatmap, lineChart, chartControls, sideChart, chartType = \"line\", onChartTypeChange }: AccountBalanceChartProps) {\n const { transactions, accounts } = useFinanceData();\n const [period, setPeriod] = useState(\"3 months\");\n const { compact, money, date: fmtDate } = useMoney();\n\n const idSet = useMemo(() => new Set(accountIds), [accountIds]);\n const selectedAccounts = useMemo(() => accounts.filter((a) => idSet.has(a.id)), [accounts, idSet]);\n\n // Today's balance for the selected accounts = the number the chart ends on.\n const currentBalance = useMemo(\n () => selectedAccounts.reduce((s, a) => s + a.balance, 0),\n [selectedAccounts]\n );\n\n const allData = useMemo(() => {\n if (accountIds.length === 0) return [];\n // A transaction with no date (a malformed import/sync row) can't be\n // placed on a timeline; keeping it would crash the sort below.\n const txns = transactions.filter((t) => idSet.has(t.accountId) && t.date);\n if (txns.length === 0) return [];\n const sorted = [...txns].sort((a, b) => a.date.localeCompare(b.date));\n const dailyMap: Record = {};\n sorted.forEach((t) => {\n const delta = t.type === \"income\" ? Math.abs(t.amount) : -Math.abs(t.amount);\n dailyMap[t.date] = (dailyMap[t.date] || 0) + delta;\n });\n const days = Object.keys(dailyMap).sort();\n let cumulative = 0;\n const flow = days.map((date) => {\n cumulative += dailyMap[date];\n return { date, cumulative };\n });\n // Shift the running flow so its final point equals today's real balance.\n const offset = currentBalance - (flow.length ? flow[flow.length - 1].cumulative : 0);\n return flow.map(({ date, cumulative }) => ({ date, value: Math.round((cumulative + offset) * 100) / 100 }));\n }, [transactions, idSet, accountIds, currentBalance]);\n\n const data = useMemo(() => {\n const days = periods.find((p) => p.label === period)?.days;\n // Filter by a real date window. Slicing the array by `days` counted data\n // points, so \"30 days\" over sparse data silently showed several months.\n if (!days || days >= 999) return allData;\n const cutoff = new Date();\n cutoff.setDate(cutoff.getDate() - days);\n const cutoffStr = toDateString(cutoff);\n return allData.filter((d) => d.date >= cutoffStr);\n }, [allData, period]);\n\n const subtitle =\n selectedAccounts.length === 0\n ? \"No accounts selected\"\n : selectedAccounts.length === 1\n ? accountDisplayName(selectedAccounts[0])\n : `${selectedAccounts.length} accounts combined`;\n\n const displayBalance = debt ? -currentBalance : currentBalance;\n const chartData = useMemo(() => (debt ? data.map((d) => ({ ...d, value: -d.value })) : data), [data, debt]);\n const calendarView = !!heatmap && chartType === \"heatmap\";\n\n return (\n \n
\n \n
\n \n {debt ? \"Balance owed\" : \"Current balance\"}\n \n \n \n \n

{subtitle}

\n
\n
\n {control}\n
\n {heatmap && onChartTypeChange && }\n {chartControls ?? (!calendarView && )}\n
\n
\n \n \n {calendarView ? heatmap : lineChart ?? (chartData.length === 0 ? (\n

\n {accountIds.length === 0\n ? \"Select at least one account to see its balance trend.\"\n : \"No transactions for the selected account(s) to chart.\"}\n

\n ) : (\n fmtDate(d)}\n yAxisWidth={44}\n colorVar={debt ? \"--chart-red\" : undefined}\n />\n ))}\n \n
\n {sideChart &&
{sideChart}
}\n \n );\n}\n" }, { "name": "src/components/transactions/AddTransactionDialog.tsx", "type": "text/plain", "content": "import { useState } from \"react\";\nimport { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from \"@/components/ui/dialog\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { Button } from \"@/components/ui/button\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/ui/select\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport { Calendar } from \"@/components/ui/calendar\";\nimport { Calendar as CalendarIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { toDateString } from \"@/lib/format\";\nimport { UNCATEGORIZED } from \"@/lib/categories\";\nimport { toast } from \"sonner\";\nimport type { Account, Transaction } from \"@/types/finance\";\nimport { CategoryPicker } from \"@/components/elements/CategoryPicker\";\nimport { accountDisplayName } from \"@/lib/accounts\";\n\ninterface Props {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n accounts: Account[];\n onAdd: (t: Transaction) => Promise;\n}\n\n/**\n * Record a transaction by hand.\n *\n * The app had no way to add one at all, every transaction had to arrive through\n * Plaid, which makes cash spending and any non-linked account invisible.\n */\nexport function AddTransactionDialog({ open, onOpenChange, accounts, onAdd }: Props) {\n const [date, setDate] = useState(new Date());\n const [description, setDescription] = useState(\"\");\n const [amount, setAmount] = useState(\"\");\n const [type, setType] = useState<\"expense\" | \"income\">(\"expense\");\n const [category, setCategory] = useState(UNCATEGORIZED);\n const [accountId, setAccountId] = useState(accounts[0]?.id ?? \"\");\n const [saving, setSaving] = useState(false);\n\n const reset = () => {\n setDate(new Date());\n setDescription(\"\");\n setAmount(\"\");\n setType(\"expense\");\n setCategory(UNCATEGORIZED);\n setAccountId(accounts[0]?.id ?? \"\");\n };\n\n const submit = async () => {\n const desc = description.trim();\n const magnitude = Math.abs(parseFloat(amount));\n if (!desc) { toast.error(\"Add a description\"); return; }\n if (!magnitude || Number.isNaN(magnitude)) { toast.error(\"Enter an amount greater than zero\"); return; }\n if (!accountId) { toast.error(\"Choose an account\"); return; }\n\n const account = accounts.find((a) => a.id === accountId);\n setSaving(true);\n try {\n await onAdd({\n // `manual-` keeps it clear of the `plaid-` prefix the sync deletes and\n // rebuilds on every run, otherwise a hand-entered row would vanish.\n id: `manual-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,\n date: toDateString(date),\n description: desc,\n category,\n // Expenses are stored negative, income positive, matching the Plaid sync.\n amount: type === \"expense\" ? -magnitude : magnitude,\n accountId,\n accountName: account ? accountDisplayName(account) : \"Account\",\n type,\n });\n toast.success(\"Transaction added\");\n reset();\n onOpenChange(false);\n } catch {\n toast.error(\"Couldn't save the transaction\");\n } finally {\n setSaving(false);\n }\n };\n\n return (\n { if (!o) reset(); onOpenChange(o); }}>\n \n Add transaction\n
\n
\n \n setDescription(e.target.value)}\n placeholder=\"e.g. Farmers market\"\n autoFocus\n />\n
\n\n
\n
\n \n \n
\n
\n \n setAmount(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && void submit()}\n />\n
\n
\n\n
\n
\n \n \n \n \n \n \n d && setDate(d)}\n disabled={(d) => d > new Date()}\n initialFocus\n />\n \n \n
\n
\n \n \n
\n
\n\n
\n \n \n
\n
\n \n \n \n \n \n \n );\n}\n" }, { "name": "src/components/transactions/DuplicateBadge.tsx", "type": "text/plain", "content": "import { Copy, Check, X } from \"lucide-react\";\nimport type { DuplicateDto } from \"@/lib/api\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * The badge a possible-duplicate row gets, right next to (or in place of)\n * its category badge - same inline confirm/reject shape as TransferBadge,\n * for the same reason: the decision belongs right where the row already is,\n * not behind a trip to a separate page.\n */\nexport function DuplicateBadge({\n suggested,\n onMerge,\n onDismiss,\n busy,\n}: {\n /** The pending DuplicateCandidate this row is a side of. */\n suggested: DuplicateDto;\n onMerge: () => void;\n onDismiss: () => void;\n busy?: boolean;\n}) {\n return (\n \n \n Duplicate?\n { e.stopPropagation(); onMerge(); }}\n className={cn(\"rounded-full p-0.5 hover:bg-chart-yellow/20 transition-colors\", busy && \"opacity-50\")}\n >\n \n \n { e.stopPropagation(); onDismiss(); }}\n className={cn(\"rounded-full p-0.5 hover:bg-destructive/20 hover:text-destructive transition-colors\", busy && \"opacity-50\")}\n >\n \n \n \n );\n}\n" }, { "name": "src/components/transactions/SplitBadge.tsx", "type": "text/plain", "content": "import { Split } from \"lucide-react\";\n\n/** The badge a split transaction gets in the ledger, in place of its\n * category badge: `category` on the row itself is stale once the amount is\n * divided, so naming one category there would be misleading. */\nexport function SplitBadge({ count }: { count: number }) {\n return (\n \n \n Split · {count}\n \n );\n}\n" }, { "name": "src/components/transactions/TransactionsActivityChart.tsx", "type": "text/plain", "content": "import { useMemo } from \"react\";\nimport { eachDayOfInterval, format } from \"date-fns\";\nimport { TimeSeriesChart } from \"@/components/charts/TimeSeriesChart\";\nimport { parseLocalDate } from \"@/lib/utils\";\nimport { CalendarHeatmap } from \"@/components/charts/CalendarHeatmap\";\nimport { Button } from \"@/components/ui/button\";\nimport { useTransactionActivity } from \"@/hooks/useTransactionActivity\";\nimport type { TransactionFilters } from \"@/hooks/useTransactionSearch\";\nimport { useMoney } from \"@/hooks/useMoney\";\nimport { toDateString } from \"@/lib/format\";\nimport type { CalendarSelection, FlowDirection } from \"@/lib/calendarActivity\";\nimport type { Account } from \"@/types/finance\";\n\ninterface Props {\n filters: TransactionFilters;\n accounts: Account[];\n year: number;\n direction: FlowDirection;\n chartType: \"line\" | \"heatmap\";\n periodDays: number;\n onSelect: (selection: CalendarSelection | null) => void;\n}\n\n/** A chart-only view; search, dates, totals and the ledger belong to Transactions. */\nexport function TransactionsActivityChart({ filters, accounts, year, direction, chartType, periodDays, onSelect }: Props) {\n const from = filters.dateFrom ? toDateString(filters.dateFrom) : undefined;\n const to = filters.dateTo ? toDateString(filters.dateTo) : undefined;\n const selection = from || to ? { from: from ?? `${year}-01-01`, to: to ?? `${year}-12-31` } : null;\n const selectedAccounts = useMemo(() => accounts.filter(a => filters.accountIds?.includes(a.id) ?? (filters.accountId === \"all\" || a.id === filters.accountId)), [accounts, filters.accountIds, filters.accountId]);\n const units = [...new Set(selectedAccounts.map(a => a.currency || \"XXX\"))];\n const currency = units.length === 1 ? units[0] : undefined;\n const { money, compact, date: fmtDate } = useMoney(currency);\n const activity = useTransactionActivity(filters, year, chartType === \"line\" ? periodDays : undefined);\n const lineData = useMemo(() => {\n if (chartType !== \"line\" || activity.days.size === 0) return [];\n const dates = [...activity.days.keys()].sort();\n const end = periodDays ? new Date() : parseLocalDate(dates[dates.length - 1]);\n const start = periodDays ? new Date(end.getFullYear(), end.getMonth(), end.getDate() - periodDays + 1) : parseLocalDate(dates[0]);\n return eachDayOfInterval({ start, end }).map(day => {\n const date = toDateString(day);\n return { date, value: activity.days.get(date)?.[direction] ?? 0 };\n });\n }, [activity.days, chartType, periodDays, direction]);\n\n return (\n
\n {selectedAccounts.length === 0 ?

Select at least one account to see daily activity.

\n : !currency || currency === \"XXX\" ?

Select accounts with the same confirmed currency to compare daily amounts.

\n : activity.error ?

Couldn't load daily activity.

\n : activity.loading ?
Loading daily activity…
\n : chartType === \"line\" ? (lineData.length ? :

No transactions for the selected period.

)\n : }\n

{from ? `From ${format(filters.dateFrom!, \"MMMM d, yyyy\")}. ` : \"\"}{to ? `Through ${format(filters.dateTo!, \"MMMM d, yyyy\")}.` : \"\"}

\n
\n );\n}\n" }, { "name": "src/components/transactions/TransactionsBalanceChart.tsx", "type": "text/plain", "content": "import { useEffect, useMemo, useState, type ReactNode } from \"react\";\nimport { SegmentedControl } from \"@/components/charts/SegmentedControl\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/ui/select\";\nimport type { TransactionFilters } from \"@/hooks/useTransactionSearch\";\nimport { calendarDate, type CalendarSelection, type FlowDirection } from \"@/lib/calendarActivity\";\nimport { toDateString } from \"@/lib/format\";\nimport type { Account, Transaction } from \"@/types/finance\";\nimport { AccountBalanceChart } from \"./AccountBalanceChart\";\nimport { TransactionsActivityChart } from \"./TransactionsActivityChart\";\n\nconst DIRECTIONS = [{ value: \"outflow\", label: \"Outflow\" }, { value: \"inflow\", label: \"Inflow\" }] as const;\nconst PERIODS = [{ days: 30, label: \"30 days\" }, { days: 90, label: \"3 months\" }, { days: 180, label: \"6 months\" }, { days: 0, label: \"All time\" }];\n\ninterface Props {\n accountIds: string[];\n accounts: Account[];\n transactions: Transaction[];\n filters: TransactionFilters;\n chartType: \"line\" | \"heatmap\";\n onChartTypeChange: (type: \"line\" | \"heatmap\") => void;\n onSelect: (selection: CalendarSelection | null) => void;\n control: ReactNode;\n sideChart?: ReactNode;\n}\n\n/** One set of header controls for both daily-flow views; balance stays live. */\nexport function TransactionsBalanceChart({ accountIds, accounts, transactions, filters, chartType, onChartTypeChange, onSelect, control, sideChart }: Props) {\n const [direction, setDirection] = useState(\"outflow\");\n const [periodDays, setPeriodDays] = useState(90);\n const [year, setYear] = useState(() => (filters.dateFrom ?? filters.dateTo ?? new Date()).getFullYear());\n const from = filters.dateFrom ? toDateString(filters.dateFrom) : undefined;\n const to = filters.dateTo ? toDateString(filters.dateTo) : undefined;\n useEffect(() => {\n const date = from ?? to;\n if (date) setYear(Number(date.slice(0, 4)));\n }, [from, to]);\n\n const years = useMemo(() => {\n const ids = new Set(accountIds);\n return [...new Set([year, new Date().getFullYear(), ...transactions.flatMap(t => {\n const date = calendarDate(t.date);\n return ids.has(t.accountId) && date ? [Number(date.slice(0, 4))] : [];\n })])].sort((a, b) => b - a);\n }, [year, transactions, accountIds]);\n\n // Both views share the chosen accounts, even when the table has no chart scope.\n const activityFilters = { ...filters, accountId: \"all\", accountIds };\n const chart = ;\n\n return \n \n {chartType === \"heatmap\" ? : }\n }\n />;\n}\n" }, { "name": "src/components/transactions/TransferBadge.tsx", "type": "text/plain", "content": "import { ArrowLeftRight, Check, X } from \"lucide-react\";\nimport type { TransferDto } from \"@/lib/api\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * The badge a transfer-matched row gets in place of (or alongside) its\n * category badge. A still-`suggested` match carries inline confirm/reject\n * icons, matching Sure's \"Auto-matched badge\" pattern; a `confirmed` one is\n * just a plain label, there's nothing left to decide.\n */\nexport function TransferBadge({\n suggested,\n onConfirm,\n onReject,\n busy,\n}: {\n /** The pending Transfer this row is a leg of, or undefined if it's already confirmed. */\n suggested?: TransferDto;\n onConfirm: () => void;\n onReject: () => void;\n busy?: boolean;\n}) {\n if (!suggested) {\n return (\n \n \n Transfer\n \n );\n }\n return (\n \n \n Transfer?\n { e.stopPropagation(); onConfirm(); }}\n className={cn(\"rounded-full p-0.5 hover:bg-primary/20 transition-colors\", busy && \"opacity-50\")}\n >\n \n \n { e.stopPropagation(); onReject(); }}\n className={cn(\"rounded-full p-0.5 hover:bg-destructive/20 hover:text-destructive transition-colors\", busy && \"opacity-50\")}\n >\n \n \n \n );\n}\n" }, { "name": "src/components/ui/accordion.tsx", "type": "text/plain", "content": "import * as React from \"react\";\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport { ChevronDown } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Accordion = AccordionPrimitive.Root;\n\nconst AccordionItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nAccordionItem.displayName = \"AccordionItem\";\n\nconst AccordionTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n svg]:rotate-180\",\n className,\n )}\n {...props}\n >\n {children}\n \n \n \n));\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;\n\nconst AccordionContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n
{children}
\n \n));\n\nAccordionContent.displayName = AccordionPrimitive.Content.displayName;\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\n" }, { "name": "src/components/ui/alert-dialog.tsx", "type": "text/plain", "content": "import * as React from \"react\";\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\";\n\nimport { cn } from \"@/lib/utils\";\nimport { buttonVariants } from \"@/components/ui/button\";\n\nconst AlertDialog = AlertDialogPrimitive.Root;\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger;\n\nconst AlertDialogPortal = AlertDialogPrimitive.Portal;\n\nconst AlertDialogOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;\n\nconst AlertDialogContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n \n));\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;\n\nconst AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes) => (\n
\n);\nAlertDialogHeader.displayName = \"AlertDialogHeader\";\n\nconst AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes) => (\n
\n);\nAlertDialogFooter.displayName = \"AlertDialogFooter\";\n\nconst AlertDialogTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;\n\nconst AlertDialogDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nAlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;\n\nconst AlertDialogAction = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;\n\nconst AlertDialogCancel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;\n\nexport {\n AlertDialog,\n AlertDialogPortal,\n AlertDialogOverlay,\n AlertDialogTrigger,\n AlertDialogContent,\n AlertDialogHeader,\n AlertDialogFooter,\n AlertDialogTitle,\n AlertDialogDescription,\n AlertDialogAction,\n AlertDialogCancel,\n};\n" }, { "name": "src/components/ui/alert.tsx", "type": "text/plain", "content": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst alertVariants = cva(\n \"relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground\",\n {\n variants: {\n variant: {\n default: \"bg-background text-foreground\",\n destructive: \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n },\n);\n\nconst Alert = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes & VariantProps\n>(({ className, variant, ...props }, ref) => (\n
\n));\nAlert.displayName = \"Alert\";\n\nconst AlertTitle = React.forwardRef>(\n ({ className, ...props }, ref) => (\n
\n ),\n);\nAlertTitle.displayName = \"AlertTitle\";\n\nconst AlertDescription = React.forwardRef>(\n ({ className, ...props }, ref) => (\n
\n ),\n);\nAlertDescription.displayName = \"AlertDescription\";\n\nexport { Alert, AlertTitle, AlertDescription };\n" }, { "name": "src/components/ui/aspect-ratio.tsx", "type": "text/plain", "content": "import * as AspectRatioPrimitive from \"@radix-ui/react-aspect-ratio\";\n\nconst AspectRatio = AspectRatioPrimitive.Root;\n\nexport { AspectRatio };\n" }, { "name": "src/components/ui/avatar.tsx", "type": "text/plain", "content": "import * as React from \"react\";\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Avatar = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nAvatar.displayName = AvatarPrimitive.Root.displayName;\n\nconst AvatarImage = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nAvatarImage.displayName = AvatarPrimitive.Image.displayName;\n\nconst AvatarFallback = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;\n\nexport { Avatar, AvatarImage, AvatarFallback };\n" }, { "name": "src/components/ui/badge.tsx", "type": "text/plain", "content": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst badgeVariants = cva(\n \"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n {\n variants: {\n variant: {\n default: \"border-transparent bg-primary text-primary-foreground hover:bg-primary/80\",\n secondary: \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n destructive: \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80\",\n outline: \"text-foreground\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n },\n);\n\nexport interface BadgeProps extends React.HTMLAttributes, VariantProps {}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n return
;\n}\n\nexport { Badge, badgeVariants };\n" }, { "name": "src/components/ui/breadcrumb.tsx", "type": "text/plain", "content": "import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Breadcrumb = React.forwardRef<\n HTMLElement,\n React.ComponentPropsWithoutRef<\"nav\"> & {\n separator?: React.ReactNode;\n }\n>(({ ...props }, ref) =>