# Implementation Guide

## Phase 1: Project Setup

### 1.1 Initialize Next.js Project

```bash
npx create-next-app@latest influencer-biz --typescript --tailwind --eslint --app --src-dir=false
cd influencer-biz
```

### 1.2 Install Dependencies

```bash
# UI
npm install @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-select
npm install class-variance-authority clsx tailwind-merge lucide-react
npm install framer-motion @use-gesture/react

# Supabase
npm install @supabase/supabase-js @supabase/ssr

# Forms & Validation
npm install react-hook-form @hookform/resolvers zod

# Charts
npm install recharts

# PDF
npm install @react-pdf/renderer

# Date handling
npm install date-fns

# Dev
npm install -D @types/node
```

### 1.3 Initialize shadcn/ui

```bash
npx shadcn@latest init
npx shadcn@latest add button card input select dialog sheet toast badge
```

### 1.4 Setup Supabase

```bash
npm install -g supabase
supabase init
supabase login
supabase link --project-ref YOUR_PROJECT_REF
```

Create `.env.local`:
```
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=xxx
SUPABASE_SERVICE_ROLE_KEY=xxx
```

---

## Phase 2: Authentication

### 2.1 Supabase Client Setup

```typescript
// lib/supabase/client.ts
import { createBrowserClient } from '@supabase/ssr'

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  )
}
```

```typescript
// lib/supabase/server.ts
import { createServerClient, type CookieOptions } from '@supabase/ssr'
import { cookies } from 'next/headers'

export async function createClient() {
  const cookieStore = await cookies()

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll()
        },
        setAll(cookiesToSet) {
          try {
            cookiesToSet.forEach(({ name, value, options }) =>
              cookieStore.set(name, value, options)
            )
          } catch {}
        },
      },
    }
  )
}
```

### 2.2 Auth Middleware

```typescript
// middleware.ts
import { createServerClient } from '@supabase/ssr'
import { NextResponse, type NextRequest } from 'next/server'

export async function middleware(request: NextRequest) {
  let supabaseResponse = NextResponse.next({ request })

  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll()
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value }) => request.cookies.set(name, value))
          supabaseResponse = NextResponse.next({ request })
          cookiesToSet.forEach(({ name, value, options }) =>
            supabaseResponse.cookies.set(name, value, options)
          )
        },
      },
    }
  )

  const { data: { user } } = await supabase.auth.getUser()

  // Redirect unauthenticated users to login
  if (!user && !request.nextUrl.pathname.startsWith('/login') && !request.nextUrl.pathname.startsWith('/auth')) {
    const url = request.nextUrl.clone()
    url.pathname = '/login'
    return NextResponse.redirect(url)
  }

  return supabaseResponse
}

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)'],
}
```

### 2.3 Login Page

```typescript
// app/(auth)/login/page.tsx
'use client'

import { useState } from 'react'
import { createClient } from '@/lib/supabase/client'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'

export default function LoginPage() {
  const [email, setEmail] = useState('')
  const [loading, setLoading] = useState(false)
  const [message, setMessage] = useState('')
  const supabase = createClient()

  const handleMagicLink = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    
    const { error } = await supabase.auth.signInWithOtp({
      email,
      options: {
        emailRedirectTo: `${window.location.origin}/auth/callback`,
      },
    })

    if (error) {
      setMessage(error.message)
    } else {
      setMessage('Kolla din inbox för inloggningslänk!')
    }
    setLoading(false)
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
      <div className="max-w-md w-full p-8 bg-white rounded-lg shadow">
        <h1 className="text-2xl font-bold mb-6">Logga in</h1>
        
        <form onSubmit={handleMagicLink} className="space-y-4">
          <Input
            type="email"
            placeholder="din@email.se"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            required
          />
          <Button type="submit" className="w-full" disabled={loading}>
            {loading ? 'Skickar...' : 'Skicka inloggningslänk'}
          </Button>
        </form>

        {message && (
          <p className="mt-4 text-sm text-center text-gray-600">{message}</p>
        )}
      </div>
    </div>
  )
}
```

---

## Phase 3: Core Types

```typescript
// types/index.ts

export type TransactionCategory = 
  | 'uncategorized'
  | 'business_income'
  | 'business_expense'
  | 'private'
  | 'tax_payment'
  | 'vat_payment'
  | 'transfer'

export type ExpenseType =
  | 'equipment'
  | 'software'
  | 'travel'
  | 'meals'
  | 'office'
  | 'marketing'
  | 'professional_services'
  | 'other'

export type CustomerType =
  | 'individual'
  | 'swedish_business'
  | 'eu_business'
  | 'non_eu_business'

export type InvoiceStatus =
  | 'draft'
  | 'sent'
  | 'viewed'
  | 'paid'
  | 'overdue'
  | 'cancelled'

export type VatTreatment =
  | 'standard'
  | 'reverse_charge'
  | 'export'
  | 'exempt'

export interface Profile {
  id: string
  email: string
  full_name: string | null
}

export interface CompanySettings {
  id: string
  user_id: string
  company_name: string
  org_number: string | null
  vat_number: string | null
  f_skatt_registered: boolean
  vat_registered: boolean
  address_line1: string | null
  city: string | null
  postal_code: string | null
  municipal_tax_rate: number
  payment_terms_days: number
  next_invoice_number: number
  bank_name: string | null
  clearing_number: string | null
  account_number: string | null
}

export interface Transaction {
  id: string
  user_id: string
  booking_date: string
  amount: number
  currency: string
  description: string | null
  counterparty_name: string | null
  category: TransactionCategory
  expense_type: ExpenseType | null
  notes: string | null
}

export interface Customer {
  id: string
  user_id: string
  customer_type: CustomerType
  name: string
  email: string | null
  org_number: string | null
  vat_number: string | null
  vat_number_validated: boolean
  address_line1: string | null
  city: string | null
  postal_code: string | null
  country: string
}

export interface Invoice {
  id: string
  user_id: string
  customer_id: string
  invoice_number: string
  invoice_date: string
  due_date: string
  subtotal: number
  vat_amount: number
  total: number
  currency: string
  vat_treatment: VatTreatment
  vat_rate: number
  reverse_charge_text: string | null
  status: InvoiceStatus
  customer?: Customer
  items?: InvoiceItem[]
}

export interface InvoiceItem {
  id: string
  invoice_id: string
  description: string
  quantity: number
  unit: string
  unit_price: number
  line_total: number
}

export interface TaxBreakdown {
  grossIncome: number
  deductibleExpenses: number
  netIncome: number
  egenavgifter: number
  incomeTax: number
  vatCollected: number
  vatDeductible: number
  vatPayable: number
  totalLocked: number
  disponibelt: number
}
```

---

## Phase 4: Tax Calculator

```typescript
// lib/tax/calculator.ts

import type { TaxBreakdown, CompanySettings, Transaction } from '@/types'

// Current rates (should come from tax_rates table)
const RATES = {
  egenavgifter: 0.2897,           // 28.97% for enskild firma
  arbetsgivaravgifter: 0.3142,    // 31.42% for AB
  bolagsskatt: 0.206,             // 20.6% corporate tax
  defaultMunicipalTax: 0.32       // ~32% average
}

const MAX_PERIODISERINGSFOND_RATE = 0.30

export function calculateTaxBreakdown(
  transactions: Transaction[],
  settings: CompanySettings,
  salaryPayments?: SalaryPayment[],  // For AB
  options?: { usePeriodiseringsfond?: boolean }
): TaxBreakdown {
  const grossIncome = transactions
    .filter(t => t.category === 'business_income' && t.amount > 0)
    .reduce((sum, t) => sum + t.amount, 0)

  const deductibleExpenses = transactions
    .filter(t => t.category === 'business_expense' && t.amount < 0)
    .reduce((sum, t) => sum + Math.abs(t.amount), 0)

  // Branch based on entity type
  if (settings.entity_type === 'aktiebolag') {
    return calculateABTax(grossIncome, deductibleExpenses, salaryPayments || [], settings, options)
  } else {
    return calculateEnskildFirmaTax(grossIncome, deductibleExpenses, settings, options)
  }
}

function calculateEnskildFirmaTax(
  grossIncome: number,
  deductibleExpenses: number,
  settings: CompanySettings,
  options?: { usePeriodiseringsfond?: boolean }
): TaxBreakdown {
  let netIncome = grossIncome - deductibleExpenses

  // Optional periodiseringsfond
  let periodiseringsfondAvsattning = 0
  if (options?.usePeriodiseringsfond && netIncome > 0) {
    periodiseringsfondAvsattning = netIncome * MAX_PERIODISERINGSFOND_RATE
    netIncome -= periodiseringsfondAvsattning
  }

  // Egenavgifter on net income
  const egenavgifter = netIncome > 0 ? netIncome * RATES.egenavgifter : 0

  // Taxable income after egenavgifter deduction
  const taxableIncome = netIncome - egenavgifter

  // Income tax
  const taxRate = (settings.municipal_tax_rate || 32) / 100
  const incomeTax = taxableIncome > 0 ? taxableIncome * taxRate : 0

  // VAT (simplified)
  const { vatCollected, vatDeductible, vatPayable } = calculateVAT(grossIncome, deductibleExpenses, settings)

  const totalLocked = egenavgifter + incomeTax + Math.max(0, vatPayable)
  const disponibelt = Math.max(0, grossIncome - deductibleExpenses - totalLocked)

  return {
    entityType: 'enskild_firma',
    grossIncome,
    deductibleExpenses,
    netIncome: netIncome + periodiseringsfondAvsattning,
    periodiseringsfondAvsattning,
    egenavgifter: Math.round(egenavgifter),
    incomeTax: Math.round(incomeTax),
    vatCollected: Math.round(vatCollected),
    vatDeductible: Math.round(vatDeductible),
    vatPayable: Math.round(vatPayable),
    totalLocked: Math.round(totalLocked),
    disponibelt: Math.round(disponibelt),
  }
}

function calculateABTax(
  grossIncome: number,
  deductibleExpenses: number,
  salaryPayments: SalaryPayment[],
  settings: CompanySettings,
  options?: { usePeriodiseringsfond?: boolean }
): TaxBreakdown {
  // Sum salary costs (these are deductible for the company)
  const totalSalaryCost = salaryPayments.reduce((sum, s) => sum + s.total_cost, 0)
  const totalWithheldTax = salaryPayments.reduce((sum, s) => sum + s.withheld_tax, 0)
  const totalArbetsgivaravgifter = salaryPayments.reduce((sum, s) => sum + s.employer_contributions, 0)

  // Company profit = income - expenses - salary costs
  let companyProfit = grossIncome - deductibleExpenses - totalSalaryCost

  // Optional periodiseringsfond for AB
  let periodiseringsfondAvsattning = 0
  if (options?.usePeriodiseringsfond && companyProfit > 0) {
    // AB can defer 25% (not 30%) - different rule
    periodiseringsfondAvsattning = companyProfit * 0.25
    companyProfit -= periodiseringsfondAvsattning
  }

  // Bolagsskatt on remaining profit
  const bolagsskatt = companyProfit > 0 ? companyProfit * RATES.bolagsskatt : 0

  // VAT
  const { vatCollected, vatDeductible, vatPayable } = calculateVAT(grossIncome, deductibleExpenses, settings)

  // Total locked = bolagsskatt + withheld employee tax + arbetsgivaravgifter + VAT
  const totalLocked = bolagsskatt + totalWithheldTax + totalArbetsgivaravgifter + Math.max(0, vatPayable)

  const disponibelt = Math.max(0, grossIncome - deductibleExpenses - totalLocked)

  return {
    entityType: 'aktiebolag',
    grossIncome,
    deductibleExpenses,
    netIncome: companyProfit + periodiseringsfondAvsattning,
    periodiseringsfondAvsattning,
    // AB-specific fields
    bolagsskatt: Math.round(bolagsskatt),
    salaryCosts: {
      totalGross: salaryPayments.reduce((sum, s) => sum + s.gross_salary, 0),
      totalArbetsgivaravgifter: Math.round(totalArbetsgivaravgifter),
      totalWithheldTax: Math.round(totalWithheldTax),
      totalCost: Math.round(totalSalaryCost)
    },
    vatCollected: Math.round(vatCollected),
    vatDeductible: Math.round(vatDeductible),
    vatPayable: Math.round(vatPayable),
    totalLocked: Math.round(totalLocked),
    disponibelt: Math.round(disponibelt),
  }
}

function calculateVAT(grossIncome: number, expenses: number, settings: CompanySettings) {
  if (!settings.vat_registered) {
    return { vatCollected: 0, vatDeductible: 0, vatPayable: 0 }
  }
  
  // Simplified - real implementation tracks per invoice
  const vatCollected = grossIncome * 0.25
  const vatDeductible = expenses * 0.25
  const vatPayable = vatCollected - vatDeductible
  
  return { vatCollected, vatDeductible, vatPayable }
}
```

---

## Phase 4b: Expense Category Warnings

Swedish tax law is strict about lifestyle expense deductions. The system must warn users.

```typescript
// lib/tax/expense-warnings.ts

interface ExpenseWarning {
  category: string
  severity: 'info' | 'warning' | 'danger'
  message: string
  legalBasis?: string
}

const EXPENSE_WARNINGS: Record<string, ExpenseWarning> = {
  clothing: {
    category: 'Kläder',
    severity: 'danger',
    message: 'Kläder är normalt endast avdragsgilla om de är skyddskläder eller särskilda scenkläder som inte lämpar sig för privat bruk. Kammarrätten har i flera domar nekat avdrag för kläder köpta för videoinspelningar.',
    legalBasis: 'Kammarrätten, praxis om privata levnadskostnader'
  },
  cosmetics: {
    category: 'Smink & Skönhet',
    severity: 'danger', 
    message: 'Smink och skönhetsbehandlingar räknas som privata levnadskostnader även om de används i videoproduktion. Avdrag nekas regelmässigt.',
    legalBasis: 'Skatteverkets ställningstagande'
  },
  gym: {
    category: 'Gym & Träning',
    severity: 'danger',
    message: 'Gymkort och träningskostnader är privata levnadskostnader och ej avdragsgilla, även för fitness-influencers.',
    legalBasis: 'IL 9 kap. 2 §'
  },
  travel_mixed: {
    category: 'Resa (Blandad)',
    severity: 'warning',
    message: 'Resor med inslag av privat karaktär kräver strikt fördelning. Endast den del som är direkt kopplad till intäktsgenererande arbete är avdragsgill.',
    legalBasis: 'Skatteverkets vägledning'
  },
  home_office: {
    category: 'Hemmakontor',
    severity: 'info',
    message: 'Avdrag för arbetsrum i bostaden medges endast om rummet är avskilt och uteslutande används för näringsverksamhet. Schablonavdrag: 2000 kr/år eller faktiska merkostnader.',
    legalBasis: 'Skatteverkets allmänna råd'
  }
}

export function getExpenseWarning(expenseType: string): ExpenseWarning | null {
  return EXPENSE_WARNINGS[expenseType] || null
}
```

---

## Phase 4c: Schablonavdrag System

**Optimal approach:** Default to schablonavdrag (simpler, safer), but allow user to switch to faktiska kostnader if they want to track actual expenses.

```typescript
// lib/tax/schablonavdrag.ts

interface Schablonavdrag {
  type: string
  amount: number
  unit: 'year' | 'km' | 'day' | 'percent'
  description: string
  requiresDocumentation: boolean
}

const SCHABLONAVDRAG: Record<string, Schablonavdrag> = {
  home_office: {
    type: 'hemmakontor',
    amount: 2000,
    unit: 'year',
    description: 'Fast schablonavdrag för arbetsrum i bostad',
    requiresDocumentation: false  // No receipts needed for schablon
  },
  car_business: {
    type: 'bilkostnader',
    amount: 18.50,
    unit: 'km',
    description: 'Schablon för tjänstekörning med egen bil',
    requiresDocumentation: true  // Need mileage log
  },
  car_parking: {
    type: 'parkering',
    amount: 0,  // Actual cost
    unit: 'day',
    description: 'Faktisk kostnad (inget schablon)',
    requiresDocumentation: true
  }
}

interface DeductionChoice {
  useSchablon: boolean
  schablonAmount?: number
  actualAmount?: number
  finalDeduction: number
}

export function calculateDeduction(
  type: string,
  quantity: number,  // km, days, etc.
  actualCost?: number
): DeductionChoice {
  const schablon = SCHABLONAVDRAG[type]
  
  if (!schablon) {
    // No schablon exists, must use actual
    return {
      useSchablon: false,
      actualAmount: actualCost || 0,
      finalDeduction: actualCost || 0
    }
  }

  const schablonTotal = schablon.amount * quantity

  // If user provided actual cost, compare and suggest better option
  if (actualCost !== undefined) {
    const useSchablon = schablonTotal >= actualCost
    return {
      useSchablon,
      schablonAmount: schablonTotal,
      actualAmount: actualCost,
      finalDeduction: Math.max(schablonTotal, actualCost)
    }
  }

  // Default to schablon
  return {
    useSchablon: true,
    schablonAmount: schablonTotal,
    finalDeduction: schablonTotal
  }
}
```

**UI Recommendation:** Show schablon as default with toggle "Använd faktiska kostnader istället" that reveals actual amount input. Display comparison when both are entered.

---

## Phase 4d: F-skatt Warning System

**Optimal approach:** Compare user's preliminary tax (debiterad preliminärskatt) against calculated tax liability. Warn if underpaying (risk of restskatt) or significantly overpaying (unnecessary cash flow impact).

```typescript
// lib/tax/fskatt-warning.ts

interface FskattComparison {
  monthlyPreliminaryTax: number
  yearlyPreliminaryTax: number
  estimatedYearlyTax: number
  difference: number
  status: 'ok' | 'underpaying' | 'overpaying'
  severity: 'info' | 'warning' | 'danger'
  message: string
}

const WARNING_THRESHOLD_PERCENT = 0.15  // 15% difference triggers warning
const DANGER_THRESHOLD_PERCENT = 0.30   // 30% difference is serious

export function compareFskatt(
  monthlyPreliminaryTax: number,
  estimatedYearlyTax: number,
  monthsRemaining: number = 12
): FskattComparison {
  const yearlyPreliminaryTax = monthlyPreliminaryTax * 12
  const difference = estimatedYearlyTax - yearlyPreliminaryTax
  const percentDiff = Math.abs(difference) / estimatedYearlyTax

  if (difference > 0 && percentDiff > DANGER_THRESHOLD_PERCENT) {
    return {
      monthlyPreliminaryTax,
      yearlyPreliminaryTax,
      estimatedYearlyTax,
      difference,
      status: 'underpaying',
      severity: 'danger',
      message: `Du riskerar restskatt på ca ${formatSEK(difference)}. Överväg att höja din F-skatt eller sätta undan ${formatSEK(difference / monthsRemaining)} extra per månad.`
    }
  }

  if (difference > 0 && percentDiff > WARNING_THRESHOLD_PERCENT) {
    return {
      monthlyPreliminaryTax,
      yearlyPreliminaryTax,
      estimatedYearlyTax,
      difference,
      status: 'underpaying',
      severity: 'warning',
      message: `Din beräknade skatt är ${formatSEK(difference)} högre än din preliminärskatt. Håll koll på detta.`
    }
  }

  if (difference < 0 && percentDiff > WARNING_THRESHOLD_PERCENT) {
    return {
      monthlyPreliminaryTax,
      yearlyPreliminaryTax,
      estimatedYearlyTax,
      difference,
      status: 'overpaying',
      severity: 'info',
      message: `Du betalar troligen för mycket i preliminärskatt (ca ${formatSEK(Math.abs(difference))} för mycket). Du kan sänka din F-skatt hos Skatteverket.`
    }
  }

  return {
    monthlyPreliminaryTax,
    yearlyPreliminaryTax,
    estimatedYearlyTax,
    difference,
    status: 'ok',
    severity: 'info',
    message: 'Din preliminärskatt verkar stämma bra med beräknad skatt.'
  }
}
```

**UI Placement:** Show F-skatt comparison in the tax breakdown panel on dashboard. Use color-coded alert (green/yellow/red) based on severity.

---

## Phase 5: VAT Rules Engine

```typescript
// lib/invoice/vat-rules.ts

import type { Customer, CompanySettings, VatTreatment } from '@/types'

export interface VatDecision {
  rate: number
  treatment: VatTreatment
  reverseCharge: boolean
  invoiceText: string | null
  momsRuta: number | null  // Which ruta in momsdeklaration
  requiresPeriodiskSammanstallning: boolean  // Quarterly EU report
}

export function determineVatTreatment(
  customer: Customer,
  settings: CompanySettings
): VatDecision {
  // User not VAT registered - no VAT on any invoice
  if (!settings.vat_registered) {
    return {
      rate: 0,
      treatment: 'exempt',
      reverseCharge: false,
      invoiceText: 'Säljaren är inte momsregistrerad',
      momsRuta: null,
      requiresPeriodiskSammanstallning: false
    }
  }

  switch (customer.customer_type) {
    case 'individual':
    case 'swedish_business':
      return {
        rate: 25,
        treatment: 'standard',
        reverseCharge: false,
        invoiceText: null,
        momsRuta: 5,  // Ruta 05: Momspliktig försäljning
        requiresPeriodiskSammanstallning: false
      }

    case 'eu_business':
      if (customer.vat_number_validated) {
        return {
          rate: 0,
          treatment: 'reverse_charge',
          reverseCharge: true,
          invoiceText: 'Omvänd skattskyldighet / Reverse charge - Article 196 Council Directive 2006/112/EC',
          momsRuta: 39,  // Ruta 39: Tjänsteförsäljning EU
          requiresPeriodiskSammanstallning: true  // Must report quarterly
        }
      }
      // EU business without validated VAT number = charge Swedish VAT
      // VIES validation is REQUIRED before applying reverse charge
      return {
        rate: 25,
        treatment: 'standard',
        reverseCharge: false,
        invoiceText: 'VAT-nummer ej validerat - svensk moms tillämpas',
        momsRuta: 5,
        requiresPeriodiskSammanstallning: false
      }

    case 'non_eu_business':
      return {
        rate: 0,
        treatment: 'export',
        reverseCharge: false,
        invoiceText: 'Export av tjänst - moms utgår ej',
        momsRuta: 40,  // Ruta 40: Export
        requiresPeriodiskSammanstallning: false
      }

    default:
      return {
        rate: 25,
        treatment: 'standard',
        reverseCharge: false,
        invoiceText: null,
        momsRuta: 5,
        requiresPeriodiskSammanstallning: false
      }
  }
}

// VIES validation wrapper
export async function validateVatNumber(vatNumber: string): Promise<{
  valid: boolean
  name?: string
  address?: string
  error?: string
}> {
  // Strip country code if included
  const countryCode = vatNumber.substring(0, 2).toUpperCase()
  const number = vatNumber.substring(2)
  
  // Call VIES SOAP service or use a REST wrapper
  // Example: https://ec.europa.eu/taxation_customs/vies/
  try {
    const response = await fetch(`/api/vat/validate`, {
      method: 'POST',
      body: JSON.stringify({ vat_number: vatNumber })
    })
    return response.json()
  } catch (error) {
    return { valid: false, error: 'VIES service unavailable' }
  }
}
```

### Momsdeklaration Ruta Reference

| Ruta | Swedish Name | When Used |
|------|--------------|-----------|
| 05 | Momspliktig försäljning | Swedish domestic sales with VAT |
| 39 | Varor och tjänster till EU | EU B2B with reverse charge |
| 40 | Omsättning vid export | Non-EU (export) sales |
| 21 | Inköp av tjänster från EU | Service purchases from EU (fiktiv moms input) |
| 48 | Utgående moms på inköp | Output VAT on foreign purchases |

### Fiktiv Moms for Foreign Purchases

```typescript
// lib/tax/fiktiv-moms.ts

interface FiktivMomsResult {
  purchaseAmount: number
  vatAmount: number
  bookings: Array<{
    account: string
    debit?: number
    credit?: number
  }>
}

export function calculateFiktivMoms(
  amount: number,
  supplierCountry: string,
  vatRate: number = 25
): FiktivMomsResult {
  const vatAmount = amount * (vatRate / 100)
  
  return {
    purchaseAmount: amount,
    vatAmount,
    bookings: [
      // Debit: Ingående moms utländskt förvärv
      { account: '2645', debit: vatAmount },
      // Credit: Utgående moms utländskt förvärv  
      { account: '2614', credit: vatAmount }
    ]
  }
}
```

---

## Phase 6: Key Components

### 6.1 Balance Card

```typescript
// components/dashboard/BalanceCard.tsx
'use client'

import { useState } from 'react'
import { Card, CardContent } from '@/components/ui/card'
import { ChevronDown, ChevronUp } from 'lucide-react'
import type { TaxBreakdown } from '@/types'

interface BalanceCardProps {
  breakdown: TaxBreakdown
  totalBalance: number
}

export function BalanceCard({ breakdown, totalBalance }: BalanceCardProps) {
  const [expanded, setExpanded] = useState(false)

  const lockedPercentage = totalBalance > 0 
    ? (breakdown.totalLocked / totalBalance) * 100 
    : 0

  return (
    <Card className="bg-gradient-to-br from-primary-50 to-white">
      <CardContent className="pt-6">
        <p className="text-sm text-gray-500 uppercase tracking-wide">
          Disponibelt att spendera
        </p>
        
        <p className="text-4xl font-bold text-gray-900 mt-2">
          {formatSEK(breakdown.disponibelt)}
        </p>

        <div className="mt-6">
          <p className="text-sm text-gray-500 mb-2">
            Total: {formatSEK(totalBalance)}
          </p>
          
          <div className="h-3 bg-gray-200 rounded-full overflow-hidden">
            <div 
              className="h-full bg-primary-500 transition-all duration-500"
              style={{ width: `${100 - lockedPercentage}%` }}
            />
          </div>
          
          <div className="flex justify-between text-xs text-gray-500 mt-1">
            <span>Disponibelt {(100 - lockedPercentage).toFixed(0)}%</span>
            <span>Låst för skatt {lockedPercentage.toFixed(0)}%</span>
          </div>
        </div>

        <button
          onClick={() => setExpanded(!expanded)}
          className="flex items-center gap-1 text-sm text-primary-600 mt-4 hover:text-primary-700"
        >
          {expanded ? 'Dölj' : 'Visa'} skatteberäkning
          {expanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
        </button>

        {expanded && (
          <div className="mt-4 pt-4 border-t space-y-2 text-sm">
            <Row label="Intäkter" value={breakdown.grossIncome} />
            <Row label="- Avdragsgilla kostnader" value={-breakdown.deductibleExpenses} />
            <Row label="= Resultat" value={breakdown.netIncome} bold />
            <div className="h-2" />
            <Row label="Egenavgifter (28,97%)" value={-breakdown.egenavgifter} />
            <Row label="Inkomstskatt" value={-breakdown.incomeTax} />
            {breakdown.vatPayable > 0 && (
              <Row label="Moms att betala" value={-breakdown.vatPayable} />
            )}
            <Row label="= Låst för skatt" value={breakdown.totalLocked} bold />
            
            <p className="text-xs text-gray-400 mt-4">
              ⓘ Detta är en uppskattning. Faktisk skatt kan variera.
            </p>
          </div>
        )}
      </CardContent>
    </Card>
  )
}

function Row({ label, value, bold }: { label: string; value: number; bold?: boolean }) {
  return (
    <div className={`flex justify-between ${bold ? 'font-semibold' : ''}`}>
      <span>{label}</span>
      <span className={value < 0 ? 'text-red-600' : ''}>
        {formatSEK(value)}
      </span>
    </div>
  )
}

function formatSEK(amount: number): string {
  return new Intl.NumberFormat('sv-SE', {
    style: 'currency',
    currency: 'SEK',
    minimumFractionDigits: 0,
    maximumFractionDigits: 0,
  }).format(amount)
}
```

### 6.2 Swipe Card

```typescript
// components/transactions/SwipeCard.tsx
'use client'

import { useState } from 'react'
import { motion, useMotionValue, useTransform, PanInfo } from 'framer-motion'
import { Card } from '@/components/ui/card'
import type { Transaction, TransactionCategory } from '@/types'

interface SwipeCardProps {
  transaction: Transaction
  onCategorize: (id: string, category: TransactionCategory) => void
  onSkip: () => void
}

export function SwipeCard({ transaction, onCategorize, onSkip }: SwipeCardProps) {
  const x = useMotionValue(0)
  const rotate = useTransform(x, [-200, 200], [-15, 15])
  const opacity = useTransform(x, [-200, -100, 0, 100, 200], [0.5, 1, 1, 1, 0.5])
  
  const businessOpacity = useTransform(x, [0, 100], [0, 1])
  const privateOpacity = useTransform(x, [-100, 0], [1, 0])

  const handleDragEnd = (_: any, info: PanInfo) => {
    const threshold = 100

    if (info.offset.x > threshold) {
      onCategorize(transaction.id, 'business_expense')
    } else if (info.offset.x < -threshold) {
      onCategorize(transaction.id, 'private')
    }
  }

  return (
    <div className="relative">
      {/* Background indicators */}
      <motion.div 
        className="absolute inset-0 bg-green-100 rounded-lg flex items-center justify-end pr-8"
        style={{ opacity: businessOpacity }}
      >
        <span className="text-green-700 font-medium">Företag →</span>
      </motion.div>
      
      <motion.div 
        className="absolute inset-0 bg-gray-100 rounded-lg flex items-center pl-8"
        style={{ opacity: privateOpacity }}
      >
        <span className="text-gray-700 font-medium">← Privat</span>
      </motion.div>

      {/* Swipeable card */}
      <motion.div
        drag="x"
        dragConstraints={{ left: 0, right: 0 }}
        onDragEnd={handleDragEnd}
        style={{ x, rotate, opacity }}
        className="cursor-grab active:cursor-grabbing"
      >
        <Card className="p-6 bg-white shadow-lg">
          <p className="text-xl font-semibold text-gray-900">
            {transaction.counterparty_name || transaction.description}
          </p>
          
          <p className={`text-2xl font-bold mt-2 ${
            transaction.amount < 0 ? 'text-red-600' : 'text-green-600'
          }`}>
            {formatSEK(transaction.amount)}
          </p>
          
          <p className="text-sm text-gray-500 mt-2">
            {new Date(transaction.booking_date).toLocaleDateString('sv-SE')}
          </p>
        </Card>
      </motion.div>

      <button
        onClick={onSkip}
        className="mt-4 text-sm text-gray-500 hover:text-gray-700"
      >
        Osäker? Hoppa över
      </button>
    </div>
  )
}

function formatSEK(amount: number): string {
  return new Intl.NumberFormat('sv-SE', {
    style: 'currency',
    currency: 'SEK',
    minimumFractionDigits: 0,
  }).format(amount)
}
```

---

## Phase 7: Deployment

### 7.1 Vercel Setup

```json
// vercel.json
{
  "crons": [
    {
      "path": "/api/banking/sync",
      "schedule": "0 6 * * *"
    }
  ]
}
```

### 7.2 Environment Variables in Vercel

Set via Vercel dashboard or CLI:
- `NEXT_PUBLIC_SUPABASE_URL`
- `NEXT_PUBLIC_SUPABASE_ANON_KEY`
- `SUPABASE_SERVICE_ROLE_KEY`
- Banking provider credentials

### 7.3 Deploy Commands

```bash
# Push database migrations
supabase db push

# Deploy to Vercel
vercel --prod
```

---

## MVP Launch Checklist

- [ ] Auth flow working (magic link)
- [ ] Profile + company settings CRUD
- [ ] Manual transaction entry (before bank integration)
- [ ] Transaction categorization (list view first, then swipe)
- [ ] Tax calculation display
- [ ] Customer CRUD
- [ ] Invoice creation with VAT logic
- [ ] PDF generation
- [ ] Invoice list with status
- [ ] Basic dashboard with balance card
- [ ] Mobile responsive
- [ ] Error handling + loading states
- [ ] Legal disclaimer on tax estimates