feat: UX improvements — nav, reports tabs, dashboard alerts, transaction hints, settings layout
- Move Reports to Finans nav group and auto-expand Övrigt on its pages - Make report tabs horizontally scrollable with gradient fade on mobile - Surface deadlines and alerts above the fold on dashboard - Add dismissible categorization hint card on transactions page - Split settings company form into 4 separate Cards for scannability - Add monthly breakdown report, document upload zone, journal entry attachments - Add batch category selector, receipt document linking, invoice form improvements Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jakob Wennberg
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
ba94f60d06
commit
d0c0d8a7d2
@@ -0,0 +1,217 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { createMockSupabase } from '@/tests/helpers'
|
||||
|
||||
// Mock Supabase server client
|
||||
const { supabase, mockResult } = createMockSupabase()
|
||||
vi.mock('@/lib/supabase/server', () => ({
|
||||
createClient: vi.fn(() => supabase),
|
||||
}))
|
||||
|
||||
import { generateMonthlyBreakdown } from '../monthly-breakdown'
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
describe('generateMonthlyBreakdown', () => {
|
||||
it('returns empty months when no fiscal period found', async () => {
|
||||
mockResult({ data: null, error: { message: 'not found' } })
|
||||
|
||||
const result = await generateMonthlyBreakdown('user-1', 'period-1')
|
||||
expect(result.months).toEqual([])
|
||||
})
|
||||
|
||||
it('returns empty months when no journal entries exist', async () => {
|
||||
// First call: fiscal period
|
||||
mockResult({
|
||||
data: { start_date: '2024-01-01', end_date: '2024-12-31' },
|
||||
error: null,
|
||||
})
|
||||
|
||||
// We need two sequential calls with different results.
|
||||
// The proxy-based mock returns the same result for all calls,
|
||||
// so we re-mock after the first await completes.
|
||||
// Instead, test that an empty lines result returns initialized months.
|
||||
|
||||
// For this test, override at the supabase.from level to return different chains
|
||||
let callCount = 0
|
||||
supabase.from.mockImplementation(() => {
|
||||
callCount++
|
||||
if (callCount === 1) {
|
||||
// fiscal_periods query
|
||||
return {
|
||||
select: () => ({
|
||||
eq: () => ({
|
||||
eq: () => ({
|
||||
single: () =>
|
||||
Promise.resolve({
|
||||
data: { start_date: '2024-01-01', end_date: '2024-12-31' },
|
||||
error: null,
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
}
|
||||
}
|
||||
// journal_entry_lines query
|
||||
return {
|
||||
select: () => ({
|
||||
eq: () => ({
|
||||
eq: () => ({
|
||||
eq: () =>
|
||||
Promise.resolve({
|
||||
data: [],
|
||||
error: null,
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
}
|
||||
})
|
||||
|
||||
const result = await generateMonthlyBreakdown('user-1', 'period-1')
|
||||
expect(result.months.length).toBe(12)
|
||||
expect(result.months[0].label).toBe('Jan')
|
||||
expect(result.months[0].income).toBe(0)
|
||||
expect(result.months[0].expenses).toBe(0)
|
||||
expect(result.months[11].label).toBe('Dec')
|
||||
})
|
||||
|
||||
it('correctly classifies revenue (class 3) and expense (class 4-7) accounts', async () => {
|
||||
let callCount = 0
|
||||
supabase.from.mockImplementation(() => {
|
||||
callCount++
|
||||
if (callCount === 1) {
|
||||
return {
|
||||
select: () => ({
|
||||
eq: () => ({
|
||||
eq: () => ({
|
||||
single: () =>
|
||||
Promise.resolve({
|
||||
data: { start_date: '2024-01-01', end_date: '2024-03-31' },
|
||||
error: null,
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
}
|
||||
}
|
||||
return {
|
||||
select: () => ({
|
||||
eq: () => ({
|
||||
eq: () => ({
|
||||
eq: () =>
|
||||
Promise.resolve({
|
||||
data: [
|
||||
{
|
||||
account_number: '3001',
|
||||
debit: 0,
|
||||
credit: 10000,
|
||||
journal_entry: { entry_date: '2024-01-15', status: 'posted', user_id: 'user-1', fiscal_period_id: 'period-1' },
|
||||
},
|
||||
{
|
||||
account_number: '5010',
|
||||
debit: 3000,
|
||||
credit: 0,
|
||||
journal_entry: { entry_date: '2024-01-20', status: 'posted', user_id: 'user-1', fiscal_period_id: 'period-1' },
|
||||
},
|
||||
{
|
||||
account_number: '3001',
|
||||
debit: 0,
|
||||
credit: 5000,
|
||||
journal_entry: { entry_date: '2024-02-10', status: 'posted', user_id: 'user-1', fiscal_period_id: 'period-1' },
|
||||
},
|
||||
{
|
||||
account_number: '6200',
|
||||
debit: 1500,
|
||||
credit: 0,
|
||||
journal_entry: { entry_date: '2024-02-15', status: 'posted', user_id: 'user-1', fiscal_period_id: 'period-1' },
|
||||
},
|
||||
],
|
||||
error: null,
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
}
|
||||
})
|
||||
|
||||
const result = await generateMonthlyBreakdown('user-1', 'period-1')
|
||||
|
||||
// January
|
||||
const jan = result.months.find((m) => m.label === 'Jan')!
|
||||
expect(jan.income).toBe(10000)
|
||||
expect(jan.expenses).toBe(3000)
|
||||
expect(jan.net).toBe(7000)
|
||||
|
||||
// February
|
||||
const feb = result.months.find((m) => m.label === 'Feb')!
|
||||
expect(feb.income).toBe(5000)
|
||||
expect(feb.expenses).toBe(1500)
|
||||
expect(feb.net).toBe(3500)
|
||||
|
||||
// March should be zero
|
||||
const mar = result.months.find((m) => m.label === 'Mar')!
|
||||
expect(mar.income).toBe(0)
|
||||
expect(mar.expenses).toBe(0)
|
||||
})
|
||||
|
||||
it('ignores non-revenue/expense accounts (class 1, 2, 8)', async () => {
|
||||
let callCount = 0
|
||||
supabase.from.mockImplementation(() => {
|
||||
callCount++
|
||||
if (callCount === 1) {
|
||||
return {
|
||||
select: () => ({
|
||||
eq: () => ({
|
||||
eq: () => ({
|
||||
single: () =>
|
||||
Promise.resolve({
|
||||
data: { start_date: '2024-01-01', end_date: '2024-01-31' },
|
||||
error: null,
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
}
|
||||
}
|
||||
return {
|
||||
select: () => ({
|
||||
eq: () => ({
|
||||
eq: () => ({
|
||||
eq: () =>
|
||||
Promise.resolve({
|
||||
data: [
|
||||
{
|
||||
account_number: '1930',
|
||||
debit: 10000,
|
||||
credit: 0,
|
||||
journal_entry: { entry_date: '2024-01-15', status: 'posted', user_id: 'user-1', fiscal_period_id: 'period-1' },
|
||||
},
|
||||
{
|
||||
account_number: '2611',
|
||||
debit: 0,
|
||||
credit: 2500,
|
||||
journal_entry: { entry_date: '2024-01-15', status: 'posted', user_id: 'user-1', fiscal_period_id: 'period-1' },
|
||||
},
|
||||
{
|
||||
account_number: '8999',
|
||||
debit: 500,
|
||||
credit: 0,
|
||||
journal_entry: { entry_date: '2024-01-20', status: 'posted', user_id: 'user-1', fiscal_period_id: 'period-1' },
|
||||
},
|
||||
],
|
||||
error: null,
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
}
|
||||
})
|
||||
|
||||
const result = await generateMonthlyBreakdown('user-1', 'period-1')
|
||||
const jan = result.months.find((m) => m.label === 'Jan')!
|
||||
expect(jan.income).toBe(0)
|
||||
expect(jan.expenses).toBe(0)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,124 @@
|
||||
import { createClient } from '@/lib/supabase/server'
|
||||
|
||||
export interface MonthlyBreakdownMonth {
|
||||
label: string
|
||||
income: number
|
||||
expenses: number
|
||||
net: number
|
||||
}
|
||||
|
||||
export interface MonthlyBreakdown {
|
||||
months: MonthlyBreakdownMonth[]
|
||||
}
|
||||
|
||||
const MONTH_LABELS = [
|
||||
'Jan', 'Feb', 'Mar', 'Apr', 'Maj', 'Jun',
|
||||
'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec',
|
||||
]
|
||||
|
||||
/**
|
||||
* Generate monthly income vs expenses breakdown for a fiscal period.
|
||||
*
|
||||
* Groups posted journal entry lines by month and account class:
|
||||
* - Class 3 (30xx) = revenue (credit side)
|
||||
* - Class 4-7 (40xx-79xx) = expenses (debit side)
|
||||
*/
|
||||
export async function generateMonthlyBreakdown(
|
||||
userId: string,
|
||||
fiscalPeriodId: string
|
||||
): Promise<MonthlyBreakdown> {
|
||||
const supabase = await createClient()
|
||||
|
||||
// Get the fiscal period date range
|
||||
const { data: period, error: periodError } = await supabase
|
||||
.from('fiscal_periods')
|
||||
.select('start_date, end_date')
|
||||
.eq('id', fiscalPeriodId)
|
||||
.eq('user_id', userId)
|
||||
.single()
|
||||
|
||||
if (periodError || !period) {
|
||||
return { months: [] }
|
||||
}
|
||||
|
||||
// Get all posted journal entry lines for this period with their entry dates
|
||||
const { data: lines, error: linesError } = await supabase
|
||||
.from('journal_entry_lines')
|
||||
.select(`
|
||||
account_number,
|
||||
debit,
|
||||
credit,
|
||||
journal_entry:journal_entries!inner(
|
||||
entry_date,
|
||||
status,
|
||||
user_id,
|
||||
fiscal_period_id
|
||||
)
|
||||
`)
|
||||
.eq('journal_entries.fiscal_period_id', fiscalPeriodId)
|
||||
.eq('journal_entries.user_id', userId)
|
||||
.eq('journal_entries.status', 'posted')
|
||||
|
||||
if (linesError || !lines) {
|
||||
return { months: [] }
|
||||
}
|
||||
|
||||
// Build monthly aggregates
|
||||
const monthMap = new Map<number, { income: number; expenses: number }>()
|
||||
|
||||
// Initialize all months in the period range
|
||||
const startDate = new Date(period.start_date)
|
||||
const endDate = new Date(period.end_date)
|
||||
const startMonth = startDate.getMonth()
|
||||
const endMonth = endDate.getMonth() + (endDate.getFullYear() - startDate.getFullYear()) * 12
|
||||
|
||||
for (let m = startMonth; m <= endMonth; m++) {
|
||||
monthMap.set(m % 12, { income: 0, expenses: 0 })
|
||||
}
|
||||
|
||||
for (const line of lines) {
|
||||
const entry = line.journal_entry as unknown as {
|
||||
entry_date: string
|
||||
status: string
|
||||
user_id: string
|
||||
fiscal_period_id: string
|
||||
}
|
||||
const accountClass = parseInt(line.account_number.charAt(0))
|
||||
const entryDate = new Date(entry.entry_date)
|
||||
const month = entryDate.getMonth()
|
||||
|
||||
if (!monthMap.has(month)) {
|
||||
monthMap.set(month, { income: 0, expenses: 0 })
|
||||
}
|
||||
|
||||
const bucket = monthMap.get(month)!
|
||||
|
||||
if (accountClass === 3) {
|
||||
// Revenue accounts: credit side represents revenue
|
||||
bucket.income = Math.round((bucket.income + line.credit - line.debit) * 100) / 100
|
||||
} else if (accountClass >= 4 && accountClass <= 7) {
|
||||
// Expense accounts: debit side represents expenses
|
||||
bucket.expenses = Math.round((bucket.expenses + line.debit - line.credit) * 100) / 100
|
||||
}
|
||||
}
|
||||
|
||||
// Convert to sorted array
|
||||
const months: MonthlyBreakdownMonth[] = []
|
||||
const sortedMonths = Array.from(monthMap.entries()).sort((a, b) => {
|
||||
// Handle year boundaries (e.g., Nov-Dec-Jan for broken fiscal year)
|
||||
const aAdj = a[0] < startMonth ? a[0] + 12 : a[0]
|
||||
const bAdj = b[0] < startMonth ? b[0] + 12 : b[0]
|
||||
return aAdj - bAdj
|
||||
})
|
||||
|
||||
for (const [month, data] of sortedMonths) {
|
||||
months.push({
|
||||
label: MONTH_LABELS[month],
|
||||
income: data.income,
|
||||
expenses: data.expenses,
|
||||
net: Math.round((data.income - data.expenses) * 100) / 100,
|
||||
})
|
||||
}
|
||||
|
||||
return { months }
|
||||
}
|
||||
Reference in New Issue
Block a user