+ {/* Header */}
+
+
{formatPeriodLabel(data.period, data.date)}
+
+ {data.totalTransactions} transaction{data.totalTransactions !== 1 ? "s" : ""}
+
+
+
+ {/* Totals */}
+
+ {data.income > 0 && (
+
+ Total Income:
+ {formatCurrency(data.income, defaultCurrency)}
+
+ )}
+ {data.expenses > 0 && (
+
+ Total Expenses:
+ {formatCurrency(data.expenses, defaultCurrency)}
+
+ )}
+
+
+ {/* Income Categories */}
+ {incomeCategories.length > 0 && (
+
+
Income by Category
+
+ {incomeCategories.map((category) => (
+
+
+
+ {formatCurrency(category.income, defaultCurrency)}
+
+
+ ))}
+
+
+ )}
+
+ {/* Expense Categories */}
+ {expenseCategories.length > 0 && (
+
+
Expenses by Category
+
+ {expenseCategories.map((category) => (
+
+
+
+ {formatCurrency(category.expenses, defaultCurrency)}
+
+
+ ))}
+
+
+ )}
+
+ No data available for the selected period
+
+ )
+ }
+
+ const maxIncome = Math.max(...data.map((d) => d.income))
+ const maxExpense = Math.max(...data.map((d) => d.expenses))
+ const maxValue = Math.max(maxIncome, maxExpense)
+
+ if (maxValue === 0) {
+ return (
+
+ No transactions found for the selected period
+
+ )
+ }
+
+ return (
+
+ {/* Chart container with horizontal scroll */}
+
+
+ {/* Income section (top half) */}
+
+ {data.map((item, index) => {
+ const incomeHeight = maxValue > 0 ? (item.income / maxValue) * 100 : 0
+
+ return (
+
handleBarHover(item, e)}
+ onMouseLeave={handleBarLeave}
+ onClick={() => item.income > 0 && handleBarClick(item, "income")}
+ >
+ {/* Period label above income bars */}
+
+ {formatPeriodLabel(item.period, item.date)}
+
+
+ {item.income > 0 && (
+ <>
+ {/* Income amount label */}
+
+ {formatCurrency(item.income, defaultCurrency)}
+
+ {/* Income bar growing upward from bottom */}
+
+
+ )}
+
+ )
+ })}
+
+
+ {/* X-axis line (center) */}
+
+
+ {/* Expense section (bottom half) */}
+
+ {data.map((item, index) => {
+ const expenseHeight = maxValue > 0 ? (item.expenses / maxValue) * 100 : 0
+
+ return (
+
handleBarHover(item, e)}
+ onMouseLeave={handleBarLeave}
+ onClick={() => item.expenses > 0 && handleBarClick(item, "expense")}
+ >
+ {item.expenses > 0 && (
+ <>
+ {/* Expense bar growing downward from top */}
+
+ {/* Expense amount label */}
+
+ {formatCurrency(item.expenses, defaultCurrency)}
+
+
+ )}
+
+ )
+ })}
+
+
+
+
+ {/* Tooltip */}
+
+
diff --git a/components/forms/date-range-picker.tsx b/components/forms/date-range-picker.tsx
index 7b1f868..6e2f585 100644
--- a/components/forms/date-range-picker.tsx
+++ b/components/forms/date-range-picker.tsx
@@ -2,7 +2,7 @@
import { format, startOfMonth, startOfQuarter, subMonths, subWeeks } from "date-fns"
import { CalendarIcon } from "lucide-react"
-import { useState, useEffect } from "react"
+import { useEffect, useState } from "react"
import { DateRange } from "react-day-picker"
import { Button } from "@/components/ui/button"
diff --git a/lib/utils.ts b/lib/utils.ts
index 3210919..108f817 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -116,3 +116,21 @@ export function generateUUID(): string {
return v.toString(16)
})
}
+
+export function formatPeriodLabel(period: string, date: Date): string {
+ if (period.includes("-") && period.split("-").length === 3) {
+ // Daily format: show day/month/year
+ return date.toLocaleDateString("en-US", {
+ weekday: "short",
+ month: "short",
+ day: "numeric",
+ year: "numeric",
+ })
+ } else {
+ // Monthly format: show month/year
+ return date.toLocaleDateString("en-US", {
+ month: "long",
+ year: "numeric",
+ })
+ }
+}
diff --git a/models/stats.ts b/models/stats.ts
index 7a42245..37eebdc 100644
--- a/models/stats.ts
+++ b/models/stats.ts
@@ -79,3 +79,245 @@ export const getProjectStats = cache(async (userId: string, projectId: string, f
invoicesProcessed,
}
})
+
+export type TimeSeriesData = {
+ period: string
+ income: number
+ expenses: number
+ date: Date
+}
+
+export type CategoryBreakdown = {
+ code: string
+ name: string
+ color: string
+ income: number
+ expenses: number
+ transactionCount: number
+}
+
+export type DetailedTimeSeriesData = {
+ period: string
+ income: number
+ expenses: number
+ date: Date
+ categories: CategoryBreakdown[]
+ totalTransactions: number
+}
+
+export const getTimeSeriesStats = cache(
+ async (
+ userId: string,
+ filters: TransactionFilters = {},
+ defaultCurrency: string = "EUR"
+ ): Promise => {
+ const where: Prisma.TransactionWhereInput = { userId }
+
+ if (filters.dateFrom || filters.dateTo) {
+ where.issuedAt = {
+ gte: filters.dateFrom ? new Date(filters.dateFrom) : undefined,
+ lte: filters.dateTo ? new Date(filters.dateTo) : undefined,
+ }
+ }
+
+ if (filters.categoryCode) {
+ where.categoryCode = filters.categoryCode
+ }
+
+ if (filters.projectCode) {
+ where.projectCode = filters.projectCode
+ }
+
+ if (filters.type) {
+ where.type = filters.type
+ }
+
+ const transactions = await prisma.transaction.findMany({
+ where,
+ orderBy: { issuedAt: "asc" },
+ })
+
+ if (transactions.length === 0) {
+ return []
+ }
+
+ // Determine if we should group by day or month
+ const dateFrom = filters.dateFrom ? new Date(filters.dateFrom) : new Date(transactions[0].issuedAt!)
+ const dateTo = filters.dateTo ? new Date(filters.dateTo) : new Date(transactions[transactions.length - 1].issuedAt!)
+ const daysDiff = Math.ceil((dateTo.getTime() - dateFrom.getTime()) / (1000 * 60 * 60 * 24))
+ const groupByDay = daysDiff <= 50
+
+ // Group transactions by time period
+ const grouped = transactions.reduce(
+ (acc, transaction) => {
+ if (!transaction.issuedAt) return acc
+
+ const date = new Date(transaction.issuedAt)
+ const period = groupByDay
+ ? date.toISOString().split("T")[0] // YYYY-MM-DD
+ : `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}` // YYYY-MM
+
+ if (!acc[period]) {
+ acc[period] = { period, income: 0, expenses: 0, date }
+ }
+
+ // Get amount in default currency
+ const amount =
+ transaction.convertedCurrencyCode?.toUpperCase() === defaultCurrency.toUpperCase()
+ ? transaction.convertedTotal || 0
+ : transaction.currencyCode?.toUpperCase() === defaultCurrency.toUpperCase()
+ ? transaction.total || 0
+ : 0 // Skip transactions not in default currency for simplicity
+
+ if (transaction.type === "income") {
+ acc[period].income += amount
+ } else if (transaction.type === "expense") {
+ acc[period].expenses += amount
+ }
+
+ return acc
+ },
+ {} as Record
+ )
+
+ return Object.values(grouped).sort((a, b) => a.date.getTime() - b.date.getTime())
+ }
+)
+
+export const getDetailedTimeSeriesStats = cache(
+ async (
+ userId: string,
+ filters: TransactionFilters = {},
+ defaultCurrency: string = "EUR"
+ ): Promise => {
+ const where: Prisma.TransactionWhereInput = { userId }
+
+ if (filters.dateFrom || filters.dateTo) {
+ where.issuedAt = {
+ gte: filters.dateFrom ? new Date(filters.dateFrom) : undefined,
+ lte: filters.dateTo ? new Date(filters.dateTo) : undefined,
+ }
+ }
+
+ if (filters.categoryCode) {
+ where.categoryCode = filters.categoryCode
+ }
+
+ if (filters.projectCode) {
+ where.projectCode = filters.projectCode
+ }
+
+ if (filters.type) {
+ where.type = filters.type
+ }
+
+ const [transactions, categories] = await Promise.all([
+ prisma.transaction.findMany({
+ where,
+ include: {
+ category: true,
+ },
+ orderBy: { issuedAt: "asc" },
+ }),
+ prisma.category.findMany({
+ where: { userId },
+ orderBy: { name: "asc" },
+ }),
+ ])
+
+ if (transactions.length === 0) {
+ return []
+ }
+
+ // Determine if we should group by day or month
+ const dateFrom = filters.dateFrom ? new Date(filters.dateFrom) : new Date(transactions[0].issuedAt!)
+ const dateTo = filters.dateTo ? new Date(filters.dateTo) : new Date(transactions[transactions.length - 1].issuedAt!)
+ const daysDiff = Math.ceil((dateTo.getTime() - dateFrom.getTime()) / (1000 * 60 * 60 * 24))
+ const groupByDay = daysDiff <= 50
+
+ // Create category lookup
+ const categoryLookup = new Map(categories.map((cat) => [cat.code, cat]))
+
+ // Group transactions by time period
+ const grouped = transactions.reduce(
+ (acc, transaction) => {
+ if (!transaction.issuedAt) return acc
+
+ const date = new Date(transaction.issuedAt)
+ const period = groupByDay
+ ? date.toISOString().split("T")[0] // YYYY-MM-DD
+ : `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}` // YYYY-MM
+
+ if (!acc[period]) {
+ acc[period] = {
+ period,
+ income: 0,
+ expenses: 0,
+ date,
+ categories: new Map(),
+ totalTransactions: 0,
+ }
+ }
+
+ // Get amount in default currency
+ const amount =
+ transaction.convertedCurrencyCode?.toUpperCase() === defaultCurrency.toUpperCase()
+ ? transaction.convertedTotal || 0
+ : transaction.currencyCode?.toUpperCase() === defaultCurrency.toUpperCase()
+ ? transaction.total || 0
+ : 0 // Skip transactions not in default currency for simplicity
+
+ const categoryCode = transaction.categoryCode || "other"
+ const category = categoryLookup.get(categoryCode) || {
+ code: "other",
+ name: "Other",
+ color: "#6b7280",
+ }
+
+ // Initialize category if not exists
+ if (!acc[period].categories.has(categoryCode)) {
+ acc[period].categories.set(categoryCode, {
+ code: category.code,
+ name: category.name,
+ color: category.color || "#6b7280",
+ income: 0,
+ expenses: 0,
+ transactionCount: 0,
+ })
+ }
+
+ const categoryData = acc[period].categories.get(categoryCode)!
+ categoryData.transactionCount++
+ acc[period].totalTransactions++
+
+ if (transaction.type === "income") {
+ acc[period].income += amount
+ categoryData.income += amount
+ } else if (transaction.type === "expense") {
+ acc[period].expenses += amount
+ categoryData.expenses += amount
+ }
+
+ return acc
+ },
+ {} as Record<
+ string,
+ {
+ period: string
+ income: number
+ expenses: number
+ date: Date
+ categories: Map
+ totalTransactions: number
+ }
+ >
+ )
+
+ return Object.values(grouped)
+ .map((item) => ({
+ ...item,
+ categories: Array.from(item.categories.values()).filter((cat) => cat.income > 0 || cat.expenses > 0),
+ }))
+ .sort((a, b) => a.date.getTime() - b.date.getTime())
+ }
+)