# Starling Bank
STARLING_ACCESS_TOKEN=<personal_access_token>
STARLING_ACCOUNT_UID=<account_uid>
STARLING_CATEGORY_UID=<default_category_uid>

# Airtable
AIRTABLE_API_KEY=<api_key_or_token>
AIRTABLE_BASE_ID=<base_id>

# N8N (if self-hosted)
N8N_ENCRYPTION_KEY=<encryption_key>
N8N_HOST=<n8n_instance_url>

# Vercel (for deployment)
VERCEL_TOKEN=<deployment_token>
VERCEL_ORG_ID=<org_id>
VERCEL_PROJECT_ID=<project_id>

Name: Groceries
Monthly Limit: 500
Buffer Percentage: 10
Color: green
Icon: 🛒
Active: ✓

Name: Transport
Monthly Limit: 200
Buffer Percentage: 15
Color: blue
Icon: 🚗
Active: ✓

Name: Entertainment
Monthly Limit: 150
Buffer Percentage: 10
Color: purple
Icon: 🎬
Active: ✓

Name: Bills
Monthly Limit: 800
Buffer Percentage: 5
Color: orange
Icon: 📄
Active: ✓

Name: Dining Out
Monthly Limit: 200
Buffer Percentage: 10
Color: red
Icon: 🍽️
Active: ✓

Name: Shopping
Monthly Limit: 300
Buffer Percentage: 15
Color: yellow
Icon: 🛍️
Active: ✓

Period Name: January 2026
Start Date: 2026-01-01
End Date: 2026-01-31
Status: current

Config Key: last_sync_timestamp
Config Value: 2026-01-01T00:00:00Z
Description: Last successful transaction sync from Starling

Config Key: notification_email
Config Value: your-email@example.com
Description: Primary notification email address

Config Key: webhook_secret
Config Value: <generate_random_string>
Description: Secret for validating Starling webhooks

Rule Name: Tesco Groceries
Match Type: merchant
Match Value: TESCO
Target Category: Groceries (link)
Priority: 100
Active: ✓

Rule Name: Sainsbury's Groceries
Match Type: merchant
Match Value: SAINSBURY
Target Category: Groceries (link)
Priority: 100
Active: ✓

Rule Name: Uber Transport
Match Type: merchant
Match Value: UBER
Target Category: Transport (link)
Priority: 90
Active: ✓

Rule Name: Netflix Entertainment
Match Type: merchant
Match Value: NETFLIX
Target Category: Entertainment (link)
Priority: 95
Active: ✓

TABLE_ID_TRANSACTIONS=tbl...
TABLE_ID_CATEGORIES=tbl...
TABLE_ID_PERIODS=tbl...
TABLE_ID_PERFORMANCE=tbl...
TABLE_ID_RULES=tbl...
TABLE_ID_ALERTS=tbl...
TABLE_ID_CONFIG=tbl...

curl -X GET "https://api.starlingbank.com/api/v2/accounts" \
  -H "Authorization: Bearer ${STARLING_ACCESS_TOKEN}" \
  -H "Accept: application/json"

curl -X GET "https://api.starlingbank.com/api/v2/feed/account/${STARLING_ACCOUNT_UID}/category/${STARLING_CATEGORY_UID}" \
  -H "Authorization: Bearer ${STARLING_ACCESS_TOKEN}" \
  -H "Accept: application/json"

AIRTABLE_BASE_ID=<your_base_id>
STARLING_ACCOUNT_UID=<your_account_uid>
STARLING_CATEGORY_UID=<your_category_uid>

# Create project directory
mkdir budget-app
cd budget-app

# Initialize Next.js with TypeScript
npx create-next-app@latest . --typescript --tailwind --app --no-src-dir --import-alias "@/*"

# Install dependencies
npm install @tanstack/react-query axios date-fns
npm install lucide-react recharts
npm install @radix-ui/react-slot @radix-ui/react-dropdown-menu
npm install @radix-ui/react-select @radix-ui/react-dialog
npm install class-variance-authority clsx tailwind-merge

npx shadcn-ui@latest init

# Configuration prompts:
# Style: Default
# Base color: Slate
# CSS variables: Yes

npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
npx shadcn-ui@latest add badge
npx shadcn-ui@latest add table
npx shadcn-ui@latest add dialog
npx shadcn-ui@latest add select
npx shadcn-ui@latest add input
npx shadcn-ui@latest add label
npx shadcn-ui@latest add tabs
npx shadcn-ui@latest add progress
npx shadcn-ui@latest add alert
npx shadcn-ui@latest add dropdown-menu
npx shadcn-ui@latest add separator
npx shadcn-ui@latest add skeleton

budget-app/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   ├── api/
│   │   ├── airtable/
│   │   │   ├── transactions/route.ts
│   │   │   ├── categories/route.ts
│   │   │   ├── performance/route.ts
│   │   │   └── alerts/route.ts
│   │   └── starling/
│   │       └── sync/route.ts
│   ├── dashboard/
│   │   └── page.tsx
│   ├── transactions/
│   │   └── page.tsx
│   └── settings/
│       └── page.tsx
├── components/
│   ├── ui/ (shadcn components)
│   ├── dashboard/
│   │   ├── budget-overview.tsx
│   │   ├── category-status.tsx
│   │   ├── spending-chart.tsx
│   │   └── recent-transactions.tsx
│   ├── transactions/
│   │   ├── transaction-list.tsx
│   │   └── transaction-filters.tsx
│   └── layout/
│       ├── header.tsx
│       └── navigation.tsx
├── lib/
│   ├── airtable.ts
│   ├── starling.ts
│   ├── types.ts
│   └── utils.ts
├── public/
└── .env.local

# Airtable
AIRTABLE_API_KEY=<your_token>
AIRTABLE_BASE_ID=<your_base_id>
NEXT_PUBLIC_AIRTABLE_BASE_ID=<your_base_id>

# Starling Bank
STARLING_ACCESS_TOKEN=<your_token>
STARLING_ACCOUNT_UID=<your_account_uid>
STARLING_CATEGORY_UID=<your_category_uid>

# App
NEXT_PUBLIC_APP_URL=https://budget.devarno.cloud

// Core TypeScript types
export interface Transaction {
  id: string;
  transactionId: string;
  date: string;
  amount: number;
  merchant: string;
  description?: string;
  category?: {
    id: string;
    name: string;
  };
  status: 'settled' | 'pending' | 'declined';
  direction: 'in' | 'out';
  paymentMethod: string;
  notes?: string;
  autoCategorized: boolean;
  createdAt: string;
}

export interface BudgetCategory {
  id: string;
  name: string;
  monthlyLimit: number;
  bufferPercentage: number;
  effectiveLimit: number;
  color: string;
  icon: string;
  active: boolean;
  transactionCount?: number;
}

export interface CategoryPerformance {
  id: string;
  category: {
    id: string;
    name: string;
    icon: string;
    color: string;
  };
  period: {
    id: string;
    name: string;
  };
  totalSpent: number;
  budgetLimit: number;
  remaining: number;
  percentageUsed: number;
  status: 'healthy' | 'warning' | 'exceeded';
}

export interface SpendingPeriod {
  id: string;
  periodName: string;
  startDate: string;
  endDate: string;
  status: 'future' | 'current' | 'closed';
}

export interface Alert {
  id: string;
  timestamp: string;
  alertType: 'warning' | 'critical' | 'daily' | 'info';
  category?: {
    id: string;
    name: string;
  };
  threshold?: number;
  spentAmount?: number;
  message: string;
  acknowledged: boolean;
}

export interface DashboardStats {
  totalBudget: number;
  totalSpent: number;
  totalRemaining: number;
  percentageUsed: number;
  status: 'healthy' | 'warning' | 'critical';
}

import axios from 'axios';

const AIRTABLE_API_URL = 'https://api.airtable.com/v0';
const BASE_ID = process.env.AIRTABLE_BASE_ID || process.env.NEXT_PUBLIC_AIRTABLE_BASE_ID;
const API_KEY = process.env.AIRTABLE_API_KEY;

const airtableClient = axios.create({
  baseURL: `${AIRTABLE_API_URL}/${BASE_ID}`,
  headers: {
    'Authorization': `Bearer ${API_KEY}`,
    'Content-Type': 'application/json',
  },
});

// Generic function to get records from any table
export async function getRecords(tableName: string, params?: any) {
  try {
    const response = await airtableClient.get(`/${tableName}`, { params });
    return response.data.records;
  } catch (error) {
    console.error(`Error fetching from ${tableName}:`, error);
    throw error;
  }
}

// Generic function to create a record
export async function createRecord(tableName: string, fields: any) {
  try {
    const response = await airtableClient.post(`/${tableName}`, {
      fields,
    });
    return response.data;
  } catch (error) {
    console.error(`Error creating record in ${tableName}:`, error);
    throw error;
  }
}

// Generic function to update a record
export async function updateRecord(tableName: string, recordId: string, fields: any) {
  try {
    const response = await airtableClient.patch(`/${tableName}/${recordId}`, {
      fields,
    });
    return response.data;
  } catch (error) {
    console.error(`Error updating record in ${tableName}:`, error);
    throw error;
  }
}

// Specialized functions
export async function getTransactions(filterFormula?: string) {
  const params = filterFormula ? { filterByFormula: filterFormula } : {};
  return getRecords('Transactions', params);
}

export async function getCategories() {
  return getRecords('Budget Categories', {
    filterByFormula: '{Active} = TRUE()',
  });
}

export async function getCurrentPeriod() {
  const records = await getRecords('Spending Periods', {
    filterByFormula: '{Status} = "current"',
    maxRecords: 1,
  });
  return records[0];
}

export async function getCategoryPerformance(periodId: string) {
  return getRecords('Category Performance', {
    filterByFormula: `{Period} = "${periodId}"`,
  });
}

export async function getRecentAlerts(limit: number = 10) {
  return getRecords('Alert History', {
    maxRecords: limit,
    sort: [{ field: 'Timestamp', direction: 'desc' }],
  });
}

import axios from 'axios';

const STARLING_API_URL = 'https://api.starlingbank.com/api/v2';
const ACCESS_TOKEN = process.env.STARLING_ACCESS_TOKEN;
const ACCOUNT_UID = process.env.STARLING_ACCOUNT_UID;
const CATEGORY_UID = process.env.STARLING_CATEGORY_UID;

const starlingClient = axios.create({
  baseURL: STARLING_API_URL,
  headers: {
    'Authorization': `Bearer ${ACCESS_TOKEN}`,
    'Accept': 'application/json',
  },
});

export async function getTransactions(changesSince?: string) {
  try {
    const params = changesSince ? { changesSince } : {};
    const response = await starlingClient.get(
      `/feed/account/${ACCOUNT_UID}/category/${CATEGORY_UID}`,
      { params }
    );
    return response.data.feedItems;
  } catch (error) {
    console.error('Error fetching Starling transactions:', error);
    throw error;
  }
}

export async function getBalance() {
  try {
    const response = await starlingClient.get(
      `/accounts/${ACCOUNT_UID}/balance`
    );
    return response.data;
  } catch (error) {
    console.error('Error fetching Starling balance:', error);
    throw error;
  }
}

export async function getAccount() {
  try {
    const response = await starlingClient.get('/accounts');
    return response.data.accounts[0];
  } catch (error) {
    console.error('Error fetching Starling account:', error);
    throw error;
  }
}

import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

export function formatCurrency(amount: number): string {
  return new Intl.NumberFormat('en-GB', {
    style: 'currency',
    currency: 'GBP',
  }).format(Math.abs(amount) / 100); // Starling amounts are in pence
}

export function formatDate(dateString: string): string {
  return new Date(dateString).toLocaleDateString('en-GB', {
    day: 'numeric',
    month: 'short',
    year: 'numeric',
  });
}

export function formatDateTime(dateString: string): string {
  return new Date(dateString).toLocaleString('en-GB', {
    day: 'numeric',
    month: 'short',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  });
}

export function getStatusColor(status: 'healthy' | 'warning' | 'exceeded'): string {
  const colors = {
    healthy: 'text-green-600',
    warning: 'text-yellow-600',
    exceeded: 'text-red-600',
  };
  return colors[status];
}

export function getStatusBadgeVariant(status: 'healthy' | 'warning' | 'exceeded'): 'default' | 'secondary' | 'destructive' {
  const variants = {
    healthy: 'default' as const,
    warning: 'secondary' as const,
    exceeded: 'destructive' as const,
  };
  return variants[status];
}

import { NextRequest, NextResponse } from 'next/server';
import { getTransactions } from '@/lib/airtable';

export async function GET(request: NextRequest) {
  try {
    const searchParams = request.nextUrl.searchParams;
    const limit = searchParams.get('limit');
    const categoryId = searchParams.get('categoryId');
    
    let filterFormula = '';
    if (categoryId) {
      filterFormula = `{Category} = "${categoryId}"`;
    }
    
    const records = await getTransactions(filterFormula);
    
    const transactions = records.map((record: any) => ({
      id: record.id,
      transactionId: record.fields['Transaction ID'],
      date: record.fields.Date,
      amount: record.fields.Amount,
      merchant: record.fields.Merchant,
      description: record.fields.Description,
      category: record.fields.Category ? {
        id: record.fields.Category[0],
        name: record.fields['Category Name'] || '',
      } : undefined,
      status: record.fields.Status,
      direction: record.fields.Direction,
      paymentMethod: record.fields['Payment Method'],
      notes: record.fields.Notes,
      autoCategorized: record.fields['Auto Categorized'] || false,
      createdAt: record.fields['Created At'],
    }));
    
    const limitedTransactions = limit 
      ? transactions.slice(0, parseInt(limit)) 
      : transactions;
    
    return NextResponse.json(limitedTransactions);
  } catch (error) {
    console.error('Error in transactions API:', error);
    return NextResponse.json(
      { error: 'Failed to fetch transactions' },
      { status: 500 }
    );
  }
}

import { NextResponse } from 'next/server';
import { getCategories } from '@/lib/airtable';

export async function GET() {
  try {
    const records = await getCategories();
    
    const categories = records.map((record: any) => ({
      id: record.id,
      name: record.fields.Name,
      monthlyLimit: record.fields['Monthly Limit'],
      bufferPercentage: record.fields['Buffer Percentage'],
      effectiveLimit: record.fields['Effective Limit'],
      color: record.fields.Color,
      icon: record.fields.Icon,
      active: record.fields.Active,
    }));
    
    return NextResponse.json(categories);
  } catch (error) {
    console.error('Error in categories API:', error);
    return NextResponse.json(
      { error: 'Failed to fetch categories' },
      { status: 500 }
    );
  }
}

import { NextResponse } from 'next/server';
import { getCurrentPeriod, getCategoryPerformance } from '@/lib/airtable';

export async function GET() {
  try {
    const period = await getCurrentPeriod();
    if (!period) {
      return NextResponse.json(
        { error: 'No current period found' },
        { status: 404 }
      );
    }
    
    const records = await getCategoryPerformance(period.id);
    
    const performance = records.map((record: any) => ({
      id: record.id,
      category: {
        id: record.fields.Category?.[0],
        name: record.fields['Category Name'] || '',
        icon: record.fields['Category Icon'] || '',
        color: record.fields['Category Color'] || '',
      },
      period: {
        id: period.id,
        name: period.fields['Period Name'],
      },
      totalSpent: record.fields['Total Spent'] || 0,
      budgetLimit: record.fields['Budget Limit']?.[0] || 0,
      remaining: record.fields.Remaining || 0,
      percentageUsed: record.fields['Percentage Used'] || 0,
      status: record.fields.Status || 'healthy',
    }));
    
    return NextResponse.json(performance);
  } catch (error) {
    console.error('Error in performance API:', error);
    return NextResponse.json(
      { error: 'Failed to fetch performance data' },
      { status: 500 }
    );
  }
}

import { NextResponse } from 'next/server';
import { getRecentAlerts } from '@/lib/airtable';

export async function GET() {
  try {
    const records = await getRecentAlerts(10);
    
    const alerts = records.map((record: any) => ({
      id: record.id,
      timestamp: record.fields.Timestamp,
      alertType: record.fields['Alert Type'],
      category: record.fields.Category ? {
        id: record.fields.Category[0],
        name: record.fields['Category Name'] || '',
      } : undefined,
      threshold: record.fields.Threshold,
      spentAmount: record.fields['Spent Amount'],
      message: record.fields.Message,
      acknowledged: record.fields.Acknowledged || false,
    }));
    
    return NextResponse.json(alerts);
  } catch (error) {
    console.error('Error in alerts API:', error);
    return NextResponse.json(
      { error: 'Failed to fetch alerts' },
      { status: 500 }
    );
  }
}

'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { TrendingUp, TrendingDown, DollarSign, Target } from 'lucide-react';
import { formatCurrency } from '@/lib/utils';
import type { DashboardStats } from '@/lib/types';

interface BudgetOverviewProps {
  stats: DashboardStats;
}

export function BudgetOverview({ stats }: BudgetOverviewProps) {
  const statusConfig = {
    healthy: { color: 'bg-green-500', label: 'On Track', icon: TrendingUp },
    warning: { color: 'bg-yellow-500', label: 'Warning', icon: TrendingUp },
    critical: { color: 'bg-red-500', label: 'Over Budget', icon: TrendingDown },
  };

  const config = statusConfig[stats.status];
  const Icon = config.icon;

  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Total Budget</CardTitle>
          <Target className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{formatCurrency(stats.totalBudget)}</div>
          <p className="text-xs text-muted-foreground">This month's budget</p>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Total Spent</CardTitle>
          <DollarSign className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{formatCurrency(stats.totalSpent)}</div>
          <p className="text-xs text-muted-foreground">
            {stats.percentageUsed.toFixed(1)}% of budget
          </p>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Remaining</CardTitle>
          <TrendingUp className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{formatCurrency(stats.totalRemaining)}</div>
          <p className="text-xs text-muted-foreground">
            {(100 - stats.percentageUsed).toFixed(1)}% available
          </p>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Status</CardTitle>
          <Icon className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <Badge className={`${config.color} text-white`}>
            {config.label}
          </Badge>
          <p className="text-xs text-muted-foreground mt-2">Overall budget health</p>
        </CardContent>
      </Card>
    </div>
  );
}

'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import { Badge } from '@/components/ui/badge';
import { formatCurrency, getStatusBadgeVariant } from '@/lib/utils';
import type { CategoryPerformance } from '@/lib/types';

interface CategoryStatusProps {
  performance: CategoryPerformance[];
}

export function CategoryStatus({ performance }: CategoryStatusProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Category Breakdown</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-6">
          {performance.map((item) => (
            <div key={item.id} className="space-y-2">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <span className="text-2xl">{item.category.icon}</span>
                  <span className="font-medium">{item.category.name}</span>
                </div>
                <Badge variant={getStatusBadgeVariant(item.status)}>
                  {item.status}
                </Badge>
              </div>
              <div className="flex items-center justify-between text-sm text-muted-foreground">
                <span>
                  {formatCurrency(item.totalSpent)} / {formatCurrency(item.budgetLimit)}
                </span>
                <span>{item.percentageUsed.toFixed(0)}%</span>
              </div>
              <Progress value={item.percentageUsed} className="h-2" />
              <div className="text-xs text-muted-foreground">
                {formatCurrency(item.remaining)} remaining
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}

'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  Legend,
} from 'recharts';
import type { CategoryPerformance } from '@/lib/types';

interface SpendingChartProps {
  performance: CategoryPerformance[];
}

export function SpendingChart({ performance }: SpendingChartProps) {
  const chartData = performance.map((item) => ({
    name: item.category.name,
    spent: item.totalSpent / 100, // Convert pence to pounds
    budget: item.budgetLimit / 100,
  }));

  return (
    <Card>
      <CardHeader>
        <CardTitle>Spending Overview</CardTitle>
      </CardHeader>
      <CardContent>
        <ResponsiveContainer width="100%" height={300}>
          <BarChart data={chartData}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="name" />
            <YAxis />
            <Tooltip
              formatter={(value: number) => `£${value.toFixed(2)}`}
            />
            <Legend />
            <Bar dataKey="spent" fill="#8884d8" name="Spent" />
            <Bar dataKey="budget" fill="#82ca9d" name="Budget" />
          </BarChart>
        </ResponsiveContainer>
      </CardContent>
    </Card>
  );
}

'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { formatCurrency, formatDate } from '@/lib/utils';
import type { Transaction } from '@/lib/types';
import { ArrowUpRight, ArrowDownRight } from 'lucide-react';

interface RecentTransactionsProps {
  transactions: Transaction[];
}

export function RecentTransactions({ transactions }: RecentTransactionsProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Recent Transactions</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {transactions.map((transaction) => (
            <div
              key={transaction.id}
              className="flex items-center justify-between border-b pb-3 last:border-0"
            >
              <div className="flex items-center gap-3">
                {transaction.direction === 'out' ? (
                  <ArrowUpRight className="h-5 w-5 text-red-500" />
                ) : (
                  <ArrowDownRight className="h-5 w-5 text-green-500" />
                )}
                <div>
                  <p className="font-medium">{transaction.merchant}</p>
                  <p className="text-sm text-muted-foreground">
                    {formatDate(transaction.date)}
                  </p>
                </div>
              </div>
              <div className="text-right">
                <p className={`font-medium ${
                  transaction.direction === 'out' 
                    ? 'text-red-600' 
                    : 'text-green-600'
                }`}>
                  {transaction.direction === 'out' ? '-' : '+'}
                  {formatCurrency(transaction.amount)}
                </p>
                {transaction.category && (
                  <Badge variant="outline" className="mt-1">
                    {transaction.category.name}
                  </Badge>
                )}
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}

import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
import { cn } from '@/lib/utils';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: 'Budget Tracker | Starling',
  description: 'Personal budget management system',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={cn('min-h-screen bg-background antialiased', inter.className)}>
        {children}
      </body>
    </html>
  );
}

import { redirect } from 'next/navigation';

export default function Home() {
  redirect('/dashboard');
}

import { Suspense } from 'react';
import { BudgetOverview } from '@/components/dashboard/budget-overview';
import { CategoryStatus } from '@/components/dashboard/category-status';
import { SpendingChart } from '@/components/dashboard/spending-chart';
import { RecentTransactions } from '@/components/dashboard/recent-transactions';
import { Card, CardContent } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';

async function getDashboardData() {
  const baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000';
  
  const [performance, transactions] = await Promise.all([
    fetch(`${baseUrl}/api/airtable/performance`, { 
      cache: 'no-store' 
    }).then(res => res.json()),
    fetch(`${baseUrl}/api/airtable/transactions?limit=10`, { 
      cache: 'no-store' 
    }).then(res => res.json()),
  ]);

  // Calculate dashboard stats
  const totalBudget = performance.reduce((sum: number, item: any) => 
    sum + item.budgetLimit, 0
  );
  const totalSpent = performance.reduce((sum: number, item: any) => 
    sum + item.totalSpent, 0
  );
  const totalRemaining = totalBudget - totalSpent;
  const percentageUsed = totalBudget > 0 ? (totalSpent / totalBudget) * 100 : 0;
  
  let status: 'healthy' | 'warning' | 'critical' = 'healthy';
  if (percentageUsed >= 100) status = 'critical';
  else if (percentageUsed >= 80) status = 'warning';

  return {
    stats: {
      totalBudget,
      totalSpent,
      totalRemaining,
      percentageUsed,
      status,
    },
    performance,
    transactions,
  };
}

export default async function DashboardPage() {
  const data = await getDashboardData();

  return (
    <div className="container mx-auto p-6 space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Budget Dashboard</h1>
          <p className="text-muted-foreground">
            Track your spending and manage your budgets
          </p>
        </div>
      </div>

      <BudgetOverview stats={data.stats} />

      <div className="grid gap-6 md:grid-cols-2">
        <CategoryStatus performance={data.performance} />
        <RecentTransactions transactions={data.transactions} />
      </div>

      <SpendingChart performance={data.performance} />
    </div>
  );
}

# Run development server
npm run dev

# Open browser
# Navigate to http://localhost:3000
# Verify dashboard loads and displays data from Airtable

# Build for production
npm run build

# Test production build
npm start

git init
git add .
git commit -m "Initial commit: Budget tracker MVA"

# Create new repo on GitHub: budget-tracker
git remote add origin https://github.com/YOUR_USERNAME/budget-tracker.git
git branch -M main
git push -u origin main

# Install Vercel CLI
npm i -g vercel

# Login
vercel login

# Deploy
vercel --prod

# Set custom domain
vercel domains add budget.devarno.cloud

curl https://budget.devarno.cloud/api/airtable/categories

{
  "name": "WF-001: Transaction Polling",
  "nodes": [
    {
      "parameters": {
        "rule": {
          "interval": [
            {
              "field": "minutes",
              "minutesInterval": 5
            }
          ]
        }
      },
      "name": "Every 5 Minutes",
      "type": "n8n-nodes-base.scheduleTrigger",
      "typeVersion": 1,
      "position": [250, 300]
    },
    {
      "parameters": {
        "operation": "read",
        "base": "={{ $env.AIRTABLE_BASE_ID }}",
        "table": "System Config",
        "filterByFormula": "{Config Key} = 'last_sync_timestamp'",
        "returnAll": false,
        "limit": 1
      },
      "name": "Get Last Sync Time",
      "type": "n8n-nodes-base.airtable",
      "typeVersion": 1,
      "position": [450, 300],
      "credentials": {
        "airtableApi": {
          "id": "1",
          "name": "Budget Tracker Airtable"
        }
      }
    },
    {
      "parameters": {
        "url": "=https://api.starlingbank.com/api/v2/feed/account/{{ $env.STARLING_ACCOUNT_UID }}/category/{{ $env.STARLING_CATEGORY_UID }}",
        "authentication": "predefinedCredentialType",
        "nodeCredentialType": "starlingBankApi",
        "qs": {
          "parameter": [
            {
              "name": "changesSince",
              "value": "={{ $json.fields['Config Value'] }}"
            }
          ]
        },
        "options": {}
      },
      "name": "Get Starling Transactions",
      "type": "n8n-nodes-base.httpRequest",
      "typeVersion": 3,
      "position": [650, 300],
      "credentials": {
        "httpHeaderAuth": {
          "id": "2",
          "name": "Starling Bank API"
        }
      }
    },
    {
      "parameters": {
        "conditions": {
          "number": [
            {
              "value1": "={{ $json.feedItems.length }}",
              "operation": "larger",
              "value2": 0
            }
          ]
        }
      },
      "name": "Has New Transactions?",
      "type": "n8n-nodes-base.if",
      "typeVersion": 1,
      "position": [850, 300]
    },
    {
      "parameters": {
        "functionCode": "const transactions = $input.first().json.feedItems;\nconst output = [];\n\nfor (const txn of transactions) {\n  output.push({\n    json: {\n      transactionId: txn.feedItemUid,\n      date: txn.transactionTime,\n      amount: txn.amount.minorUnits,\n      currency: txn.amount.currency,\n      merchant: txn.counterPartyName || 'Unknown',\n      description: txn.reference || '',\n      status: txn.status.toLowerCase(),\n      direction: txn.direction.toLowerCase(),\n      paymentMethod: txn.spendingCategory || 'other',\n      rawData: JSON.stringify(txn)\n    }\n  });\n}\n\nreturn output;"
      },
      "name": "Transform Transactions",
      "type": "n8n-nodes-base.function",
      "typeVersion": 1,
      "position": [1050, 300]
    },
    {
      "parameters": {
        "batchSize": 10,
        "options": {}
      },
      "name": "Split in Batches",
      "type": "n8n-nodes-base.splitInBatches",
      "typeVersion": 1,
      "position": [1250, 300]
    },
    {
      "parameters": {
        "operation": "search",
        "base": "={{ $env.AIRTABLE_BASE_ID }}",
        "table": "Transactions",
        "filterByFormula": "={Transaction ID} = \"{{ $json.transactionId }}\"",
        "returnAll": true
      },
      "name": "Check if Exists",
      "type": "n8n-nodes-base.airtable",
      "typeVersion": 1,
      "position": [1450, 300],
      "credentials": {
        "airtableApi": {
          "id": "1",
          "name": "Budget Tracker Airtable"
        }
      }
    },
    {
      "parameters": {
        "conditions": {
          "number": [
            {
              "value1": "={{ $json.length }}",
              "operation": "equal",
              "value2": 0
            }
          ]
        }
      },
      "name": "Is New?",
      "type": "n8n-nodes-base.if",
      "typeVersion": 1,
      "position": [1650, 300]
    },
    {
      "parameters": {
        "operation": "create",
        "base": "={{ $env.AIRTABLE_BASE_ID }}",
        "table": "Transactions",
        "fields": {
          "field": [
            {
              "fieldName": "Transaction ID",
              "fieldValue": "={{ $node[\"Transform Transactions\"].json.transactionId }}"
            },
            {
              "fieldName": "Date",
              "fieldValue": "={{ $node[\"Transform Transactions\"].json.date }}"
            },
            {
              "fieldName": "Amount",
              "fieldValue": "={{ $node[\"Transform Transactions\"].json.amount }}"
            },
            {
              "fieldName": "Merchant",
              "fieldValue": "={{ $node[\"Transform Transactions\"].json.merchant }}"
            },
            {
              "fieldName": "Description",
              "fieldValue": "={{ $node[\"Transform Transactions\"].json.description }}"
            },
            {
              "fieldName": "Status",
              "fieldValue": "={{ $node[\"Transform Transactions\"].json.status }}"
            },
            {
              "fieldName": "Direction",
              "fieldValue": "={{ $node[\"Transform Transactions\"].json.direction }}"
            },
            {
              "fieldName": "Payment Method",
              "fieldValue": "={{ $node[\"Transform Transactions\"].json.paymentMethod }}"
            },
            {
              "fieldName": "Raw Data",
              "fieldValue": "={{ $node[\"Transform Transactions\"].json.rawData }}"
            }
          ]
        },
        "options": {}
      },
      "name": "Create Transaction",
      "type": "n8n-nodes-base.airtable",
      "typeVersion": 1,
      "position": [1850, 250],
      "credentials": {
        "airtableApi": {
          "id": "1",
          "name": "Budget Tracker Airtable"
        }
      }
    },
    {
      "parameters": {
        "operation": "update",
        "base": "={{ $env.AIRTABLE_BASE_ID }}",
        "table": "System Config",
        "id": "={{ $node[\"Get Last Sync Time\"].json.id }}",
        "fields": {
          "field": [
            {
              "fieldName": "Config Value",
              "fieldValue": "={{ new Date().toISOString() }}"
            }
          ]
        },
        "options": {}
      },
      "name": "Update Sync Timestamp",
      "type": "n8n-nodes-base.airtable",
      "typeVersion": 1,
      "position": [2050, 300],
      "credentials": {
        "airtableApi": {
          "id": "1",
          "name": "Budget Tracker Airtable"
        }
      }
    }
  ],
  "connections": {
    "Every 5 Minutes": {
      "main": [
        [
          {
            "node": "Get Last Sync Time",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Get Last Sync Time": {
      "main": [
        [
          {
            "node": "Get Starling Transactions",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Get Starling Transactions": {
      "main": [
        [
          {
            "node": "Has New Transactions?",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Has New Transactions?": {
      "main": [
        [
          {
            "node": "Transform Transactions",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Transform Transactions": {
      "main": [
        [
          {
            "node": "Split in Batches",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Split in Batches": {
      "main": [
        [
          {
            "node": "Check if Exists",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Check if Exists": {
      "main": [
        [
          {
            "node": "Is New?",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Is New?": {
      "main": [
        [
          {
            "node": "Create Transaction",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Create Transaction": {
      "main": [
        [
          {
            "node": "Split in Batches",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Split in Batches": {
      "main": [
        null,
        [
          {
            "node": "Update Sync Timestamp",
            "type": "main",
            "index": 0
          }
        ]
      ]
    }
  },
  "settings": {
    "executionOrder": "v1"
  },
  "staticData": null,
  "tags": [],
  "triggerCount": 1,
  "updatedAt": "2026-01-07T12:00:00.000Z",
  "versionId": "1"
}