zmiany

api/src/config/data-source.ts

@@ -4,13 +4,15 @@ import path from 'node:path';
 import { DataSource } from 'typeorm';
 import { env } from './env.js';
 import { AppSetting } from '../entities/AppSetting.js';
+import { Budget } from '../entities/Budget.js';
 import { Category } from '../entities/Category.js';
 import { Expense } from '../entities/Expense.js';
 import { Merchant } from '../entities/Merchant.js';
 import { Proof } from '../entities/Proof.js';
+import { RecurringExpense } from '../entities/RecurringExpense.js';
 import { User } from '../entities/User.js';
 
-const entities = [User, Category, Expense, Proof, AppSetting, Merchant];
+const entities = [User, Category, Expense, Proof, AppSetting, Merchant, Budget, RecurringExpense];
 const baseOptions = { entities, synchronize: env.DB_SYNC, logging: env.DB_LOGGING };
 
 if (env.DB_TYPE === 'sqlite') {

api/src/controllers/budget.controller.ts

@@ -0,0 +1,159 @@
+import type { Response } from 'express';
+import { z } from 'zod';
+import { AppDataSource } from '../config/data-source.js';
+import { Budget } from '../entities/Budget.js';
+import { Category } from '../entities/Category.js';
+import { Expense } from '../entities/Expense.js';
+import type { AuthenticatedRequest } from '../types/express.js';
+import { processDueRecurringExpenses } from '../services/recurring.service.js';
+
+const budgetSchema = z.object({
+  month: z.string().regex(/^\d{4}-\d{2}$/),
+  name: z.string().max(120).nullable().optional(),
+  amount: z.coerce.number().positive(),
+  categoryId: z.string().uuid().nullable().optional(),
+  alertThresholds: z.array(z.coerce.number().min(1).max(100)).default([80, 100]),
+  isActive: z.boolean().default(true)
+});
+
+const budgetRepo = () => AppDataSource.getRepository(Budget);
+const categoryRepo = () => AppDataSource.getRepository(Category);
+const expenseRepo = () => AppDataSource.getRepository(Expense);
+
+const serializeBudget = (item: Budget, spent: number) => {
+  const amount = Number(item.amount.toFixed(2));
+  const usagePercent = amount ? Number(((spent / amount) * 100).toFixed(1)) : 0;
+  const alertLevel = (item.alertThresholds ?? [80, 100]).filter((threshold) => usagePercent >= threshold).sort((a, b) => b - a)[0] ?? null;
+  return {
+    id: item.id,
+    month: item.month,
+    name: item.name,
+    amount,
+    spent: Number(spent.toFixed(2)),
+    usagePercent,
+    alertLevel,
+    alertThresholds: item.alertThresholds ?? [80, 100],
+    isActive: item.isActive,
+    category: item.category
+      ? {
+          id: item.category.id,
+          name: item.category.name,
+          color: item.category.color,
+          isSystem: item.category.isSystem,
+          ownerId: item.category.user?.id ?? null
+        }
+      : null,
+    createdAt: item.createdAt,
+    updatedAt: item.updatedAt
+  };
+};
+
+const getMonthRange = (month: string) => ({ startDate: `${month}-01`, endDate: `${month}-31` });
+
+export const listBudgets = async (req: AuthenticatedRequest, res: Response) => {
+  await processDueRecurringExpenses(req.user!.id);
+  const month = typeof req.query.month === 'string' && /^\d{4}-\d{2}$/.test(req.query.month)
+    ? req.query.month
+    : `${new Date().getFullYear()}-${`${new Date().getMonth() + 1}`.padStart(2, '0')}`;
+
+  const budgets = await budgetRepo().find({
+    where: { user: { id: req.user!.id } },
+    relations: { category: { user: true }, user: true },
+    order: { month: 'DESC', createdAt: 'DESC' }
+  });
+
+  const monthBudgets = budgets.filter((item) => item.month === month);
+  const { startDate, endDate } = getMonthRange(month);
+  const expenses = await expenseRepo().find({
+    where: { user: { id: req.user!.id } },
+    relations: { category: true }
+  });
+
+  const scopedExpenses = expenses.filter((item) => item.expenseDate >= startDate && item.expenseDate <= endDate && item.status !== 'REJECTED' && item.status !== 'DRAFT');
+  const items = monthBudgets.map((item) => {
+    const spent = scopedExpenses
+      .filter((expense) => !item.category || expense.category.id === item.category.id)
+      .reduce((sum, expense) => sum + expense.amount, 0);
+    return serializeBudget(item, spent);
+  });
+
+  const alerts = items.filter((item) => item.alertLevel !== null).map((item) => ({
+    budgetId: item.id,
+    message: `${item.name || item.category?.name || 'Monthly budget'} reached ${item.usagePercent}% of the limit.`,
+    usagePercent: item.usagePercent,
+    level: item.alertLevel
+  }));
+
+  return res.json({
+    month,
+    items,
+    summary: {
+      totalBudget: Number(items.reduce((sum, item) => sum + item.amount, 0).toFixed(2)),
+      totalSpent: Number(items.reduce((sum, item) => sum + item.spent, 0).toFixed(2)),
+      alerts
+    }
+  });
+};
+
+export const createBudget = async (req: AuthenticatedRequest, res: Response) => {
+  const parsed = budgetSchema.safeParse(req.body);
+  if (!parsed.success) return res.status(400).json({ message: 'Invalid budget payload', issues: parsed.error.issues });
+
+  const category = parsed.data.categoryId
+    ? await categoryRepo().findOne({
+        where: [{ id: parsed.data.categoryId, isSystem: true }, { id: parsed.data.categoryId, user: { id: req.user!.id } }],
+        relations: { user: true }
+      })
+    : null;
+
+  if (parsed.data.categoryId && !category) return res.status(404).json({ message: 'Category not found' });
+
+  const saved = await budgetRepo().save(
+    budgetRepo().create({
+      month: parsed.data.month,
+      name: parsed.data.name ?? null,
+      amount: parsed.data.amount,
+      alertThresholds: parsed.data.alertThresholds,
+      isActive: parsed.data.isActive,
+      category,
+      user: { id: req.user!.id } as never
+    })
+  );
+
+  const full = await budgetRepo().findOneOrFail({ where: { id: saved.id }, relations: { category: { user: true }, user: true } });
+  return res.status(201).json({ item: serializeBudget(full, 0) });
+};
+
+export const updateBudget = async (req: AuthenticatedRequest, res: Response) => {
+  const parsed = budgetSchema.safeParse(req.body);
+  if (!parsed.success) return res.status(400).json({ message: 'Invalid budget payload', issues: parsed.error.issues });
+
+  const item = await budgetRepo().findOne({ where: { id: String(req.params.id), user: { id: req.user!.id } }, relations: { category: { user: true }, user: true } });
+  if (!item) return res.status(404).json({ message: 'Budget not found' });
+
+  const category = parsed.data.categoryId
+    ? await categoryRepo().findOne({
+        where: [{ id: parsed.data.categoryId, isSystem: true }, { id: parsed.data.categoryId, user: { id: req.user!.id } }],
+        relations: { user: true }
+      })
+    : null;
+
+  if (parsed.data.categoryId && !category) return res.status(404).json({ message: 'Category not found' });
+
+  item.month = parsed.data.month;
+  item.name = parsed.data.name ?? null;
+  item.amount = parsed.data.amount;
+  item.alertThresholds = parsed.data.alertThresholds;
+  item.isActive = parsed.data.isActive;
+  item.category = category;
+
+  await budgetRepo().save(item);
+  return res.json({ item: serializeBudget(item, 0) });
+};
+
+export const deleteBudget = async (req: AuthenticatedRequest, res: Response) => {
+  const item = await budgetRepo().findOne({ where: { id: String(req.params.id), user: { id: req.user!.id } } });
+  if (!item) return res.status(404).json({ message: 'Budget not found' });
+  await budgetRepo().remove(item);
+  return res.status(204).send();
+};

api/src/controllers/expense.controller.ts

@@ -1,18 +1,21 @@
 import fs from 'node:fs';
 import path from 'node:path';
-import type { Response } from 'express';
+import type { Request, Response } from 'express';
 import { z } from 'zod';
 import { AppDataSource } from '../config/data-source.js';
 import { env } from '../config/env.js';
 import { Category } from '../entities/Category.js';
-import { Expense } from '../entities/Expense.js';
+import { Expense, type DuplicateReviewStatus, type ExpenseStatus } from '../entities/Expense.js';
 import { Proof } from '../entities/Proof.js';
 import { User } from '../entities/User.js';
 import type { AuthenticatedRequest } from '../types/express.js';
 import { serializeProof } from '../utils/http.js';
+import { processDueRecurringExpenses } from '../services/recurring.service.js';
 
 const paymentMethodSchema = z.enum(['CARD', 'CASH', 'TRANSFER', 'BLIK', 'OTHER']).nullable().optional();
 const proofTypeSchema = z.enum(['RECEIPT', 'INVOICE', 'NOTE', 'BANK_STATEMENT', 'OTHER']);
+const statusSchema = z.enum(['DRAFT', 'PENDING', 'APPROVED', 'REJECTED']);
+const duplicateReviewSchema = z.object({ action: z.enum(['CONFIRM', 'DISMISS', 'REOPEN']) });
 
 const createExpenseSchema = z.object({
   title: z.string().min(2).max(140),
@@ -23,6 +26,9 @@ const createExpenseSchema = z.object({
   merchant: z.string().max(120).nullable().optional(),
   paymentMethod: paymentMethodSchema,
   currency: z.string().min(3).max(8).default('PLN'),
+  status: statusSchema.default('PENDING'),
+  tags: z.array(z.string().min(1).max(40)).default([]),
+  customFields: z.record(z.string(), z.string()).default({}),
   proofType: proofTypeSchema.optional(),
   proofLabel: z.string().max(150).nullable().optional(),
   proofNote: z.string().max(1000).nullable().optional()
@@ -36,11 +42,14 @@ const updateExpenseSchema = z.object({
   categoryId: z.string().uuid(),
   merchant: z.string().max(120).nullable().optional(),
   paymentMethod: paymentMethodSchema,
-  currency: z.string().min(3).max(8).default('PLN')
+  currency: z.string().min(3).max(8).default('PLN'),
+  status: statusSchema.default('PENDING'),
+  tags: z.array(z.string().min(1).max(40)).default([]),
+  customFields: z.record(z.string(), z.string()).default({})
 });
 
 const addProofSchema = z.object({
-  type: proofTypeSchema,
+  type: proofTypeSchema.default('OTHER'),
   label: z.string().max(150).nullable().optional(),
   note: z.string().max(1000).nullable().optional()
 });
@@ -50,6 +59,66 @@ const categoryRepo = () => AppDataSource.getRepository(Category);
 const userRepo = () => AppDataSource.getRepository(User);
 const proofRepo = () => AppDataSource.getRepository(Proof);
 
+const getUploadedFiles = (req: Request) => {
+  const files = (req.files as Express.Multer.File[] | undefined) ?? [];
+  const single = req.file ? [req.file] : [];
+  return [...single, ...files].filter((file) => ['proofFile', 'proofFiles'].includes(file.fieldname));
+};
+
+const removeUploadedFile = (filename?: string) => {
+  if (!filename) return;
+  const filePath = path.resolve(env.UPLOAD_DIR, filename);
+  if (fs.existsSync(filePath)) fs.unlinkSync(filePath);
+};
+
+const removeUploadedFiles = (files: Express.Multer.File[]) => {
+  files.forEach((file) => removeUploadedFile(file.filename));
+};
+
+const normalizeTagList = (value: unknown) => {
+  if (Array.isArray(value)) return value.map((item) => String(item).trim()).filter(Boolean);
+  if (typeof value === 'string') {
+    if (!value.trim()) return [];
+    try {
+      const parsed = JSON.parse(value);
+      if (Array.isArray(parsed)) return parsed.map((item) => String(item).trim()).filter(Boolean);
+    } catch {}
+    return value.split(',').map((item) => item.trim()).filter(Boolean);
+  }
+  return [];
+};
+
+const normalizeCustomFields = (value: unknown) => {
+  if (!value) return {} as Record<string, string>;
+  if (typeof value === 'string') {
+    if (!value.trim()) return {};
+    try {
+      const parsed = JSON.parse(value);
+      if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+        return Object.fromEntries(
+          Object.entries(parsed as Record<string, unknown>)
+            .map(([key, item]) => [String(key).trim(), String(item ?? '').trim()] as [string, string])
+            .filter(([key, item]) => Boolean(key && item))
+        );
+      }
+    } catch {}
+  }
+  if (typeof value === 'object' && !Array.isArray(value)) {
+    return Object.fromEntries(
+      Object.entries(value as Record<string, unknown>)
+        .map(([key, item]) => [String(key).trim(), String(item ?? '').trim()] as [string, string])
+        .filter(([key, item]) => Boolean(key && item))
+    );
+  }
+  return {};
+};
+
+const enrichPayload = (body: Record<string, unknown>) => ({
+  ...body,
+  tags: normalizeTagList(body.tags),
+  customFields: normalizeCustomFields(body.customFields)
+});
+
 const serializeExpense = (expense: Expense) => ({
   id: expense.id,
   title: expense.title,
@@ -59,7 +128,13 @@ const serializeExpense = (expense: Expense) => ({
   merchant: expense.merchant,
   paymentMethod: expense.paymentMethod,
   currency: expense.currency,
+  status: expense.status,
+  tags: expense.tags ?? [],
+  customFields: expense.customFields ?? {},
   possibleDuplicate: expense.possibleDuplicate,
+  duplicateStatus: expense.duplicateStatus,
+  duplicateReviewedAt: expense.duplicateReviewedAt,
+  recurringSourceId: expense.recurringSourceId,
   category: {
     id: expense.category.id,
     name: expense.category.name,
@@ -72,32 +147,87 @@ const serializeExpense = (expense: Expense) => ({
   updatedAt: expense.updatedAt
 });
 
-const removeUploadedFile = (filename?: string) => {
-  if (!filename) return;
-  const filePath = path.resolve(env.UPLOAD_DIR, filename);
-  if (fs.existsSync(filePath)) fs.unlinkSync(filePath);
-};
+const normalizeInvoiceKey = (expense: Expense) =>
+  Object.entries(expense.customFields ?? {}).find(([key]) => key.toLowerCase().includes('invoice'))?.[1]?.trim().toLowerCase() ?? null;
 
-const isDuplicate = async (userId: string, amount: number, expenseDate: string, merchant?: string | null) => {
+const findDuplicateMatches = async (input: { userId: string; expenseId?: string; amount: number; expenseDate: string; merchant?: string | null; title?: string; customFields?: Record<string, string> }) => {
   const items = await expenseRepo().find({
-    where: { user: { id: userId }, expenseDate },
-    order: { createdAt: 'DESC' },
-    take: 5
+    where: { user: { id: input.userId } },
+    relations: { category: { user: true }, proofs: true, user: true },
+    order: { expenseDate: 'DESC', createdAt: 'DESC' },
+    take: 200
   });
 
-  const merchantKey = merchant?.trim().toLowerCase();
-  return items.some(
-    (item) =>
-      Math.abs(item.amount - amount) < 0.001 &&
-      ((merchantKey && item.merchant?.trim().toLowerCase() === merchantKey) || !merchantKey)
-  );
+  const invoiceKey = Object.entries(input.customFields ?? {}).find(([key]) => key.toLowerCase().includes('invoice'))?.[1]?.trim().toLowerCase();
+  const merchantKey = input.merchant?.trim().toLowerCase();
+  const inputDate = new Date(`${input.expenseDate}T00:00:00`).getTime();
+
+  return items.filter((item) => {
+    if (input.expenseId && item.id === input.expenseId) return false;
+    if (item.duplicateStatus === 'DISMISSED') return false;
+    const itemDate = new Date(`${item.expenseDate}T00:00:00`).getTime();
+    const sameAmount = Math.abs(item.amount - input.amount) < 0.001;
+    const sameMerchant = merchantKey ? item.merchant?.trim().toLowerCase() === merchantKey : false;
+    const sameInvoice = invoiceKey ? normalizeInvoiceKey(item) === invoiceKey : false;
+    const closeDate = Math.abs(itemDate - inputDate) <= 1000 * 60 * 60 * 24 * 3;
+    const sameTitle = input.title ? item.title.trim().toLowerCase() === input.title.trim().toLowerCase() : false;
+    return sameInvoice || (sameAmount && closeDate && (sameMerchant || sameTitle));
+  });
+};
+
+const buildWarnings = (duplicates: Expense[], amount: number, expenseDate: string) => {
+  const warnings: string[] = [];
+  if (duplicates.length) warnings.push(`Possible duplicate detected (${duplicates.length} matching expense${duplicates.length > 1 ? 's' : ''}).`);
+  if (new Date(`${expenseDate}T00:00:00`).getTime() > Date.now() + 1000 * 60 * 60 * 24) warnings.push('Expense date is in the future.');
+  if (amount > 50000) warnings.push('Unusually high amount. Please double-check the value.');
+  return warnings;
+};
+
+const hydrateExpense = (id: string) =>
+  expenseRepo().findOneOrFail({
+    where: { id },
+    relations: { category: { user: true }, proofs: true, user: true }
+  });
+
+const parseFilterArray = (value: string | undefined) => value?.split(',').map((item) => item.trim()).filter(Boolean) ?? [];
+
+const initialStatuses: ExpenseStatus[] = ['DRAFT', 'PENDING', 'APPROVED'];
+const transitionMap: Record<ExpenseStatus, ExpenseStatus[]> = {
+  DRAFT: ['DRAFT', 'PENDING', 'REJECTED'],
+  PENDING: ['DRAFT', 'PENDING', 'APPROVED', 'REJECTED'],
+  APPROVED: ['APPROVED', 'PENDING'],
+  REJECTED: ['REJECTED', 'DRAFT', 'PENDING']
+};
+
+const validateInitialStatus = (nextStatus: ExpenseStatus) => initialStatuses.includes(nextStatus);
+const validateStatusTransition = (currentStatus: ExpenseStatus, nextStatus: ExpenseStatus) => (transitionMap[currentStatus] ?? []).includes(nextStatus);
+const approvalNeedsProof = (nextStatus: ExpenseStatus) => nextStatus === 'APPROVED';
+
+const applyDuplicateState = (expense: Expense, duplicates: Expense[]) => {
+  if (!duplicates.length) {
+    expense.possibleDuplicate = false;
+    expense.duplicateStatus = null;
+    expense.duplicateReviewedAt = null;
+    return;
+  }
+
+  expense.possibleDuplicate = true;
+  if (expense.duplicateStatus !== 'CONFIRMED') {
+    expense.duplicateStatus = 'OPEN';
+    expense.duplicateReviewedAt = null;
+  }
 };
 
 export const listExpenses = async (req: AuthenticatedRequest, res: Response) => {
+  await processDueRecurringExpenses(req.user!.id);
+
   const startDate = typeof req.query.startDate === 'string' ? req.query.startDate : undefined;
   const endDate = typeof req.query.endDate === 'string' ? req.query.endDate : undefined;
   const categoryId = typeof req.query.categoryId === 'string' ? req.query.categoryId : undefined;
-  const search = typeof req.query.search === 'string' ? req.query.search.toLowerCase() : undefined;
+  const search = typeof req.query.search === 'string' ? req.query.search.toLowerCase().trim() : undefined;
+  const status = typeof req.query.status === 'string' ? req.query.status.toUpperCase() : undefined;
+  const tags = parseFilterArray(typeof req.query.tags === 'string' ? req.query.tags : undefined).map((item) => item.toLowerCase());
+  const duplicatesOnly = String(req.query.duplicatesOnly ?? '') === 'true';
 
   const items = await expenseRepo().find({
     where: { user: { id: req.user!.id } },
@@ -109,8 +239,17 @@ export const listExpenses = async (req: AuthenticatedRequest, res: Response) =>
     if (startDate && item.expenseDate < startDate) return false;
     if (endDate && item.expenseDate > endDate) return false;
     if (categoryId && item.category.id !== categoryId) return false;
+    if (status && item.status !== status) return false;
+    if (duplicatesOnly && !(item.possibleDuplicate && item.duplicateStatus !== 'DISMISSED')) return false;
+    if (tags.length) {
+      const itemTags = (item.tags ?? []).map((tag) => tag.toLowerCase());
+      if (!tags.every((tag) => itemTags.includes(tag))) return false;
+    }
     if (search) {
-      const haystack = [item.title, item.description ?? '', item.merchant ?? ''].join(' ').toLowerCase();
+      const customValues = Object.entries(item.customFields ?? {}).flatMap(([key, value]) => [key, value]);
+      const haystack = [item.title, item.description ?? '', item.merchant ?? '', ...(item.tags ?? []), ...customValues]
+        .join(' ')
+        .toLowerCase();
       if (!haystack.includes(search)) return false;
     }
     return true;
@@ -119,13 +258,51 @@ export const listExpenses = async (req: AuthenticatedRequest, res: Response) =>
   return res.json({ items: filtered.map(serializeExpense) });
 };
 
+export const listDuplicates = async (req: AuthenticatedRequest, res: Response) => {
+  await processDueRecurringExpenses(req.user!.id);
+  const items = await expenseRepo().find({
+    where: { user: { id: req.user!.id } },
+    relations: { category: { user: true }, proofs: true, user: true },
+    order: { expenseDate: 'DESC', createdAt: 'DESC' }
+  });
+
+  const flagged = items.filter((item) => item.possibleDuplicate && item.duplicateStatus === 'OPEN');
+  const groups = await Promise.all(
+    flagged.map(async (item) => ({
+      source: serializeExpense(item),
+      matches: (await findDuplicateMatches({
+        userId: req.user!.id,
+        expenseId: item.id,
+        amount: item.amount,
+        expenseDate: item.expenseDate,
+        merchant: item.merchant,
+        title: item.title,
+        customFields: item.customFields ?? {}
+      })).slice(0, 5).map(serializeExpense)
+    }))
+  );
+
+  return res.json({ items: groups.filter((group) => group.matches.length) });
+};
+
 export const createExpense = async (req: AuthenticatedRequest, res: Response) => {
-  const parsed = createExpenseSchema.safeParse(req.body);
+  const uploadedFiles = getUploadedFiles(req);
+  const parsed = createExpenseSchema.safeParse(enrichPayload(req.body as Record<string, unknown>));
   if (!parsed.success) {
-    removeUploadedFile(req.file?.filename);
+    removeUploadedFiles(uploadedFiles);
     return res.status(400).json({ message: 'Invalid expense payload', issues: parsed.error.issues });
   }
 
+  if (!validateInitialStatus(parsed.data.status)) {
+    removeUploadedFiles(uploadedFiles);
+    return res.status(400).json({ message: 'A new expense can start only as draft, pending, or approved.' });
+  }
+
+  if (approvalNeedsProof(parsed.data.status) && uploadedFiles.length === 0) {
+    removeUploadedFiles(uploadedFiles);
+    return res.status(400).json({ message: 'An attachment is required before an expense can be approved.' });
+  }
+
   const user = await userRepo().findOne({ where: { id: req.user!.id } });
   const category = await categoryRepo().findOne({
     where: [{ id: parsed.data.categoryId, isSystem: true }, { id: parsed.data.categoryId, user: { id: req.user!.id } }],
@@ -133,51 +310,74 @@ export const createExpense = async (req: AuthenticatedRequest, res: Response) =>
   });
 
   if (!user || !category) {
-    removeUploadedFile(req.file?.filename);
+    removeUploadedFiles(uploadedFiles);
     return res.status(404).json({ message: 'Category not found' });
   }
 
-  const proofs: Proof[] = [];
-  if (req.file || parsed.data.proofLabel || parsed.data.proofNote || parsed.data.proofType) {
+  const duplicates = await findDuplicateMatches({
+    userId: req.user!.id,
+    amount: parsed.data.amount,
+    expenseDate: parsed.data.expenseDate,
+    merchant: parsed.data.merchant,
+    title: parsed.data.title,
+    customFields: parsed.data.customFields
+  });
+
+  const proofs: Proof[] = uploadedFiles.map((file, index) =>
+    proofRepo().create({
+      type: parsed.data.proofType ?? 'OTHER',
+      label: uploadedFiles.length === 1 ? (parsed.data.proofLabel ?? file.originalname ?? 'Attachment') : file.originalname,
+      note: uploadedFiles.length === 1 && index === 0 ? (parsed.data.proofNote ?? null) : null,
+      originalName: file.originalname ?? null,
+      storedName: file.filename ?? null,
+      mimeType: file.mimetype ?? null,
+      fileSize: file.size ?? null
+    })
+  );
+
+  if (!proofs.length && (parsed.data.proofLabel || parsed.data.proofNote || parsed.data.proofType)) {
     proofs.push(
       proofRepo().create({
         type: parsed.data.proofType ?? 'OTHER',
-        label: parsed.data.proofLabel ?? req.file?.originalname ?? 'Attachment',
+        label: parsed.data.proofLabel ?? 'Attachment',
         note: parsed.data.proofNote ?? null,
-        originalName: req.file?.originalname ?? null,
-        storedName: req.file?.filename ?? null,
-        mimeType: req.file?.mimetype ?? null,
-        fileSize: req.file?.size ?? null
+        originalName: null,
+        storedName: null,
+        mimeType: null,
+        fileSize: null
       })
     );
   }
 
-  const item = await expenseRepo().save(
-    expenseRepo().create({
-      title: parsed.data.title,
-      description: parsed.data.description ?? null,
-      amount: parsed.data.amount,
-      expenseDate: parsed.data.expenseDate,
-      merchant: parsed.data.merchant ?? null,
-      paymentMethod: parsed.data.paymentMethod ?? null,
-      currency: parsed.data.currency,
-      possibleDuplicate: await isDuplicate(req.user!.id, parsed.data.amount, parsed.data.expenseDate, parsed.data.merchant),
-      user,
-      category,
-      proofs
-    })
-  );
-
-  const fullItem = await expenseRepo().findOneOrFail({
-    where: { id: item.id },
-    relations: { category: { user: true }, proofs: true, user: true }
+  const item = expenseRepo().create({
+    title: parsed.data.title,
+    description: parsed.data.description ?? null,
+    amount: parsed.data.amount,
+    expenseDate: parsed.data.expenseDate,
+    merchant: parsed.data.merchant ?? null,
+    paymentMethod: parsed.data.paymentMethod ?? null,
+    currency: parsed.data.currency,
+    status: parsed.data.status,
+    tags: parsed.data.tags,
+    customFields: parsed.data.customFields,
+    possibleDuplicate: false,
+    duplicateStatus: null,
+    duplicateReviewedAt: null,
+    recurringSourceId: null,
+    user,
+    category,
+    proofs
   });
+  applyDuplicateState(item, duplicates);
 
-  return res.status(201).json({ item: serializeExpense(fullItem) });
+  await expenseRepo().save(item);
+
+  const fullItem = await hydrateExpense(item.id);
+  return res.status(201).json({ item: serializeExpense(fullItem), warnings: buildWarnings(duplicates, parsed.data.amount, parsed.data.expenseDate) });
 };
 
 export const updateExpense = async (req: AuthenticatedRequest, res: Response) => {
-  const parsed = updateExpenseSchema.safeParse(req.body);
+  const parsed = updateExpenseSchema.safeParse(enrichPayload(req.body as Record<string, unknown>));
   if (!parsed.success) {
     return res.status(400).json({ message: 'Invalid expense payload', issues: parsed.error.issues });
   }
@@ -191,12 +391,30 @@ export const updateExpense = async (req: AuthenticatedRequest, res: Response) =>
     return res.status(403).json({ message: 'You cannot edit this expense' });
   }
 
+  if (!validateStatusTransition(item.status, parsed.data.status)) {
+    return res.status(400).json({ message: `Status transition from ${item.status} to ${parsed.data.status} is not allowed.` });
+  }
+
+  if (approvalNeedsProof(parsed.data.status) && item.proofs.length === 0) {
+    return res.status(400).json({ message: 'Add at least one attachment before approving an expense.' });
+  }
+
   const category = await categoryRepo().findOne({
     where: [{ id: parsed.data.categoryId, isSystem: true }, { id: parsed.data.categoryId, user: { id: req.user!.id } }],
     relations: { user: true }
   });
   if (!category) return res.status(404).json({ message: 'Category not found' });
 
+  const duplicates = await findDuplicateMatches({
+    userId: req.user!.id,
+    expenseId: item.id,
+    amount: parsed.data.amount,
+    expenseDate: parsed.data.expenseDate,
+    merchant: parsed.data.merchant,
+    title: parsed.data.title,
+    customFields: parsed.data.customFields
+  });
+
   item.title = parsed.data.title;
   item.description = parsed.data.description ?? null;
   item.amount = parsed.data.amount;
@@ -204,10 +422,61 @@ export const updateExpense = async (req: AuthenticatedRequest, res: Response) =>
   item.merchant = parsed.data.merchant ?? null;
   item.paymentMethod = parsed.data.paymentMethod ?? null;
   item.currency = parsed.data.currency;
+  item.status = parsed.data.status;
+  item.tags = parsed.data.tags;
+  item.customFields = parsed.data.customFields;
   item.category = category;
+  applyDuplicateState(item, duplicates);
 
   await expenseRepo().save(item);
-  return res.json({ item: serializeExpense(item) });
+  const refreshed = await hydrateExpense(item.id);
+  return res.json({ item: serializeExpense(refreshed), warnings: buildWarnings(duplicates, parsed.data.amount, parsed.data.expenseDate) });
+};
+
+export const reviewDuplicate = async (req: AuthenticatedRequest, res: Response) => {
+  const parsed = duplicateReviewSchema.safeParse(req.body ?? {});
+  if (!parsed.success) return res.status(400).json({ message: 'Invalid duplicate review payload', issues: parsed.error.issues });
+
+  const item = await expenseRepo().findOne({
+    where: { id: String(req.params.id) },
+    relations: { user: true, category: { user: true }, proofs: true }
+  });
+  if (!item) return res.status(404).json({ message: 'Expense not found' });
+  if (req.user?.role !== 'ADMIN' && item.user.id !== req.user?.id) {
+    return res.status(403).json({ message: 'You cannot review duplicates for this expense' });
+  }
+
+  const now = new Date();
+  if (parsed.data.action === 'DISMISS') {
+    item.possibleDuplicate = false;
+    item.duplicateStatus = 'DISMISSED';
+    item.duplicateReviewedAt = now;
+  }
+
+  if (parsed.data.action === 'CONFIRM') {
+    item.possibleDuplicate = true;
+    item.duplicateStatus = 'CONFIRMED';
+    item.duplicateReviewedAt = now;
+  }
+
+  if (parsed.data.action === 'REOPEN') {
+    const duplicates = await findDuplicateMatches({
+      userId: item.user.id,
+      expenseId: item.id,
+      amount: item.amount,
+      expenseDate: item.expenseDate,
+      merchant: item.merchant,
+      title: item.title,
+      customFields: item.customFields ?? {}
+    });
+    item.possibleDuplicate = duplicates.length > 0;
+    item.duplicateStatus = duplicates.length > 0 ? ('OPEN' as DuplicateReviewStatus) : null;
+    item.duplicateReviewedAt = duplicates.length > 0 ? null : now;
+  }
+
+  await expenseRepo().save(item);
+  const refreshed = await hydrateExpense(item.id);
+  return res.json({ item: serializeExpense(refreshed) });
 };
 
 export const deleteExpense = async (req: AuthenticatedRequest, res: Response) => {
@@ -220,44 +489,59 @@ export const deleteExpense = async (req: AuthenticatedRequest, res: Response) =>
     return res.status(403).json({ message: 'You cannot delete this expense' });
   }
 
-  for (const proof of item.proofs ?? []) removeUploadedFile(proof.storedName ?? undefined);
+  item.proofs.forEach((proof) => removeUploadedFile(proof.storedName ?? undefined));
   await expenseRepo().remove(item);
   return res.status(204).send();
 };
 
 export const addProof = async (req: AuthenticatedRequest, res: Response) => {
-  const parsed = addProofSchema.safeParse(req.body);
+  const uploadedFiles = getUploadedFiles(req);
+  const parsed = addProofSchema.safeParse(req.body ?? {});
   if (!parsed.success) {
-    removeUploadedFile(req.file?.filename);
-    return res.status(400).json({ message: 'Invalid attachment payload', issues: parsed.error.issues });
+    removeUploadedFiles(uploadedFiles);
+    return res.status(400).json({ message: 'Invalid proof payload', issues: parsed.error.issues });
   }
 
-  const item = await expenseRepo().findOne({
+  const expense = await expenseRepo().findOne({
     where: { id: String(req.params.id) },
     relations: { user: true, proofs: true, category: { user: true } }
   });
-  if (!item) {
-    removeUploadedFile(req.file?.filename);
+  if (!expense) {
+    removeUploadedFiles(uploadedFiles);
     return res.status(404).json({ message: 'Expense not found' });
   }
-  if (req.user?.role !== 'ADMIN' && item.user.id !== req.user?.id) {
-    removeUploadedFile(req.file?.filename);
-    return res.status(403).json({ message: 'You cannot edit this expense' });
+  if (req.user?.role !== 'ADMIN' && expense.user.id !== req.user?.id) {
+    removeUploadedFiles(uploadedFiles);
+    return res.status(403).json({ message: 'You cannot add proof to this expense' });
   }
 
-  const proof = await proofRepo().save(
-    proofRepo().create({
-      type: parsed.data.type,
-      label: parsed.data.label ?? req.file?.originalname ?? 'Attachment',
-      note: parsed.data.note ?? null,
-      originalName: req.file?.originalname ?? null,
-      storedName: req.file?.filename ?? null,
-      mimeType: req.file?.mimetype ?? null,
-      fileSize: req.file?.size ?? null,
-      expense: item
-    })
-  );
+  const createdProofs = uploadedFiles.length
+    ? uploadedFiles.map((file) =>
+        proofRepo().create({
+          type: parsed.data.type,
+          label: parsed.data.label ?? file.originalname ?? 'Attachment',
+          note: parsed.data.note ?? null,
+          originalName: file.originalname ?? null,
+          storedName: file.filename ?? null,
+          mimeType: file.mimetype ?? null,
+          fileSize: file.size ?? null,
+          expense
+        })
+      )
+    : [
+        proofRepo().create({
+          type: parsed.data.type,
+          label: parsed.data.label ?? 'Attachment',
+          note: parsed.data.note ?? null,
+          originalName: null,
+          storedName: null,
+          mimeType: null,
+          fileSize: null,
+          expense
+        })
+      ];
 
-  item.proofs = [...(item.proofs ?? []), proof];
-  return res.status(201).json({ proof: serializeProof(proof), expense: serializeExpense(item) });
+  await proofRepo().save(createdProofs);
+  const refreshed = await hydrateExpense(expense.id);
+  return res.status(201).json({ proofs: createdProofs.map(serializeProof), expense: serializeExpense(refreshed) });
 };

api/src/controllers/integration.controller.ts

@@ -0,0 +1,505 @@
+import type { Response } from 'express';
+import { z } from 'zod';
+import { AppDataSource } from '../config/data-source.js';
+import { Category } from '../entities/Category.js';
+import { Expense } from '../entities/Expense.js';
+import { User } from '../entities/User.js';
+import type { AuthenticatedRequest } from '../types/express.js';
+
+const settingsSchema = z.object({
+  enabled: z.boolean(),
+  baseUrl: z.string().max(500).nullable().optional(),
+  apiToken: z.string().max(500).optional(),
+  authMode: z.enum(['bearer', 'x-api-token', 'both']).default('both'),
+  ownerId: z.string().max(120).nullable().optional(),
+  defaultListId: z.string().max(120).nullable().optional()
+});
+
+const proxyQuerySchema = z.object({
+  start_date: z.string().optional(),
+  end_date: z.string().optional(),
+  list_id: z.string().optional(),
+  owner_id: z.string().optional(),
+  ownerId: z.string().optional(),
+  limit: z.coerce.number().int().min(1).max(500).optional()
+});
+
+const importStatusSchema = z.enum(['DRAFT', 'PENDING']).default('PENDING');
+
+const importListSchema = z.object({
+  listId: z.union([z.string(), z.number()]),
+  listTitle: z.string().max(180).nullable().optional(),
+  listCreatedAt: z.string().max(60).nullable().optional(),
+  categoryId: z.string().uuid(),
+  status: importStatusSchema,
+  merchant: z.string().max(120).nullable().optional(),
+  title: z.string().max(140).nullable().optional(),
+  description: z.string().max(1000).nullable().optional(),
+  expenseDate: z.string().min(10).max(10).nullable().optional(),
+  tags: z.array(z.string().min(1).max(40)).default([])
+});
+
+const importItemSchema = z.object({
+  expenseId: z.union([z.string(), z.number()]).optional(),
+  listId: z.union([z.string(), z.number()]).optional(),
+  listTitle: z.string().max(180).nullable().optional(),
+  categoryId: z.string().uuid(),
+  status: importStatusSchema,
+  title: z.string().min(2).max(140),
+  amount: z.coerce.number().positive(),
+  expenseDate: z.string().min(10).max(10),
+  merchant: z.string().max(120).nullable().optional(),
+  ownerName: z.string().max(160).nullable().optional(),
+  description: z.string().max(1000).nullable().optional(),
+  tags: z.array(z.string().min(1).max(40)).default([])
+});
+
+const userRepo = () => AppDataSource.getRepository(User);
+const expenseRepo = () => AppDataSource.getRepository(Expense);
+const categoryRepo = () => AppDataSource.getRepository(Category);
+
+const normalizeBaseUrl = (value?: string | null) => (value ?? '').trim().replace(/\/+$/, '');
+const trimToNull = (value?: string | null) => {
+  const normalized = value?.trim();
+  return normalized ? normalized : null;
+};
+
+const normalizeTags = (values: string[]) =>
+  Array.from(new Set(values.map((item) => item.trim()).filter(Boolean).slice(0, 20)));
+
+const getSettings = async (userId: string) => {
+  const user = await userRepo().findOne({ where: { id: userId } });
+  return user ?? null;
+};
+
+const sanitizeIntegration = (value: User['shoppingListIntegration']) => ({
+  enabled: Boolean(value?.enabled),
+  baseUrl: value?.baseUrl ?? '',
+  hasToken: Boolean(value?.apiToken),
+  authMode: value?.authMode ?? 'both',
+  ownerId: value?.ownerId ?? null,
+  defaultListId: value?.defaultListId ?? null
+});
+
+type ShoppingListConfig = NonNullable<User['shoppingListIntegration']>;
+
+const buildHeaders = (config: ShoppingListConfig) => {
+  const headers: Record<string, string> = { Accept: 'application/json' };
+  if (config.authMode === 'bearer' || config.authMode === 'both') headers.Authorization = `Bearer ${config.apiToken}`;
+  if (config.authMode === 'x-api-token' || config.authMode === 'both') headers['X-API-Token'] = String(config.apiToken);
+  return headers;
+};
+
+const requireConfig = async (userId: string) => {
+  const user = await getSettings(userId);
+  if (!user) throw new Error('User not found');
+  const config = user.shoppingListIntegration;
+  if (!config?.enabled || !config.baseUrl || !config.apiToken) throw new Error('Shopping list integration is not configured for this user');
+  return { user, config };
+};
+
+const proxyRequest = async (config: ShoppingListConfig, endpoint: string, query?: Record<string, string | number | undefined>) => {
+  const url = new URL(`${normalizeBaseUrl(config.baseUrl)}${endpoint}`);
+  Object.entries(query ?? {}).forEach(([key, value]) => {
+    if (value !== undefined && value !== null && `${value}` !== '') url.searchParams.set(key, String(value));
+  });
+
+  const response = await fetch(url, {
+    method: 'GET',
+    headers: buildHeaders(config),
+    signal: AbortSignal.timeout(10000)
+  });
+
+  const text = await response.text();
+  const contentType = response.headers.get('content-type') ?? 'application/json';
+  let payload: unknown = text;
+  if (contentType.includes('application/json')) {
+    try {
+      payload = text ? JSON.parse(text) : {};
+    } catch {
+      payload = { raw: text };
+    }
+  }
+
+  if (!response.ok) {
+    const message = typeof payload === 'object' && payload && 'message' in payload ? String((payload as { message?: unknown }).message ?? 'Integration request failed') : 'Integration request failed';
+    const error = new Error(message) as Error & { status?: number; details?: unknown };
+    error.status = response.status;
+    error.details = payload;
+    throw error;
+  }
+
+  return payload;
+};
+
+const pickItems = (payload: unknown): Record<string, unknown>[] => {
+  if (!payload || typeof payload !== 'object') return [];
+  const items = (payload as { items?: unknown; data?: unknown }).items ?? (payload as { items?: unknown; data?: unknown }).data;
+  return Array.isArray(items) ? items.filter((item): item is Record<string, unknown> => Boolean(item && typeof item === 'object')) : [];
+};
+
+const readString = (...values: unknown[]) => {
+  for (const value of values) {
+    if (typeof value === 'string' && value.trim()) return value.trim();
+    if (typeof value === 'number' && Number.isFinite(value)) return String(value);
+  }
+  return null;
+};
+
+const readNumber = (...values: unknown[]) => {
+  for (const value of values) {
+    if (typeof value === 'number' && Number.isFinite(value)) return value;
+    if (typeof value === 'string' && value.trim()) {
+      const parsed = Number(value);
+      if (Number.isFinite(parsed)) return parsed;
+    }
+  }
+  return 0;
+};
+
+const readDate = (...values: unknown[]) => {
+  const raw = readString(...values);
+  if (!raw) return null;
+  return raw.length >= 10 ? raw.slice(0, 10) : null;
+};
+
+const readItemAmount = (item: Record<string, unknown>) => readNumber(item.amount, item.total, item.value, item.price);
+const readItemDate = (item: Record<string, unknown>) => readDate(item.expense_date, item.added_at, item.created_at, item.date);
+const readItemTitle = (item: Record<string, unknown>) => {
+  const list = item.list && typeof item.list === 'object' ? (item.list as Record<string, unknown>) : null;
+  return readString(item.title, item.name, list?.title, list?.name) ?? 'Imported shopping list item';
+};
+const readOwnerName = (item: Record<string, unknown>) => {
+  const owner = item.owner && typeof item.owner === 'object' ? (item.owner as Record<string, unknown>) : null;
+  return readString(owner?.fullName, owner?.name, owner?.username, owner?.email);
+};
+
+const deriveListDate = (items: Record<string, unknown>[], listCreatedAt?: string | null) => {
+  const itemDates = items.map((item) => readItemDate(item)).filter((value): value is string => Boolean(value)).sort();
+  return itemDates[itemDates.length - 1] ?? readDate(listCreatedAt) ?? new Date().toISOString().slice(0, 10);
+};
+
+const resolveCategory = async (userId: string, categoryId: string) =>
+  categoryRepo().findOne({
+    where: [{ id: categoryId, isSystem: true }, { id: categoryId, user: { id: userId } }],
+    relations: { user: true }
+  });
+
+const hydrateExpense = async (id: string) =>
+  expenseRepo().findOneOrFail({
+    where: { id },
+    relations: { user: true, category: { user: true }, proofs: true }
+  });
+
+const serializeExpense = (expense: Expense) => ({
+  id: expense.id,
+  title: expense.title,
+  description: expense.description,
+  amount: expense.amount,
+  expenseDate: expense.expenseDate,
+  merchant: expense.merchant,
+  paymentMethod: expense.paymentMethod,
+  currency: expense.currency,
+  status: expense.status,
+  tags: expense.tags ?? [],
+  customFields: expense.customFields ?? {},
+  possibleDuplicate: expense.possibleDuplicate,
+  duplicateStatus: expense.duplicateStatus,
+  duplicateReviewedAt: expense.duplicateReviewedAt,
+  recurringSourceId: expense.recurringSourceId,
+  category: {
+    id: expense.category.id,
+    name: expense.category.name,
+    color: expense.category.color,
+    isSystem: expense.category.isSystem,
+    ownerId: expense.category.user?.id ?? null
+  },
+  proofs: expense.proofs ?? [],
+  createdAt: expense.createdAt,
+  updatedAt: expense.updatedAt
+});
+
+const getExistingExpenses = async (userId: string) =>
+  expenseRepo().find({
+    where: { user: { id: userId } },
+    relations: { user: true, category: { user: true }, proofs: true },
+    order: { expenseDate: 'DESC', createdAt: 'DESC' },
+    take: 500
+  });
+
+const hasExternalImport = (items: Expense[], key: string, value?: string | null) => {
+  if (!value) return false;
+  return items.some((item) => String(item.customFields?.[key] ?? '') === String(value));
+};
+
+const findDuplicateMatches = (items: Expense[], input: { amount: number; expenseDate: string; title: string; merchant?: string | null; externalExpenseId?: string | null; externalListId?: string | null }) => {
+  const merchantKey = input.merchant?.trim().toLowerCase() ?? null;
+  const titleKey = input.title.trim().toLowerCase();
+  const inputDate = new Date(`${input.expenseDate}T00:00:00`).getTime();
+
+  return items.filter((item) => {
+    if (item.duplicateStatus === 'DISMISSED') return false;
+    if (input.externalExpenseId && String(item.customFields?.externalShoppingListExpenseId ?? '') === input.externalExpenseId) return true;
+    if (input.externalListId && String(item.customFields?.externalShoppingListListId ?? '') === input.externalListId) return true;
+    const itemDate = new Date(`${item.expenseDate}T00:00:00`).getTime();
+    const sameAmount = Math.abs(item.amount - input.amount) < 0.001;
+    const sameMerchant = merchantKey ? item.merchant?.trim().toLowerCase() === merchantKey : false;
+    const sameTitle = item.title.trim().toLowerCase() === titleKey;
+    const closeDate = Math.abs(itemDate - inputDate) <= 1000 * 60 * 60 * 24 * 3;
+    return sameAmount && closeDate && (sameMerchant || sameTitle);
+  });
+};
+
+const applyDuplicateState = (expense: Expense, duplicates: Expense[]) => {
+  expense.possibleDuplicate = duplicates.length > 0;
+  expense.duplicateStatus = duplicates.length > 0 ? 'OPEN' : null;
+  expense.duplicateReviewedAt = null;
+};
+
+const createImportedExpense = async (input: {
+  userId: string;
+  categoryId: string;
+  title: string;
+  description?: string | null;
+  amount: number;
+  expenseDate: string;
+  merchant?: string | null;
+  status: 'DRAFT' | 'PENDING';
+  tags: string[];
+  customFields: Record<string, string>;
+}) => {
+  const user = await userRepo().findOne({ where: { id: input.userId } });
+  const category = await resolveCategory(input.userId, input.categoryId);
+  if (!user || !category) throw new Error('Category not found');
+
+  const existing = await getExistingExpenses(input.userId);
+  const duplicates = findDuplicateMatches(existing, {
+    amount: input.amount,
+    expenseDate: input.expenseDate,
+    title: input.title,
+    merchant: input.merchant,
+    externalExpenseId: input.customFields.externalShoppingListExpenseId ?? null,
+    externalListId: input.customFields.externalShoppingListImportType === 'LIST' ? input.customFields.externalShoppingListListId ?? null : null
+  });
+
+  const expense = expenseRepo().create({
+    title: input.title,
+    description: input.description ?? null,
+    amount: input.amount,
+    expenseDate: input.expenseDate,
+    merchant: input.merchant ?? null,
+    paymentMethod: null,
+    currency: 'PLN',
+    status: input.status,
+    tags: input.tags,
+    customFields: input.customFields,
+    possibleDuplicate: false,
+    duplicateStatus: null,
+    duplicateReviewedAt: null,
+    recurringSourceId: null,
+    user,
+    category,
+    proofs: []
+  });
+
+  applyDuplicateState(expense, duplicates);
+  await expenseRepo().save(expense);
+  const hydrated = await hydrateExpense(expense.id);
+  const warnings = duplicates.length ? [`Possible duplicate detected (${duplicates.length} matching expense${duplicates.length > 1 ? 's' : ''}).`] : [];
+  return { item: serializeExpense(hydrated), warnings };
+};
+
+export const getShoppingListSettings = async (req: AuthenticatedRequest, res: Response) => {
+  const user = await getSettings(req.user!.id);
+  if (!user) return res.status(404).json({ message: 'User not found' });
+  return res.json({ item: sanitizeIntegration(user.shoppingListIntegration) });
+};
+
+export const updateShoppingListSettings = async (req: AuthenticatedRequest, res: Response) => {
+  const parsed = settingsSchema.safeParse(req.body ?? {});
+  if (!parsed.success) return res.status(400).json({ message: 'Invalid integration settings payload', issues: parsed.error.issues });
+
+  const user = await getSettings(req.user!.id);
+  if (!user) return res.status(404).json({ message: 'User not found' });
+
+  const current = user.shoppingListIntegration ?? {};
+  user.shoppingListIntegration = {
+    enabled: parsed.data.enabled,
+    baseUrl: normalizeBaseUrl(parsed.data.baseUrl),
+    apiToken: parsed.data.apiToken?.trim() ? parsed.data.apiToken.trim() : current.apiToken,
+    authMode: parsed.data.authMode,
+    ownerId: parsed.data.ownerId ?? null,
+    defaultListId: parsed.data.defaultListId ?? null
+  };
+
+  await userRepo().save(user);
+  return res.json({ item: sanitizeIntegration(user.shoppingListIntegration) });
+};
+
+export const testShoppingListConnection = async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const { config } = await requireConfig(req.user!.id);
+    const payload = await proxyRequest(config, '/api/ping');
+    return res.json({ ok: true, payload });
+  } catch (error) {
+    return res.status((error as { status?: number }).status ?? 400).json({ message: (error as Error).message });
+  }
+};
+
+export const getShoppingListSummary = async (req: AuthenticatedRequest, res: Response) => {
+  const parsed = proxyQuerySchema.safeParse(req.query);
+  if (!parsed.success) return res.status(400).json({ message: 'Invalid integration query', issues: parsed.error.issues });
+  try {
+    const { config } = await requireConfig(req.user!.id);
+    const payload = await proxyRequest(config, '/api/expenses/summary', {
+      start_date: parsed.data.start_date,
+      end_date: parsed.data.end_date,
+      list_id: parsed.data.list_id ?? config.defaultListId ?? undefined,
+      owner_id: parsed.data.owner_id ?? parsed.data.ownerId ?? config.ownerId ?? undefined
+    });
+    return res.json(payload);
+  } catch (error) {
+    return res.status((error as { status?: number }).status ?? 400).json({ message: (error as Error).message });
+  }
+};
+
+export const getShoppingListLatestExpenses = async (req: AuthenticatedRequest, res: Response) => {
+  const parsed = proxyQuerySchema.safeParse(req.query);
+  if (!parsed.success) return res.status(400).json({ message: 'Invalid integration query', issues: parsed.error.issues });
+  try {
+    const { config } = await requireConfig(req.user!.id);
+    const payload = await proxyRequest(config, '/api/expenses/latest', {
+      start_date: parsed.data.start_date,
+      end_date: parsed.data.end_date,
+      list_id: parsed.data.list_id ?? config.defaultListId ?? undefined,
+      owner_id: parsed.data.owner_id ?? parsed.data.ownerId ?? config.ownerId ?? undefined,
+      limit: parsed.data.limit
+    });
+    return res.json(payload);
+  } catch (error) {
+    return res.status((error as { status?: number }).status ?? 400).json({ message: (error as Error).message });
+  }
+};
+
+export const getShoppingLists = async (req: AuthenticatedRequest, res: Response) => {
+  const parsed = proxyQuerySchema.safeParse(req.query);
+  if (!parsed.success) return res.status(400).json({ message: 'Invalid integration query', issues: parsed.error.issues });
+  try {
+    const { config } = await requireConfig(req.user!.id);
+    const payload = await proxyRequest(config, '/api/lists', {
+      owner_id: parsed.data.owner_id ?? parsed.data.ownerId ?? config.ownerId ?? undefined,
+      limit: parsed.data.limit
+    });
+    return res.json(payload);
+  } catch (error) {
+    return res.status((error as { status?: number }).status ?? 400).json({ message: (error as Error).message });
+  }
+};
+
+export const getShoppingListExpenses = async (req: AuthenticatedRequest, res: Response) => {
+  const parsed = proxyQuerySchema.pick({ limit: true }).safeParse(req.query);
+  if (!parsed.success) return res.status(400).json({ message: 'Invalid integration query', issues: parsed.error.issues });
+  try {
+    const { config } = await requireConfig(req.user!.id);
+    const listId = String(req.params.id);
+    const payload = await proxyRequest(config, `/api/lists/${encodeURIComponent(listId)}/expenses`, { limit: parsed.data.limit });
+    return res.json(payload);
+  } catch (error) {
+    return res.status((error as { status?: number }).status ?? 400).json({ message: (error as Error).message });
+  }
+};
+
+export const importShoppingListAsExpense = async (req: AuthenticatedRequest, res: Response) => {
+  const parsed = importListSchema.safeParse(req.body ?? {});
+  if (!parsed.success) return res.status(400).json({ message: 'Invalid shopping list import payload', issues: parsed.error.issues });
+
+  try {
+    const { user, config } = await requireConfig(req.user!.id);
+    const existing = await getExistingExpenses(user.id);
+    const listId = String(parsed.data.listId);
+    if (hasExternalImport(existing, 'externalShoppingListListId', listId)) {
+      return res.status(409).json({ message: 'This shopping list has already been imported as a local expense.' });
+    }
+
+    const payload = await proxyRequest(config, `/api/lists/${encodeURIComponent(listId)}/expenses`, { limit: 500 });
+    const items = pickItems(payload);
+    const totalAmount = items.reduce((sum, item) => sum + readItemAmount(item), 0);
+    if (!items.length || totalAmount <= 0) {
+      return res.status(400).json({ message: 'The selected shopping list does not contain any importable expenses.' });
+    }
+
+    const ownerNames = Array.from(new Set(items.map((item) => readOwnerName(item)).filter((value): value is string => Boolean(value))));
+    const derivedDate = parsed.data.expenseDate ?? deriveListDate(items, parsed.data.listCreatedAt);
+    const title = trimToNull(parsed.data.title) ?? `Shopping list: ${trimToNull(parsed.data.listTitle) ?? listId}`;
+    const description = trimToNull(parsed.data.description) ?? `Imported aggregate from shopping list API (${items.length} item${items.length > 1 ? 's' : ''}).`;
+    const merchant = trimToNull(parsed.data.merchant) ?? trimToNull(parsed.data.listTitle) ?? 'Shopping list API';
+    const tags = normalizeTags([...parsed.data.tags, 'shopping-list', 'external-import']);
+
+    const result = await createImportedExpense({
+      userId: user.id,
+      categoryId: parsed.data.categoryId,
+      title,
+      description,
+      amount: Number(totalAmount.toFixed(2)),
+      expenseDate: derivedDate,
+      merchant,
+      status: parsed.data.status,
+      tags,
+      customFields: {
+        externalSource: 'shopping-list-api',
+        externalShoppingListImportType: 'LIST',
+        externalShoppingListListId: listId,
+        externalShoppingListListTitle: trimToNull(parsed.data.listTitle) ?? listId,
+        externalShoppingListItemCount: String(items.length),
+        externalShoppingListOwner: ownerNames.join(', ')
+      }
+    });
+
+    return res.status(201).json(result);
+  } catch (error) {
+    return res.status((error as { status?: number }).status ?? 400).json({ message: (error as Error).message });
+  }
+};
+
+export const importShoppingListItemAsExpense = async (req: AuthenticatedRequest, res: Response) => {
+  const parsed = importItemSchema.safeParse(req.body ?? {});
+  if (!parsed.success) return res.status(400).json({ message: 'Invalid shopping list item import payload', issues: parsed.error.issues });
+
+  try {
+    const { user } = await requireConfig(req.user!.id);
+    const externalExpenseId = parsed.data.expenseId !== undefined ? String(parsed.data.expenseId) : null;
+    const existing = await getExistingExpenses(user.id);
+    if (externalExpenseId && hasExternalImport(existing, 'externalShoppingListExpenseId', externalExpenseId)) {
+      return res.status(409).json({ message: 'This shopping list item has already been imported as a local expense.' });
+    }
+
+    const title = parsed.data.title.trim();
+    const merchant = trimToNull(parsed.data.merchant) ?? trimToNull(parsed.data.listTitle) ?? 'Shopping list API';
+    const tags = normalizeTags([...parsed.data.tags, 'shopping-list', 'external-import']);
+    const description = trimToNull(parsed.data.description) ?? `Imported from shopping list API${parsed.data.listTitle ? ` (${parsed.data.listTitle})` : ''}.`;
+
+    const result = await createImportedExpense({
+      userId: user.id,
+      categoryId: parsed.data.categoryId,
+      title,
+      description,
+      amount: Number(parsed.data.amount.toFixed(2)),
+      expenseDate: parsed.data.expenseDate,
+      merchant,
+      status: parsed.data.status,
+      tags,
+      customFields: {
+        externalSource: 'shopping-list-api',
+        externalShoppingListImportType: 'ITEM',
+        externalShoppingListExpenseId: externalExpenseId ?? '',
+        externalShoppingListListId: parsed.data.listId !== undefined ? String(parsed.data.listId) : '',
+        externalShoppingListListTitle: trimToNull(parsed.data.listTitle) ?? '',
+        externalShoppingListOwner: trimToNull(parsed.data.ownerName) ?? ''
+      }
+    });
+
+    return res.status(201).json(result);
+  } catch (error) {
+    return res.status((error as { status?: number }).status ?? 400).json({ message: (error as Error).message });
+  }
+};

api/src/controllers/recurring.controller.ts

@@ -0,0 +1,190 @@
+import type { Response } from 'express';
+import { z } from 'zod';
+import { AppDataSource } from '../config/data-source.js';
+import { Category } from '../entities/Category.js';
+import { RecurringExpense } from '../entities/RecurringExpense.js';
+import type { AuthenticatedRequest } from '../types/express.js';
+import { processDueRecurringExpenses } from '../services/recurring.service.js';
+
+const paymentMethodSchema = z.enum(['CARD', 'CASH', 'TRANSFER', 'BLIK', 'OTHER']).nullable().optional();
+const recurringSchema = z.object({
+  title: z.string().min(2).max(140),
+  description: z.string().max(1000).nullable().optional(),
+  amount: z.coerce.number().positive(),
+  categoryId: z.string().uuid(),
+  merchant: z.string().max(120).nullable().optional(),
+  paymentMethod: paymentMethodSchema,
+  currency: z.string().min(3).max(8).default('PLN'),
+  frequency: z.enum(['WEEKLY', 'MONTHLY', 'YEARLY']).default('MONTHLY'),
+  intervalValue: z.coerce.number().int().min(1).max(24).default(1),
+  startDate: z.string().min(10).max(10),
+  nextRunDate: z.string().min(10).max(10),
+  endDate: z.string().min(10).max(10).nullable().optional(),
+  maxOccurrences: z.coerce.number().int().min(1).max(500).nullable().optional(),
+  defaultStatus: z.enum(['DRAFT', 'PENDING']).default('PENDING'),
+  tags: z.array(z.string().min(1).max(40)).default([]),
+  customFields: z.record(z.string(), z.string()).default({}),
+  isActive: z.boolean().default(true)
+});
+
+const recurringRepo = () => AppDataSource.getRepository(RecurringExpense);
+const categoryRepo = () => AppDataSource.getRepository(Category);
+
+const normalizeTagList = (value: unknown) => {
+  if (Array.isArray(value)) return value.map((item) => String(item).trim()).filter(Boolean);
+  if (typeof value === 'string') {
+    if (!value.trim()) return [];
+    try {
+      const parsed = JSON.parse(value);
+      if (Array.isArray(parsed)) return parsed.map((item) => String(item).trim()).filter(Boolean);
+    } catch {}
+    return value.split(',').map((item) => item.trim()).filter(Boolean);
+  }
+  return [];
+};
+
+const normalizeCustomFields = (value: unknown) => {
+  if (!value) return {} as Record<string, string>;
+  if (typeof value === 'string') {
+    if (!value.trim()) return {};
+    try {
+      const parsed = JSON.parse(value);
+      if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+        return Object.fromEntries(
+          Object.entries(parsed as Record<string, unknown>)
+            .map(([key, item]) => [String(key).trim(), String(item ?? '').trim()] as [string, string])
+            .filter(([key, item]) => Boolean(key && item))
+        );
+      }
+    } catch {}
+  }
+  if (typeof value === 'object' && !Array.isArray(value)) {
+    return Object.fromEntries(
+      Object.entries(value as Record<string, unknown>)
+        .map(([key, item]) => [String(key).trim(), String(item ?? '').trim()] as [string, string])
+        .filter(([key, item]) => Boolean(key && item))
+    );
+  }
+  return {};
+};
+
+const serializeRecurring = (item: RecurringExpense) => ({
+  id: item.id,
+  title: item.title,
+  description: item.description,
+  amount: item.amount,
+  merchant: item.merchant,
+  paymentMethod: item.paymentMethod,
+  currency: item.currency,
+  frequency: item.frequency,
+  intervalValue: item.intervalValue,
+  startDate: item.startDate,
+  nextRunDate: item.nextRunDate,
+  lastRunDate: item.lastRunDate,
+  endDate: item.endDate,
+  maxOccurrences: item.maxOccurrences,
+  generatedCount: item.generatedCount,
+  defaultStatus: item.defaultStatus,
+  tags: item.tags ?? [],
+  customFields: item.customFields ?? {},
+  isActive: item.isActive,
+  category: {
+    id: item.category.id,
+    name: item.category.name,
+    color: item.category.color,
+    isSystem: item.category.isSystem,
+    ownerId: item.category.user?.id ?? null
+  },
+  createdAt: item.createdAt,
+  updatedAt: item.updatedAt
+});
+
+const validateSchedule = (data: z.infer<typeof recurringSchema>) => {
+  if (data.endDate && data.endDate < data.startDate) return 'End date cannot be earlier than start date.';
+  if (data.endDate && data.nextRunDate > data.endDate) return 'Next run date cannot be later than the end date.';
+  if (data.nextRunDate < data.startDate) return 'Next run date cannot be earlier than the start date.';
+  return null;
+};
+
+export const listRecurringExpenses = async (req: AuthenticatedRequest, res: Response) => {
+  await processDueRecurringExpenses(req.user!.id);
+  const items = await recurringRepo().find({
+    where: { user: { id: req.user!.id } },
+    relations: { category: { user: true }, user: true },
+    order: { nextRunDate: 'ASC', createdAt: 'DESC' }
+  });
+  return res.json({ items: items.map(serializeRecurring) });
+};
+
+export const createRecurringExpense = async (req: AuthenticatedRequest, res: Response) => {
+  const parsed = recurringSchema.safeParse({ ...req.body, tags: normalizeTagList(req.body.tags), customFields: normalizeCustomFields(req.body.customFields) });
+  if (!parsed.success) return res.status(400).json({ message: 'Invalid recurring expense payload', issues: parsed.error.issues });
+
+  const scheduleError = validateSchedule(parsed.data);
+  if (scheduleError) return res.status(400).json({ message: scheduleError });
+
+  const category = await categoryRepo().findOne({
+    where: [{ id: parsed.data.categoryId, isSystem: true }, { id: parsed.data.categoryId, user: { id: req.user!.id } }],
+    relations: { user: true }
+  });
+  if (!category) return res.status(404).json({ message: 'Category not found' });
+
+  const saved = await recurringRepo().save(
+    recurringRepo().create({
+      ...parsed.data,
+      description: parsed.data.description ?? null,
+      merchant: parsed.data.merchant ?? null,
+      paymentMethod: parsed.data.paymentMethod ?? null,
+      endDate: parsed.data.endDate ?? null,
+      maxOccurrences: parsed.data.maxOccurrences ?? null,
+      generatedCount: 0,
+      category,
+      user: { id: req.user!.id } as never
+    })
+  );
+
+  const full = await recurringRepo().findOneOrFail({ where: { id: saved.id }, relations: { category: { user: true }, user: true } });
+  return res.status(201).json({ item: serializeRecurring(full) });
+};
+
+export const updateRecurringExpense = async (req: AuthenticatedRequest, res: Response) => {
+  const parsed = recurringSchema.safeParse({ ...req.body, tags: normalizeTagList(req.body.tags), customFields: normalizeCustomFields(req.body.customFields) });
+  if (!parsed.success) return res.status(400).json({ message: 'Invalid recurring expense payload', issues: parsed.error.issues });
+
+  const scheduleError = validateSchedule(parsed.data);
+  if (scheduleError) return res.status(400).json({ message: scheduleError });
+
+  const item = await recurringRepo().findOne({ where: { id: String(req.params.id), user: { id: req.user!.id } }, relations: { category: { user: true }, user: true } });
+  if (!item) return res.status(404).json({ message: 'Recurring expense not found' });
+
+  const category = await categoryRepo().findOne({
+    where: [{ id: parsed.data.categoryId, isSystem: true }, { id: parsed.data.categoryId, user: { id: req.user!.id } }],
+    relations: { user: true }
+  });
+  if (!category) return res.status(404).json({ message: 'Category not found' });
+
+  Object.assign(item, {
+    ...parsed.data,
+    description: parsed.data.description ?? null,
+    merchant: parsed.data.merchant ?? null,
+    paymentMethod: parsed.data.paymentMethod ?? null,
+    endDate: parsed.data.endDate ?? null,
+    maxOccurrences: parsed.data.maxOccurrences ?? null,
+    category
+  });
+
+  await recurringRepo().save(item);
+  return res.json({ item: serializeRecurring(item) });
+};
+
+export const deleteRecurringExpense = async (req: AuthenticatedRequest, res: Response) => {
+  const item = await recurringRepo().findOne({ where: { id: String(req.params.id), user: { id: req.user!.id } } });
+  if (!item) return res.status(404).json({ message: 'Recurring expense not found' });
+  await recurringRepo().remove(item);
+  return res.status(204).send();
+};
+
+export const processRecurringNow = async (req: AuthenticatedRequest, res: Response) => {
+  await processDueRecurringExpenses(req.user!.id);
+  return res.json({ message: 'Recurring expenses processed successfully' });
+};

api/src/controllers/report.controller.ts

@@ -1,25 +1,36 @@
-import type { Response } from 'express';
 import { createRequire } from 'node:module';
+import type { Response } from 'express';
 import { z } from 'zod';
 import { AppDataSource } from '../config/data-source.js';
 import { AppSetting } from '../entities/AppSetting.js';
+import { Expense } from '../entities/Expense.js';
 import { User } from '../entities/User.js';
 import { getStatistics } from '../services/statistics.service.js';
+import { processDueRecurringExpenses } from '../services/recurring.service.js';
 import type { AuthenticatedRequest } from '../types/express.js';
 
 const preferencesSchema = z.object({
   enabled: z.boolean(),
   frequency: z.enum(['monthly', 'yearly', 'threshold']),
   thresholdAmount: z.number().min(0).default(0),
-  sendToEmail: z.email().nullable().optional(),
+  sendToEmail: z.string().email().nullable().optional(),
   categoryIds: z.array(z.string().uuid()).default([])
 });
 
 const previewOverrideSchema = preferencesSchema.partial();
+const exportQuerySchema = z.object({
+  format: z.enum(['csv', 'json', 'html', 'pdf']).default('csv'),
+  startDate: z.string().optional(),
+  endDate: z.string().optional(),
+  categoryIds: z.string().optional(),
+  status: z.enum(['DRAFT', 'PENDING', 'APPROVED', 'REJECTED']).optional(),
+  tag: z.string().optional()
+});
 
 const userRepo = () => AppDataSource.getRepository(User);
 const require = createRequire(import.meta.url);
 const settingsRepo = () => AppDataSource.getRepository(AppSetting);
+const expenseRepo = () => AppDataSource.getRepository(Expense);
 
 const defaultPrefs = (email: string) => ({
   enabled: false,
@@ -59,6 +70,11 @@ const buildReportHtml = (title: string, summary: Awaited<ReturnType<typeof getSt
     .map((item) => `<tr><td style="padding:8px 0;border-bottom:1px solid #e5e7eb">${item.label}</td><td style="padding:8px 0;border-bottom:1px solid #e5e7eb;text-align:right">${item.total.toFixed(2)}</td></tr>`)
     .join('');
 
+  const tagRows = (summary.byTag ?? [])
+    .slice(0, 6)
+    .map((item) => `<tr><td style="padding:8px 0;border-bottom:1px solid #e5e7eb">${item.tag}</td><td style="padding:8px 0;border-bottom:1px solid #e5e7eb;text-align:right">${item.total.toFixed(2)}</td></tr>`)
+    .join('');
+
   return `
     <div style="font-family:Arial,sans-serif;color:#111827;max-width:760px;margin:0 auto">
       <h1 style="margin-bottom:8px">${title}</h1>
@@ -67,10 +83,112 @@ const buildReportHtml = (title: string, summary: Awaited<ReturnType<typeof getSt
       <table style="width:100%;border-collapse:collapse">${categoryRows || '<tr><td>No data</td></tr>'}</table>
       <h2 style="margin-top:32px">Timeline</h2>
       <table style="width:100%;border-collapse:collapse">${timelineRows || '<tr><td>No data</td></tr>'}</table>
+      <h2 style="margin-top:32px">Top tags</h2>
+      <table style="width:100%;border-collapse:collapse">${tagRows || '<tr><td>No data</td></tr>'}</table>
     </div>
   `;
 };
 
+const collectExportItems = async (userId: string, filters: { startDate?: string; endDate?: string; categoryIds?: string[]; status?: string; tag?: string }) => {
+  const items = await expenseRepo().find({ where: { user: { id: userId } }, relations: { category: true, proofs: true }, order: { expenseDate: 'DESC', createdAt: 'DESC' } });
+  return items.filter((item) => {
+    if (filters.startDate && item.expenseDate < filters.startDate) return false;
+    if (filters.endDate && item.expenseDate > filters.endDate) return false;
+    if (filters.categoryIds?.length && !filters.categoryIds.includes(item.category.id)) return false;
+    if (filters.status && item.status !== filters.status) return false;
+    if (filters.tag && !(item.tags ?? []).some((tag) => tag.toLowerCase() === filters.tag!.toLowerCase())) return false;
+    return true;
+  });
+};
+
+const escapeCsv = (value: unknown) => {
+  const text = String(value ?? '');
+  if (/[",\n]/.test(text)) return `"${text.replace(/"/g, '""')}"`;
+  return text;
+};
+
+const escapePdfText = (value: string) => value.replace(/\\/g, '\\\\').replace(/\(/g, '\\(').replace(/\)/g, '\\)').replace(/\r/g, '').replace(/\n/g, ' ');
+
+const buildPdfBuffer = (title: string, summary: Awaited<ReturnType<typeof getStatistics>>, items: Expense[]) => {
+  const lines = [
+    title,
+    `Generated: ${new Date().toISOString().slice(0, 19).replace('T', ' ')}`,
+    `Total: ${summary.total.toFixed(2)} | Count: ${summary.count} | Average: ${summary.average.toFixed(2)}`,
+    '',
+    'Top categories:'
+  ];
+
+  if (summary.byCategory.length) {
+    summary.byCategory.slice(0, 8).forEach((item) => lines.push(`- ${item.categoryName}: ${item.total.toFixed(2)} (${item.count})`));
+  } else {
+    lines.push('- No data');
+  }
+
+  lines.push('', 'Timeline:');
+  if (summary.timeline.length) {
+    summary.timeline.slice(-8).forEach((item) => lines.push(`- ${item.label}: ${item.total.toFixed(2)}`));
+  } else {
+    lines.push('- No data');
+  }
+
+  lines.push('', 'Expenses:');
+  if (items.length) {
+    items.slice(0, 30).forEach((item) => lines.push(`- ${item.expenseDate} | ${item.title} | ${item.category.name} | ${item.amount.toFixed(2)} ${item.currency} | ${item.status}`));
+  } else {
+    lines.push('- No data');
+  }
+
+  const pageHeight = 792;
+  const lineHeight = 16;
+  const startY = 750;
+  const linesPerPage = 40;
+  const chunks = [] as string[][];
+  for (let index = 0; index < lines.length; index += linesPerPage) chunks.push(lines.slice(index, index + linesPerPage));
+
+  const objects: string[] = [];
+  const kids: string[] = [];
+  const fontObjectNumber = 3 + chunks.length * 2;
+
+  objects[1] = '<< /Type /Catalog /Pages 2 0 R >>';
+
+  chunks.forEach((chunk, pageIndex) => {
+    const pageObjectNumber = 3 + pageIndex * 2;
+    const contentObjectNumber = pageObjectNumber + 1;
+    kids.push(`${pageObjectNumber} 0 R`);
+
+    const contentLines = ['BT', '/F1 12 Tf', `50 ${startY} Td`];
+    chunk.forEach((line, index) => {
+      if (index > 0) contentLines.push(`0 -${lineHeight} Td`);
+      contentLines.push(`(${escapePdfText(line)}) Tj`);
+    });
+    contentLines.push('ET');
+    const stream = contentLines.join('\n');
+
+    objects[pageObjectNumber] = `<< /Type /Page /Parent 2 0 R /MediaBox [0 0 612 ${pageHeight}] /Resources << /Font << /F1 ${fontObjectNumber} 0 R >> >> /Contents ${contentObjectNumber} 0 R >>`;
+    objects[contentObjectNumber] = `<< /Length ${Buffer.byteLength(stream, 'utf8')} >>\nstream\n${stream}\nendstream`;
+  });
+
+  objects[2] = `<< /Type /Pages /Count ${kids.length} /Kids [${kids.join(' ')}] >>`;
+  objects[fontObjectNumber] = '<< /Type /Font /Subtype /Type1 /BaseFont /Helvetica >>';
+
+  let pdf = '%PDF-1.4\n';
+  const offsets: number[] = [0];
+  for (let index = 1; index < objects.length; index += 1) {
+    if (!objects[index]) continue;
+    offsets[index] = Buffer.byteLength(pdf, 'utf8');
+    pdf += `${index} 0 obj\n${objects[index]}\nendobj\n`;
+  }
+
+  const xrefOffset = Buffer.byteLength(pdf, 'utf8');
+  pdf += `xref\n0 ${objects.length}\n`;
+  pdf += '0000000000 65535 f \n';
+  for (let index = 1; index < objects.length; index += 1) {
+    pdf += `${String(offsets[index] ?? 0).padStart(10, '0')} 00000 n \n`;
+  }
+  pdf += `trailer\n<< /Size ${objects.length} /Root 1 0 R >>\nstartxref\n${xrefOffset}\n%%EOF`;
+  return Buffer.from(pdf, 'utf8');
+};
+
 export const getPreferences = async (req: AuthenticatedRequest, res: Response) => {
   const user = await userRepo().findOne({ where: { id: req.user!.id } });
   if (!user) return res.status(404).json({ message: 'User not found' });
@@ -92,6 +210,7 @@ export const updatePreferences = async (req: AuthenticatedRequest, res: Response
 };
 
 export const previewReport = async (req: AuthenticatedRequest, res: Response) => {
+  await processDueRecurringExpenses(req.user!.id);
   const user = await userRepo().findOne({ where: { id: req.user!.id } });
   if (!user) return res.status(404).json({ message: 'User not found' });
 
@@ -120,6 +239,7 @@ export const previewReport = async (req: AuthenticatedRequest, res: Response) =>
 };
 
 export const sendReport = async (req: AuthenticatedRequest, res: Response) => {
+  await processDueRecurringExpenses(req.user!.id);
   const user = await userRepo().findOne({ where: { id: req.user!.id } });
   if (!user) return res.status(404).json({ message: 'User not found' });
 
@@ -151,9 +271,7 @@ export const sendReport = async (req: AuthenticatedRequest, res: Response) => {
 
   const to = prefs.sendToEmail || user.email;
   await transport.sendMail({
-    from: appSettings.smtpFromName
-      ? `"${appSettings.smtpFromName}" <${appSettings.smtpFromEmail}>`
-      : appSettings.smtpFromEmail,
+    from: appSettings.smtpFromName ? `"${appSettings.smtpFromName}" <${appSettings.smtpFromEmail}>` : appSettings.smtpFromEmail,
     to,
     subject: `${appSettings.appName} - ${range.label} report`,
     html: buildReportHtml(`${range.label} report`, summary)
@@ -161,3 +279,92 @@ export const sendReport = async (req: AuthenticatedRequest, res: Response) => {
 
   return res.json({ message: 'Report email was sent', sentTo: to });
 };
+
+export const exportReport = async (req: AuthenticatedRequest, res: Response) => {
+  await processDueRecurringExpenses(req.user!.id);
+  const parsed = exportQuerySchema.safeParse(req.query);
+  if (!parsed.success) return res.status(400).json({ message: 'Invalid report export filters', issues: parsed.error.issues });
+
+  const categoryIds = parsed.data.categoryIds?.split(',').filter(Boolean) ?? [];
+  const items = await collectExportItems(req.user!.id, {
+    startDate: parsed.data.startDate,
+    endDate: parsed.data.endDate,
+    categoryIds,
+    status: parsed.data.status,
+    tag: parsed.data.tag
+  });
+  const summary = await getStatistics(
+    {
+      userId: req.user!.id,
+      startDate: parsed.data.startDate,
+      endDate: parsed.data.endDate,
+      categoryIds,
+      status: parsed.data.status,
+      tag: parsed.data.tag
+    },
+    'month'
+  );
+
+  const stamp = new Date().toISOString().slice(0, 10);
+  if (parsed.data.format === 'json') {
+    res.setHeader('Content-Type', 'application/json; charset=utf-8');
+    res.setHeader('Content-Disposition', `attachment; filename="expense-report-${stamp}.json"`);
+    return res.send(
+      JSON.stringify(
+        {
+          filters: parsed.data,
+          summary,
+          items: items.map((item) => ({
+            id: item.id,
+            title: item.title,
+            date: item.expenseDate,
+            amount: item.amount,
+            currency: item.currency,
+            status: item.status,
+            category: item.category.name,
+            merchant: item.merchant,
+            tags: item.tags ?? [],
+            customFields: item.customFields ?? {},
+            attachments: item.proofs.map((proof) => proof.originalName || proof.label || 'Attachment')
+          }))
+        },
+        null,
+        2
+      )
+    );
+  }
+
+  if (parsed.data.format === 'html') {
+    res.setHeader('Content-Type', 'text/html; charset=utf-8');
+    res.setHeader('Content-Disposition', `attachment; filename="expense-report-${stamp}.html"`);
+    return res.send(buildReportHtml('Expense export', summary));
+  }
+
+  if (parsed.data.format === 'pdf') {
+    res.setHeader('Content-Type', 'application/pdf');
+    res.setHeader('Content-Disposition', `attachment; filename="expense-report-${stamp}.pdf"`);
+    return res.send(buildPdfBuffer('Expense export', summary, items));
+  }
+
+  const rows = [
+    ['Date', 'Title', 'Category', 'Merchant', 'Amount', 'Currency', 'Status', 'Tags', 'Custom fields', 'Attachments'],
+    ...items.map((item) => [
+      item.expenseDate,
+      item.title,
+      item.category.name,
+      item.merchant ?? '',
+      item.amount.toFixed(2),
+      item.currency,
+      item.status,
+      (item.tags ?? []).join('|'),
+      Object.entries(item.customFields ?? {})
+        .map(([key, value]) => `${key}: ${value}`)
+        .join(' | '),
+      item.proofs.map((proof) => proof.originalName || proof.label || 'Attachment').join(' | ')
+    ])
+  ];
+  const csv = rows.map((row) => row.map(escapeCsv).join(',')).join('\n');
+  res.setHeader('Content-Type', 'text/csv; charset=utf-8');
+  res.setHeader('Content-Disposition', `attachment; filename="expense-report-${stamp}.csv"`);
+  return res.send(csv);
+};

api/src/controllers/statistics.controller.ts

@@ -1,16 +1,20 @@
 import type { Response } from 'express';
 import { z } from 'zod';
-import { getStatistics } from '../services/statistics.service.js';
+import { getCashflowSummary, getStatistics } from '../services/statistics.service.js';
+import { processDueRecurringExpenses } from '../services/recurring.service.js';
 import type { AuthenticatedRequest } from '../types/express.js';
 
 const querySchema = z.object({
   startDate: z.string().optional(),
   endDate: z.string().optional(),
   categoryIds: z.string().optional(),
-  bucket: z.enum(['month', 'quarter', 'year']).optional()
+  bucket: z.enum(['month', 'quarter', 'year']).optional(),
+  tag: z.string().optional(),
+  status: z.enum(['DRAFT', 'PENDING', 'APPROVED', 'REJECTED']).optional()
 });
 
 export const getOverview = async (req: AuthenticatedRequest, res: Response) => {
+  await processDueRecurringExpenses(req.user!.id);
   const parsed = querySchema.safeParse(req.query);
   if (!parsed.success) {
     return res.status(400).json({ message: 'Invalid statistics filters', issues: parsed.error.issues });
@@ -23,9 +27,16 @@ export const getOverview = async (req: AuthenticatedRequest, res: Response) => {
         userId: req.user!.id,
         startDate: parsed.data.startDate,
         endDate: parsed.data.endDate,
-        categoryIds
+        categoryIds,
+        tag: parsed.data.tag,
+        status: parsed.data.status
       },
       parsed.data.bucket ?? 'month'
     )
   );
 };
+
+export const getCashflow = async (req: AuthenticatedRequest, res: Response) => {
+  await processDueRecurringExpenses(req.user!.id);
+  return res.json(await getCashflowSummary(req.user!.id));
+};

api/src/entities/Budget.ts

@@ -0,0 +1,37 @@
+import { Column, CreateDateColumn, Entity, ManyToOne, PrimaryGeneratedColumn, UpdateDateColumn } from 'typeorm';
+import { Category } from './Category.js';
+import { User } from './User.js';
+import { decimalTransformer } from '../utils/decimal.js';
+
+@Entity('budgets')
+export class Budget {
+  @PrimaryGeneratedColumn('uuid')
+  id!: string;
+
+  @Column({ type: 'varchar', length: 7 })
+  month!: string;
+
+  @Column({ type: 'varchar', length: 120, nullable: true })
+  name!: string | null;
+
+  @Column({ type: 'decimal', precision: 12, scale: 2, transformer: decimalTransformer })
+  amount!: number;
+
+  @Column({ type: 'simple-json', nullable: true })
+  alertThresholds!: number[] | null;
+
+  @Column({ type: 'boolean', default: true })
+  isActive!: boolean;
+
+  @CreateDateColumn({ type: 'datetime' })
+  createdAt!: Date;
+
+  @UpdateDateColumn({ type: 'datetime' })
+  updatedAt!: Date;
+
+  @ManyToOne(() => User, { onDelete: 'CASCADE' })
+  user!: User;
+
+  @ManyToOne(() => Category, { eager: true, nullable: true, onDelete: 'SET NULL' })
+  category!: Category | null;
+}

api/src/entities/Expense.ts

@@ -4,6 +4,9 @@ import { Proof } from './Proof.js';
 import { User } from './User.js';
 import { decimalTransformer } from '../utils/decimal.js';
 
+export type ExpenseStatus = 'DRAFT' | 'PENDING' | 'APPROVED' | 'REJECTED';
+export type DuplicateReviewStatus = 'OPEN' | 'CONFIRMED' | 'DISMISSED';
+
 @Entity('expenses')
 export class Expense {
   @PrimaryGeneratedColumn('uuid')
@@ -30,9 +33,27 @@ export class Expense {
   @Column({ type: 'varchar', length: 12, default: 'PLN' })
   currency!: string;
 
+  @Column({ type: 'varchar', length: 20, default: 'PENDING' })
+  status!: ExpenseStatus;
+
+  @Column({ type: 'simple-json', nullable: true })
+  tags!: string[] | null;
+
+  @Column({ type: 'simple-json', nullable: true })
+  customFields!: Record<string, string> | null;
+
   @Column({ type: 'boolean', default: false })
   possibleDuplicate!: boolean;
 
+  @Column({ type: 'varchar', length: 20, nullable: true })
+  duplicateStatus!: DuplicateReviewStatus | null;
+
+  @Column({ type: 'datetime', nullable: true })
+  duplicateReviewedAt!: Date | null;
+
+  @Column({ type: 'varchar', length: 36, nullable: true })
+  recurringSourceId!: string | null;
+
   @CreateDateColumn({ type: 'datetime' })
   createdAt!: Date;
 

api/src/entities/RecurringExpense.ts

@@ -0,0 +1,78 @@
+import { Column, CreateDateColumn, Entity, ManyToOne, PrimaryGeneratedColumn, UpdateDateColumn } from 'typeorm';
+import { Category } from './Category.js';
+import { User } from './User.js';
+import { decimalTransformer } from '../utils/decimal.js';
+
+export type RecurringFrequency = 'WEEKLY' | 'MONTHLY' | 'YEARLY';
+
+@Entity('recurring_expenses')
+export class RecurringExpense {
+  @PrimaryGeneratedColumn('uuid')
+  id!: string;
+
+  @Column({ type: 'varchar', length: 140 })
+  title!: string;
+
+  @Column({ type: 'text', nullable: true })
+  description!: string | null;
+
+  @Column({ type: 'decimal', precision: 12, scale: 2, transformer: decimalTransformer })
+  amount!: number;
+
+  @Column({ type: 'varchar', length: 80, nullable: true })
+  merchant!: string | null;
+
+  @Column({ type: 'varchar', length: 50, nullable: true })
+  paymentMethod!: string | null;
+
+  @Column({ type: 'varchar', length: 12, default: 'PLN' })
+  currency!: string;
+
+  @Column({ type: 'varchar', length: 20, default: 'MONTHLY' })
+  frequency!: RecurringFrequency;
+
+  @Column({ type: 'int', default: 1 })
+  intervalValue!: number;
+
+  @Column({ type: 'date' })
+  startDate!: string;
+
+  @Column({ type: 'date' })
+  nextRunDate!: string;
+
+  @Column({ type: 'date', nullable: true })
+  lastRunDate!: string | null;
+
+  @Column({ type: 'date', nullable: true })
+  endDate!: string | null;
+
+  @Column({ type: 'int', nullable: true })
+  maxOccurrences!: number | null;
+
+  @Column({ type: 'int', default: 0 })
+  generatedCount!: number;
+
+  @Column({ type: 'varchar', length: 20, default: 'PENDING' })
+  defaultStatus!: string;
+
+  @Column({ type: 'simple-json', nullable: true })
+  tags!: string[] | null;
+
+  @Column({ type: 'simple-json', nullable: true })
+  customFields!: Record<string, string> | null;
+
+  @Column({ type: 'boolean', default: true })
+  isActive!: boolean;
+
+  @CreateDateColumn({ type: 'datetime' })
+  createdAt!: Date;
+
+  @UpdateDateColumn({ type: 'datetime' })
+  updatedAt!: Date;
+
+  @ManyToOne(() => User, { onDelete: 'CASCADE' })
+  user!: User;
+
+  @ManyToOne(() => Category, { eager: true, onDelete: 'RESTRICT' })
+  category!: Category;
+}

api/src/entities/User.ts

@@ -36,6 +36,16 @@ export class User {
     categoryIds?: string[];
   } | null;
 
+  @Column({ type: 'simple-json', nullable: true })
+  shoppingListIntegration!: {
+    enabled?: boolean;
+    baseUrl?: string;
+    apiToken?: string;
+    authMode?: 'bearer' | 'x-api-token' | 'both';
+    ownerId?: string | null;
+    defaultListId?: string | null;
+  } | null;
+
   @CreateDateColumn({ type: 'datetime' })
   createdAt!: Date;
 

api/src/middleware/upload.ts

@@ -3,7 +3,16 @@ import path from 'node:path';
 import multer from 'multer';
 import { v4 as uuidv4 } from 'uuid';
 import { env } from '../config/env.js';
+
 const uploadDir = path.resolve(env.UPLOAD_DIR);
 fs.mkdirSync(uploadDir, { recursive: true });
-const storage = multer.diskStorage({ destination: (_req, _file, cb) => cb(null, uploadDir), filename: (_req, file, cb) => cb(null, `${Date.now()}-${uuidv4()}${path.extname(file.originalname || '')}`) });
-export const uploadSingleProof = multer({ storage, limits: { fileSize: env.MAX_UPLOAD_SIZE_MB * 1024 * 1024 } }).single('proofFile');
+
+const storage = multer.diskStorage({
+  destination: (_req, _file, cb) => cb(null, uploadDir),
+  filename: (_req, file, cb) => cb(null, `${Date.now()}-${uuidv4()}${path.extname(file.originalname || '')}`)
+});
+
+export const uploadProofFiles = multer({
+  storage,
+  limits: { fileSize: env.MAX_UPLOAD_SIZE_MB * 1024 * 1024, files: 8 }
+}).any();

api/src/routes/budget.routes.ts

@@ -0,0 +1,10 @@
+import { Router } from 'express';
+import { createBudget, deleteBudget, listBudgets, updateBudget } from '../controllers/budget.controller.js';
+import { requireAuth } from '../middleware/auth.js';
+
+export const budgetRouter = Router();
+budgetRouter.use(requireAuth);
+budgetRouter.get('/', listBudgets);
+budgetRouter.post('/', createBudget);
+budgetRouter.put('/:id', updateBudget);
+budgetRouter.delete('/:id', deleteBudget);

api/src/routes/expense.routes.ts

@@ -1,11 +1,14 @@
 import { Router } from 'express';
-import { addProof, createExpense, deleteExpense, listExpenses, updateExpense } from '../controllers/expense.controller.js';
+import { addProof, createExpense, deleteExpense, listDuplicates, listExpenses, reviewDuplicate, updateExpense } from '../controllers/expense.controller.js';
 import { requireAuth } from '../middleware/auth.js';
-import { uploadSingleProof } from '../middleware/upload.js';
+import { uploadProofFiles } from '../middleware/upload.js';
+
 export const expenseRouter = Router();
 expenseRouter.use(requireAuth);
 expenseRouter.get('/', listExpenses);
-expenseRouter.post('/', uploadSingleProof, createExpense);
+expenseRouter.get('/duplicates', listDuplicates);
+expenseRouter.post('/', uploadProofFiles, createExpense);
 expenseRouter.put('/:id', updateExpense);
+expenseRouter.post('/:id/duplicate-review', reviewDuplicate);
 expenseRouter.delete('/:id', deleteExpense);
-expenseRouter.post('/:id/proofs', uploadSingleProof, addProof);
+expenseRouter.post('/:id/proofs', uploadProofFiles, addProof);

api/src/routes/index.ts

@@ -1,9 +1,12 @@
 import { Router } from 'express';
 import { adminRouter } from './admin.routes.js';
 import { authRouter } from './auth.routes.js';
+import { budgetRouter } from './budget.routes.js';
 import { categoryRouter } from './category.routes.js';
 import { expenseRouter } from './expense.routes.js';
+import { integrationRouter } from './integration.routes.js';
 import { merchantRouter } from './merchant.routes.js';
+import { recurringRouter } from './recurring.routes.js';
 import { reportRouter } from './report.routes.js';
 import { statisticsRouter } from './statistics.routes.js';
 
@@ -16,4 +19,7 @@ apiRouter.use('/expenses', expenseRouter);
 apiRouter.use('/statistics', statisticsRouter);
 apiRouter.use('/merchants', merchantRouter);
 apiRouter.use('/reports', reportRouter);
+apiRouter.use('/budgets', budgetRouter);
+apiRouter.use('/recurring-expenses', recurringRouter);
+apiRouter.use('/integrations', integrationRouter);
 apiRouter.use('/admin', adminRouter);

api/src/routes/integration.routes.ts

@@ -0,0 +1,25 @@
+import { Router } from 'express';
+import {
+  getShoppingListExpenses,
+  getShoppingListLatestExpenses,
+  getShoppingListSettings,
+  getShoppingListSummary,
+  getShoppingLists,
+  importShoppingListAsExpense,
+  importShoppingListItemAsExpense,
+  testShoppingListConnection,
+  updateShoppingListSettings
+} from '../controllers/integration.controller.js';
+import { requireAuth } from '../middleware/auth.js';
+
+export const integrationRouter = Router();
+integrationRouter.use(requireAuth);
+integrationRouter.get('/shopping-list', getShoppingListSettings);
+integrationRouter.put('/shopping-list', updateShoppingListSettings);
+integrationRouter.post('/shopping-list/test', testShoppingListConnection);
+integrationRouter.get('/shopping-list/summary', getShoppingListSummary);
+integrationRouter.get('/shopping-list/latest', getShoppingListLatestExpenses);
+integrationRouter.get('/shopping-list/lists', getShoppingLists);
+integrationRouter.get('/shopping-list/lists/:id/expenses', getShoppingListExpenses);
+integrationRouter.post('/shopping-list/import-list', importShoppingListAsExpense);
+integrationRouter.post('/shopping-list/import-item', importShoppingListItemAsExpense);

api/src/routes/recurring.routes.ts

@@ -0,0 +1,11 @@
+import { Router } from 'express';
+import { createRecurringExpense, deleteRecurringExpense, listRecurringExpenses, processRecurringNow, updateRecurringExpense } from '../controllers/recurring.controller.js';
+import { requireAuth } from '../middleware/auth.js';
+
+export const recurringRouter = Router();
+recurringRouter.use(requireAuth);
+recurringRouter.get('/', listRecurringExpenses);
+recurringRouter.post('/', createRecurringExpense);
+recurringRouter.put('/:id', updateRecurringExpense);
+recurringRouter.delete('/:id', deleteRecurringExpense);
+recurringRouter.post('/run', processRecurringNow);

api/src/routes/report.routes.ts

@@ -1,10 +1,5 @@
 import { Router } from 'express';
-import {
-  getPreferences,
-  previewReport,
-  sendReport,
-  updatePreferences
-} from '../controllers/report.controller.js';
+import { exportReport, getPreferences, previewReport, sendReport, updatePreferences } from '../controllers/report.controller.js';
 import { requireAuth } from '../middleware/auth.js';
 
 export const reportRouter = Router();
@@ -14,3 +9,4 @@ reportRouter.get('/preferences', getPreferences);
 reportRouter.put('/preferences', updatePreferences);
 reportRouter.post('/preview', previewReport);
 reportRouter.post('/send', sendReport);
+reportRouter.get('/export', exportReport);

api/src/routes/statistics.routes.ts

@@ -1,6 +1,8 @@
 import { Router } from 'express';
-import { getOverview } from '../controllers/statistics.controller.js';
+import { getCashflow, getOverview } from '../controllers/statistics.controller.js';
 import { requireAuth } from '../middleware/auth.js';
+
 export const statisticsRouter = Router();
 statisticsRouter.use(requireAuth);
 statisticsRouter.get('/overview', getOverview);
+statisticsRouter.get('/cashflow', getCashflow);

api/src/services/recurring.service.ts

@@ -0,0 +1,108 @@
+import { AppDataSource } from '../config/data-source.js';
+import { Expense, type ExpenseStatus } from '../entities/Expense.js';
+import { RecurringExpense, type RecurringFrequency } from '../entities/RecurringExpense.js';
+
+const recurringRepo = () => AppDataSource.getRepository(RecurringExpense);
+const expenseRepo = () => AppDataSource.getRepository(Expense);
+
+const toDate = (value: string) => new Date(`${value}T00:00:00`);
+const toDateString = (date: Date) => {
+  const year = date.getFullYear();
+  const month = `${date.getMonth() + 1}`.padStart(2, '0');
+  const day = `${date.getDate()}`.padStart(2, '0');
+  return `${year}-${month}-${day}`;
+};
+
+const advanceDate = (value: string, frequency: RecurringFrequency, intervalValue: number) => {
+  const date = toDate(value);
+  if (frequency === 'WEEKLY') date.setDate(date.getDate() + intervalValue * 7);
+  if (frequency === 'MONTHLY') date.setMonth(date.getMonth() + intervalValue);
+  if (frequency === 'YEARLY') date.setFullYear(date.getFullYear() + intervalValue);
+  return toDateString(date);
+};
+
+const detectDuplicate = async (userId: string, amount: number, expenseDate: string, merchant?: string | null) => {
+  const items = await expenseRepo().find({
+    where: { user: { id: userId }, expenseDate },
+    order: { createdAt: 'DESC' },
+    take: 10
+  });
+  const merchantKey = merchant?.trim().toLowerCase();
+  return items.some(
+    (item) =>
+      item.duplicateStatus !== 'DISMISSED' &&
+      Math.abs(item.amount - amount) < 0.001 &&
+      ((merchantKey && item.merchant?.trim().toLowerCase() === merchantKey) || !merchantKey)
+  );
+};
+
+export const processDueRecurringExpenses = async (userId?: string) => {
+  const today = toDateString(new Date());
+  const rules = await recurringRepo().find({
+    where: userId ? { isActive: true, user: { id: userId } } : { isActive: true },
+    relations: { user: true, category: true },
+    order: { nextRunDate: 'ASC' }
+  });
+
+  for (const rule of rules) {
+    let nextRun = rule.nextRunDate;
+    let changed = false;
+    let guard = 0;
+
+    while (nextRun <= today && guard < 60) {
+      guard += 1;
+      if (rule.endDate && nextRun > rule.endDate) {
+        rule.isActive = false;
+        changed = true;
+        break;
+      }
+      if (typeof rule.maxOccurrences === 'number' && rule.generatedCount >= rule.maxOccurrences) {
+        rule.isActive = false;
+        changed = true;
+        break;
+      }
+
+      const alreadyExists = await expenseRepo().findOne({
+        where: { user: { id: rule.user.id }, recurringSourceId: rule.id, expenseDate: nextRun }
+      });
+
+      if (!alreadyExists) {
+        const isDuplicate = await detectDuplicate(rule.user.id, rule.amount, nextRun, rule.merchant);
+        await expenseRepo().save(
+          expenseRepo().create({
+            title: rule.title,
+            description: rule.description,
+            amount: rule.amount,
+            expenseDate: nextRun,
+            merchant: rule.merchant,
+            paymentMethod: rule.paymentMethod,
+            currency: rule.currency,
+            status: (rule.defaultStatus as ExpenseStatus) ?? 'PENDING',
+            tags: rule.tags ?? [],
+            customFields: rule.customFields ?? {},
+            possibleDuplicate: isDuplicate,
+            duplicateStatus: isDuplicate ? 'OPEN' : null,
+            duplicateReviewedAt: null,
+            recurringSourceId: rule.id,
+            user: rule.user,
+            category: rule.category,
+            proofs: []
+          })
+        );
+        rule.generatedCount += 1;
+      }
+
+      rule.lastRunDate = nextRun;
+      nextRun = advanceDate(nextRun, rule.frequency, rule.intervalValue);
+      changed = true;
+    }
+
+    if (changed) {
+      rule.nextRunDate = nextRun;
+      if ((rule.endDate && rule.nextRunDate > rule.endDate) || (typeof rule.maxOccurrences === 'number' && rule.generatedCount >= rule.maxOccurrences)) {
+        rule.isActive = false;
+      }
+      await recurringRepo().save(rule);
+    }
+  }
+};

api/src/services/statistics.service.ts

@@ -1,28 +1,84 @@
 import { Between, In } from 'typeorm';
 import { AppDataSource } from '../config/data-source.js';
+import { Budget } from '../entities/Budget.js';
 import { Expense } from '../entities/Expense.js';
-export type StatsFilters = { userId?: string; startDate?: string; endDate?: string; categoryIds?: string[] };
-export type FlatExpense = { id: string; amount: number; expenseDate: string; categoryId: string; categoryName: string };
+import { RecurringExpense } from '../entities/RecurringExpense.js';
+
+export type StatsFilters = { userId?: string; startDate?: string; endDate?: string; categoryIds?: string[]; tag?: string; status?: string };
+export type FlatExpense = {
+  id: string;
+  amount: number;
+  expenseDate: string;
+  categoryId: string;
+  categoryName: string;
+  tags?: string[];
+  status?: string;
+};
+
 const labelMonth = (date: string) => date.slice(0, 7);
-const labelQuarter = (date: string) => { const [year, month] = date.split('-').map(Number); return `${year}-Q${Math.ceil(month / 3)}`; };
+const labelQuarter = (date: string) => {
+  const [year, month] = date.split('-').map(Number);
+  return `${year}-Q${Math.ceil(month / 3)}`;
+};
 const labelYear = (date: string) => date.slice(0, 4);
-export const buildBucketLabel = (date: string, bucket: 'month' | 'quarter' | 'year') => bucket === 'year' ? labelYear(date) : bucket === 'quarter' ? labelQuarter(date) : labelMonth(date);
+
+export const buildBucketLabel = (date: string, bucket: 'month' | 'quarter' | 'year') =>
+  bucket === 'year' ? labelYear(date) : bucket === 'quarter' ? labelQuarter(date) : labelMonth(date);
+
 export const aggregateStatistics = (expenses: FlatExpense[], bucket: 'month' | 'quarter' | 'year' = 'month') => {
   const total = expenses.reduce((sum, item) => sum + item.amount, 0);
   const byCategoryMap = new Map<string, { categoryId: string; categoryName: string; total: number; count: number }>();
   const timelineMap = new Map<string, number>();
+  const byTagMap = new Map<string, number>();
+  const byStatusMap = new Map<string, number>();
+
   for (const expense of expenses) {
-    const existing = byCategoryMap.get(expense.categoryId) ?? { categoryId: expense.categoryId, categoryName: expense.categoryName, total: 0, count: 0 };
+    const existing = byCategoryMap.get(expense.categoryId) ?? {
+      categoryId: expense.categoryId,
+      categoryName: expense.categoryName,
+      total: 0,
+      count: 0
+    };
     existing.total += expense.amount;
     existing.count += 1;
     byCategoryMap.set(expense.categoryId, existing);
+
     const bucketLabel = buildBucketLabel(expense.expenseDate, bucket);
     timelineMap.set(bucketLabel, (timelineMap.get(bucketLabel) ?? 0) + expense.amount);
+
+    for (const tag of expense.tags ?? []) {
+      byTagMap.set(tag, (byTagMap.get(tag) ?? 0) + expense.amount);
+    }
+
+    if (expense.status) byStatusMap.set(expense.status, (byStatusMap.get(expense.status) ?? 0) + 1);
   }
-  const byCategory = [...byCategoryMap.values()].sort((a, b) => b.total - a.total).map((item) => ({ ...item, total: Number(item.total.toFixed(2)) }));
-  const timeline = [...timelineMap.entries()].map(([label, totalValue]) => ({ label, total: Number(totalValue.toFixed(2)) })).sort((a, b) => a.label.localeCompare(b.label));
-  return { total: Number(total.toFixed(2)), count: expenses.length, average: expenses.length ? Number((total / expenses.length).toFixed(2)) : 0, byCategory, timeline, topCategory: byCategory[0] ?? null };
+
+  const byCategory = [...byCategoryMap.values()]
+    .sort((a, b) => b.total - a.total)
+    .map((item) => ({ ...item, total: Number(item.total.toFixed(2)) }));
+  const timeline = [...timelineMap.entries()]
+    .map(([label, totalValue]) => ({ label, total: Number(totalValue.toFixed(2)) }))
+    .sort((a, b) => a.label.localeCompare(b.label));
+  const byTag = [...byTagMap.entries()]
+    .map(([tag, totalValue]) => ({ tag, total: Number(totalValue.toFixed(2)) }))
+    .sort((a, b) => b.total - a.total)
+    .slice(0, 10);
+  const byStatus = [...byStatusMap.entries()]
+    .map(([status, count]) => ({ status, count }))
+    .sort((a, b) => b.count - a.count);
+
+  return {
+    total: Number(total.toFixed(2)),
+    count: expenses.length,
+    average: expenses.length ? Number((total / expenses.length).toFixed(2)) : 0,
+    byCategory,
+    timeline,
+    byTag,
+    byStatus,
+    topCategory: byCategory[0] ?? null
+  };
 };
+
 export const getStatistics = async (filters: StatsFilters, bucket: 'month' | 'quarter' | 'year' = 'month') => {
   const repo = AppDataSource.getRepository(Expense);
   const where: Record<string, unknown> = {};
@@ -31,11 +87,119 @@ export const getStatistics = async (filters: StatsFilters, bucket: 'month' | 'qu
   else if (filters.startDate) where.expenseDate = Between(filters.startDate, '2999-12-31');
   else if (filters.endDate) where.expenseDate = Between('1900-01-01', filters.endDate);
   if (filters.categoryIds?.length) where.category = { id: In(filters.categoryIds) };
+  if (filters.status) where.status = filters.status;
+
   const expenses = await repo.find({ where, relations: { category: true }, order: { expenseDate: 'DESC' } });
-  return aggregateStatistics(expenses.map((expense) => ({ id: expense.id, amount: expense.amount, expenseDate: expense.expenseDate, categoryId: expense.category.id, categoryName: expense.category.name })), bucket);
+  const filteredByTag = filters.tag
+    ? expenses.filter((expense) => (expense.tags ?? []).some((tag) => tag.toLowerCase() === filters.tag!.toLowerCase()))
+    : expenses;
+
+  return aggregateStatistics(
+    filteredByTag.map((expense) => ({
+      id: expense.id,
+      amount: expense.amount,
+      expenseDate: expense.expenseDate,
+      categoryId: expense.category.id,
+      categoryName: expense.category.name,
+      tags: expense.tags ?? [],
+      status: expense.status
+    })),
+    bucket
+  );
 };
-export const detectPotentialDuplicate = async (input: { userId: string; amount: number; expenseDate: string; merchant?: string | null }) => {
-  const repo = AppDataSource.getRepository(Expense);
-  const candidates = await repo.find({ where: { user: { id: input.userId }, expenseDate: Between(input.expenseDate, input.expenseDate) } });
-  return candidates.some((item) => Math.abs(item.amount - input.amount) < 0.001 && (input.merchant ? item.merchant?.toLowerCase() === input.merchant.toLowerCase() : true));
+
+const currentMonthKey = () => {
+  const date = new Date();
+  return `${date.getFullYear()}-${`${date.getMonth() + 1}`.padStart(2, '0')}`;
+};
+
+const monthRange = (monthKey: string) => ({ startDate: `${monthKey}-01`, endDate: `${monthKey}-31` });
+
+export const getCashflowSummary = async (userId: string) => {
+  const expenseRepo = AppDataSource.getRepository(Expense);
+  const budgetRepo = AppDataSource.getRepository(Budget);
+  const recurringRepo = AppDataSource.getRepository(RecurringExpense);
+
+  const currentMonth = currentMonthKey();
+  const currentRange = monthRange(currentMonth);
+  const startWindow = new Date();
+  startWindow.setMonth(startWindow.getMonth() - 5, 1);
+  const startDate = `${startWindow.getFullYear()}-${`${startWindow.getMonth() + 1}`.padStart(2, '0')}-01`;
+
+  const expenses = await expenseRepo.find({
+    where: { user: { id: userId }, expenseDate: Between(startDate, currentRange.endDate) },
+    relations: { category: true },
+    order: { expenseDate: 'ASC' }
+  });
+  const budgets = await budgetRepo.find({ where: { user: { id: userId }, month: currentMonth }, relations: { category: true } });
+  const recurring = await recurringRepo.find({ where: { user: { id: userId }, isActive: true }, relations: { category: true }, order: { nextRunDate: 'ASC' } });
+
+  const months = new Map<string, { label: string; actual: number; budget: number }>();
+  for (let offset = 5; offset >= 0; offset -= 1) {
+    const date = new Date();
+    date.setMonth(date.getMonth() - offset, 1);
+    const key = `${date.getFullYear()}-${`${date.getMonth() + 1}`.padStart(2, '0')}`;
+    months.set(key, { label: key, actual: 0, budget: 0 });
+  }
+
+  for (const expense of expenses) {
+    const month = expense.expenseDate.slice(0, 7);
+    const entry = months.get(month);
+    if (entry && expense.status !== 'REJECTED' && expense.status !== 'DRAFT') entry.actual += expense.amount;
+  }
+
+  for (const budget of budgets) {
+    const entry = months.get(budget.month);
+    if (entry) entry.budget += budget.amount;
+  }
+
+  const duplicateCount = expenses.filter((expense) => expense.possibleDuplicate && expense.duplicateStatus === 'OPEN' && expense.expenseDate.startsWith(currentMonth)).length;
+  const currentMonthExpenses = expenses.filter((expense) => expense.expenseDate.startsWith(currentMonth));
+  const actualCurrent = currentMonthExpenses
+    .filter((expense) => expense.status !== 'REJECTED' && expense.status !== 'DRAFT')
+    .reduce((sum, expense) => sum + expense.amount, 0);
+  const pendingApproval = currentMonthExpenses.filter((expense) => expense.status === 'PENDING').length;
+  const upcomingRecurring = recurring
+    .filter((item) => item.nextRunDate >= currentRange.startDate && item.nextRunDate <= currentRange.endDate)
+    .map((item) => ({ id: item.id, title: item.title, amount: item.amount, nextRunDate: item.nextRunDate, frequency: item.frequency }));
+
+  const totalBudget = budgets.reduce((sum, item) => sum + item.amount, 0);
+  const budgetUsagePercent = totalBudget ? Number(((actualCurrent / totalBudget) * 100).toFixed(1)) : 0;
+  const alerts = budgets
+    .map((budget) => {
+      const spent = currentMonthExpenses
+        .filter((expense) => expense.status !== 'REJECTED' && expense.status !== 'DRAFT')
+        .filter((expense) => !budget.category || expense.category.id === budget.category.id)
+        .reduce((sum, expense) => sum + expense.amount, 0);
+      const usagePercent = budget.amount ? Number(((spent / budget.amount) * 100).toFixed(1)) : 0;
+      return { id: budget.id, name: budget.name || budget.category?.name || 'Monthly budget', usagePercent, spent: Number(spent.toFixed(2)), amount: budget.amount };
+    })
+    .filter((item) => item.usagePercent >= 80)
+    .sort((a, b) => b.usagePercent - a.usagePercent);
+
+  const statusSummary = aggregateStatistics(
+    currentMonthExpenses.map((expense) => ({
+      id: expense.id,
+      amount: expense.amount,
+      expenseDate: expense.expenseDate,
+      categoryId: expense.category.id,
+      categoryName: expense.category.name,
+      tags: expense.tags ?? [],
+      status: expense.status
+    }))
+  ).byStatus;
+
+  return {
+    currentMonth,
+    actualCurrent: Number(actualCurrent.toFixed(2)),
+    totalBudget: Number(totalBudget.toFixed(2)),
+    budgetUsagePercent,
+    duplicateCount,
+    pendingApproval,
+    forecastCurrentMonth: Number((actualCurrent + upcomingRecurring.reduce((sum, item) => sum + item.amount, 0)).toFixed(2)),
+    trend: [...months.values()].map((item) => ({ label: item.label, actual: Number(item.actual.toFixed(2)), budget: Number(item.budget.toFixed(2)) })),
+    alerts,
+    upcomingRecurring,
+    statusSummary
+  };
 };

web/src/app/app.routes.ts

@@ -3,10 +3,14 @@ import { adminGuard } from './core/guards/admin.guard';
 import { authGuard } from './core/guards/auth.guard';
 import { AdminComponent } from './features/admin/admin.component';
 import { LoginComponent } from './features/auth/login.component';
+import { BudgetsComponent } from './features/budgets/budgets.component';
+import { CashflowComponent } from './features/cashflow/cashflow.component';
 import { CategoriesComponent } from './features/categories/categories.component';
 import { DashboardComponent } from './features/dashboard/dashboard.component';
 import { ExpensesComponent } from './features/expenses/expenses.component';
+import { IntegrationsComponent } from './features/integrations/integrations.component';
 import { MerchantsComponent } from './features/merchants/merchants.component';
+import { RecurringComponent } from './features/recurring/recurring.component';
 import { ReportsComponent } from './features/reports/reports.component';
 import { StatsComponent } from './features/stats/stats.component';
 import { ShellComponent } from './layout/shell.component';
@@ -21,9 +25,13 @@ export const routes: Routes = [
       { path: '', component: DashboardComponent },
       { path: 'expenses', component: ExpensesComponent },
       { path: 'stats', component: StatsComponent },
+      { path: 'cashflow', component: CashflowComponent },
+      { path: 'budgets', component: BudgetsComponent },
+      { path: 'recurring', component: RecurringComponent },
       { path: 'merchants', component: MerchantsComponent },
       { path: 'reports', component: ReportsComponent },
       { path: 'categories', component: CategoriesComponent },
+      { path: 'integrations', component: IntegrationsComponent },
       { path: 'admin', component: AdminComponent, canActivate: [adminGuard] }
     ]
   },

web/src/app/core/services/budgets.service.ts

@@ -0,0 +1,27 @@
+import { Injectable, inject } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { environment } from '../../../environments/environment';
+import type { Budget, BudgetListResponse } from '../../shared/models';
+
+@Injectable({ providedIn: 'root' })
+export class BudgetsService {
+  private readonly http = inject(HttpClient);
+
+  list(month?: string) {
+    let params = new HttpParams();
+    if (month) params = params.set('month', month);
+    return this.http.get<BudgetListResponse>(`${environment.apiBaseUrl}/budgets`, { params });
+  }
+
+  create(payload: { month: string; name?: string; amount: number; categoryId?: string | null; alertThresholds: number[]; isActive: boolean }) {
+    return this.http.post<{ item: Budget }>(`${environment.apiBaseUrl}/budgets`, payload);
+  }
+
+  update(id: string, payload: { month: string; name?: string; amount: number; categoryId?: string | null; alertThresholds: number[]; isActive: boolean }) {
+    return this.http.put<{ item: Budget }>(`${environment.apiBaseUrl}/budgets/${id}`, payload);
+  }
+
+  delete(id: string) {
+    return this.http.delete<void>(`${environment.apiBaseUrl}/budgets/${id}`);
+  }
+}

web/src/app/core/services/expenses.service.ts

@@ -1,13 +1,41 @@
 import { Injectable, inject } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { environment } from '../../../environments/environment';
-import type { Expense, Proof } from '../../shared/models';
+import type { DuplicateGroup, Expense, Proof } from '../../shared/models';
+
 @Injectable({ providedIn: 'root' })
 export class ExpensesService {
   private readonly http = inject(HttpClient);
-  list(filters: { startDate?: string; endDate?: string; categoryId?: string; search?: string } = {}) { let params = new HttpParams(); Object.entries(filters).forEach(([key, value]) => { if (value) params = params.set(key, value); }); return this.http.get<{ items: Expense[] }>(`${environment.apiBaseUrl}/expenses`, { params }); }
-  create(formData: FormData) { return this.http.post<{ item: Expense }>(`${environment.apiBaseUrl}/expenses`, formData); }
-  update(id: string, payload: Partial<Expense> & { categoryId: string }) { return this.http.put<{ item: Expense }>(`${environment.apiBaseUrl}/expenses/${id}`, payload); }
-  delete(id: string) { return this.http.delete<void>(`${environment.apiBaseUrl}/expenses/${id}`); }
-  addProof(id: string, formData: FormData) { return this.http.post<{ proof: Proof; expense: Expense }>(`${environment.apiBaseUrl}/expenses/${id}/proofs`, formData); }
+
+  list(filters: { startDate?: string; endDate?: string; categoryId?: string; search?: string; status?: string; tags?: string; duplicatesOnly?: boolean } = {}) {
+    let params = new HttpParams();
+    Object.entries(filters).forEach(([key, value]) => {
+      if (value !== undefined && value !== null && value !== '') params = params.set(key, String(value));
+    });
+    return this.http.get<{ items: Expense[] }>(`${environment.apiBaseUrl}/expenses`, { params });
+  }
+
+  duplicates() {
+    return this.http.get<{ items: DuplicateGroup[] }>(`${environment.apiBaseUrl}/expenses/duplicates`);
+  }
+
+  create(formData: FormData) {
+    return this.http.post<{ item: Expense; warnings?: string[] }>(`${environment.apiBaseUrl}/expenses`, formData);
+  }
+
+  update(id: string, payload: Partial<Expense> & { categoryId: string }) {
+    return this.http.put<{ item: Expense; warnings?: string[] }>(`${environment.apiBaseUrl}/expenses/${id}`, payload);
+  }
+
+  reviewDuplicate(id: string, action: 'CONFIRM' | 'DISMISS' | 'REOPEN') {
+    return this.http.post<{ item: Expense }>(`${environment.apiBaseUrl}/expenses/${id}/duplicate-review`, { action });
+  }
+
+  delete(id: string) {
+    return this.http.delete<void>(`${environment.apiBaseUrl}/expenses/${id}`);
+  }
+
+  addProof(id: string, formData: FormData) {
+    return this.http.post<{ proofs: Proof[]; expense: Expense }>(`${environment.apiBaseUrl}/expenses/${id}/proofs`, formData);
+  }
 }

web/src/app/core/services/recurring-expenses.service.ts

@@ -0,0 +1,29 @@
+import { Injectable, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { environment } from '../../../environments/environment';
+import type { RecurringExpense } from '../../shared/models';
+
+@Injectable({ providedIn: 'root' })
+export class RecurringExpensesService {
+  private readonly http = inject(HttpClient);
+
+  list() {
+    return this.http.get<{ items: RecurringExpense[] }>(`${environment.apiBaseUrl}/recurring-expenses`);
+  }
+
+  create(payload: Partial<RecurringExpense> & { categoryId: string }) {
+    return this.http.post<{ item: RecurringExpense }>(`${environment.apiBaseUrl}/recurring-expenses`, payload);
+  }
+
+  update(id: string, payload: Partial<RecurringExpense> & { categoryId: string }) {
+    return this.http.put<{ item: RecurringExpense }>(`${environment.apiBaseUrl}/recurring-expenses/${id}`, payload);
+  }
+
+  delete(id: string) {
+    return this.http.delete<void>(`${environment.apiBaseUrl}/recurring-expenses/${id}`);
+  }
+
+  runNow() {
+    return this.http.post<{ message: string }>(`${environment.apiBaseUrl}/recurring-expenses/run`, {});
+  }
+}

web/src/app/core/services/reports.service.ts

@@ -1,5 +1,5 @@
 import { Injectable, inject } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpParams } from '@angular/common/http';
 import { environment } from '../../../environments/environment';
 import type { ReportPreferences, StatsResponse } from '../../shared/models';
 
@@ -25,4 +25,12 @@ export class ReportsService {
   send() {
     return this.http.post<{ message: string; sentTo: string }>(`${environment.apiBaseUrl}/reports/send`, {});
   }
+
+  export(filters: { format: 'csv' | 'json' | 'html' | 'pdf'; startDate?: string; endDate?: string; categoryIds?: string; status?: string; tag?: string }) {
+    let params = new HttpParams().set('format', filters.format);
+    Object.entries(filters).forEach(([key, value]) => {
+      if (key !== 'format' && value) params = params.set(key, value);
+    });
+    return this.http.get(`${environment.apiBaseUrl}/reports/export`, { params, responseType: 'blob' });
+  }
 }

web/src/app/core/services/shopping-list-integration.service.ts

@@ -0,0 +1,82 @@
+import { Injectable, inject } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { environment } from '../../../environments/environment';
+import type { Expense, ShoppingListExpenseItem, ShoppingListIntegrationSettings, ShoppingListRef, ShoppingListSummary } from '../../shared/models';
+
+@Injectable({ providedIn: 'root' })
+export class ShoppingListIntegrationService {
+  private readonly http = inject(HttpClient);
+
+  getSettings() {
+    return this.http.get<{ item: ShoppingListIntegrationSettings }>(`${environment.apiBaseUrl}/integrations/shopping-list`);
+  }
+
+  updateSettings(payload: { enabled: boolean; baseUrl?: string | null; apiToken?: string; authMode: 'bearer' | 'x-api-token' | 'both'; ownerId?: string | null; defaultListId?: string | null }) {
+    return this.http.put<{ item: ShoppingListIntegrationSettings }>(`${environment.apiBaseUrl}/integrations/shopping-list`, payload);
+  }
+
+  test() {
+    return this.http.post<{ ok: boolean; payload: unknown }>(`${environment.apiBaseUrl}/integrations/shopping-list/test`, {});
+  }
+
+  summary(filters: { start_date?: string; end_date?: string; list_id?: string; owner_id?: string } = {}) {
+    let params = new HttpParams();
+    Object.entries(filters).forEach(([key, value]) => {
+      if (value) params = params.set(key, value);
+    });
+    return this.http.get<ShoppingListSummary>(`${environment.apiBaseUrl}/integrations/shopping-list/summary`, { params });
+  }
+
+  latest(filters: { start_date?: string; end_date?: string; list_id?: string; owner_id?: string; limit?: number } = {}) {
+    let params = new HttpParams();
+    Object.entries(filters).forEach(([key, value]) => {
+      if (value !== undefined && value !== null && value !== '') params = params.set(key, String(value));
+    });
+    return this.http.get<{ items?: ShoppingListExpenseItem[]; data?: ShoppingListExpenseItem[] }>(`${environment.apiBaseUrl}/integrations/shopping-list/latest`, { params });
+  }
+
+  lists(filters: { owner_id?: string; limit?: number } = {}) {
+    let params = new HttpParams();
+    Object.entries(filters).forEach(([key, value]) => {
+      if (value !== undefined && value !== null && value !== '') params = params.set(key, String(value));
+    });
+    return this.http.get<{ items?: ShoppingListRef[]; data?: ShoppingListRef[] }>(`${environment.apiBaseUrl}/integrations/shopping-list/lists`, { params });
+  }
+
+  listExpenses(id: string | number, limit = 50) {
+    const params = new HttpParams().set('limit', String(limit));
+    return this.http.get<{ items?: ShoppingListExpenseItem[]; data?: ShoppingListExpenseItem[] }>(`${environment.apiBaseUrl}/integrations/shopping-list/lists/${id}/expenses`, { params });
+  }
+
+  importList(payload: {
+    listId: string | number;
+    listTitle?: string | null;
+    listCreatedAt?: string | null;
+    categoryId: string;
+    status: 'DRAFT' | 'PENDING';
+    merchant?: string | null;
+    title?: string | null;
+    description?: string | null;
+    expenseDate?: string | null;
+    tags?: string[];
+  }) {
+    return this.http.post<{ item: Expense; warnings?: string[] }>(`${environment.apiBaseUrl}/integrations/shopping-list/import-list`, payload);
+  }
+
+  importItem(payload: {
+    expenseId?: string | number | null;
+    listId?: string | number | null;
+    listTitle?: string | null;
+    categoryId: string;
+    status: 'DRAFT' | 'PENDING';
+    title: string;
+    amount: number;
+    expenseDate: string;
+    merchant?: string | null;
+    ownerName?: string | null;
+    description?: string | null;
+    tags?: string[];
+  }) {
+    return this.http.post<{ item: Expense; warnings?: string[] }>(`${environment.apiBaseUrl}/integrations/shopping-list/import-item`, payload);
+  }
+}

web/src/app/core/services/stats.service.ts

@@ -1,9 +1,21 @@
 import { Injectable, inject } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { environment } from '../../../environments/environment';
-import type { StatsResponse } from '../../shared/models';
+import type { CashflowResponse, StatsResponse } from '../../shared/models';
+
 @Injectable({ providedIn: 'root' })
 export class StatsService {
   private readonly http = inject(HttpClient);
-  overview(filters: { startDate?: string; endDate?: string; categoryIds?: string; bucket?: 'month' | 'quarter' | 'year' }) { let params = new HttpParams(); Object.entries(filters).forEach(([key, value]) => { if (value) params = params.set(key, value); }); return this.http.get<StatsResponse>(`${environment.apiBaseUrl}/statistics/overview`, { params }); }
+
+  overview(filters: { startDate?: string; endDate?: string; categoryIds?: string; bucket?: 'month' | 'quarter' | 'year'; tag?: string; status?: string }) {
+    let params = new HttpParams();
+    Object.entries(filters).forEach(([key, value]) => {
+      if (value) params = params.set(key, value);
+    });
+    return this.http.get<StatsResponse>(`${environment.apiBaseUrl}/statistics/overview`, { params });
+  }
+
+  cashflow() {
+    return this.http.get<CashflowResponse>(`${environment.apiBaseUrl}/statistics/cashflow`);
+  }
 }

web/src/app/core/services/ui.service.ts

@@ -44,6 +44,7 @@ const translations: Record<UiLanguage, Record<string, string>> = {
     'action.unblock': 'Odblokuj',
     'action.setUser': 'Ustaw USER',
     'action.setAdmin': 'Ustaw ADMIN',
+    'action.import': 'Importuj',
 
     'theme.label': 'Motyw',
     'theme.dark': 'Ciemny',
@@ -227,6 +228,87 @@ const translations: Record<UiLanguage, Record<string, string>> = {
     'admin.statusUpdated': 'Status konta został zaktualizowany.',
     'admin.statusError': 'Nie udało się zmienić statusu.',
 
+
+    'nav.cashflow': 'Cashflow',
+    'nav.budgets': 'Budżety',
+    'nav.recurring': 'Cykliczne',
+
+    'action.saveDraft': 'Zapisz szkic',
+
+    'status.draft': 'Szkic',
+    'status.pending': 'Oczekuje',
+    'status.approved': 'Zatwierdzony',
+    'status.rejected': 'Odrzucony',
+
+    'dashboard.cashflowHint': 'Przegląd kosztów, budżetów, duplikatów i przyszłych obciążeń.',
+    'dashboard.budgetUsage': 'Wykorzystanie budżetu',
+
+    'expenses.field.status': 'Status',
+    'expenses.field.tags': 'Tagi',
+    'expenses.field.customFields': 'Własne pola',
+    'expenses.field.customKey': 'Nazwa pola',
+    'expenses.field.customValue': 'Wartość',
+    'expenses.tagPlaceholder': 'np. projekt-x, marketing',
+    'expenses.noCustomFields': 'Brak własnych pól.',
+    'expenses.attachmentsSelected': 'Wybrane załączniki',
+    'expenses.duplicatesTitle': 'Wykryte potencjalne duplikaty',
+    'expenses.potentialMatches': 'podobnych pozycji',
+    'expenses.duplicatesOnly': 'Pokaż tylko potencjalne duplikaty',
+    'expenses.duplicate': 'Duplikat',
+    'expenses.draftSaved': 'Szkic wydatku został zapisany.',
+
+    'stats.tags': 'Analiza tagów',
+
+    'reports.exportTitle': 'Eksport raportów',
+    'reports.exportError': 'Nie udało się wyeksportować raportu.',
+
+    'budget.title': 'Budżety miesięczne',
+    'budget.subtitle': 'Limity miesięczne ogólne i per kategoria z alertami zużycia.',
+    'budget.new': 'Nowy budżet',
+    'budget.edit': 'Edytuj budżet',
+    'budget.month': 'Miesiąc',
+    'budget.name': 'Nazwa',
+    'budget.amount': 'Kwota budżetu',
+    'budget.category': 'Kategoria',
+    'budget.overall': 'Budżet ogólny',
+    'budget.thresholds': 'Progi alertów',
+    'budget.total': 'Łączny budżet',
+    'budget.spent': 'Wydano',
+    'budget.usage': 'Zużycie',
+    'budget.alerts': 'Alerty budżetowe',
+    'budget.saved': 'Budżet został zapisany.',
+    'budget.saveError': 'Nie udało się zapisać budżetu.',
+    'budget.deleted': 'Budżet został usunięty.',
+    'budget.deleteError': 'Nie udało się usunąć budżetu.',
+
+    'recurring.title': 'Cykliczne wydatki',
+    'recurring.subtitle': 'Szablony kosztów generowanych automatycznie w czasie.',
+    'recurring.new': 'Nowy harmonogram',
+    'recurring.edit': 'Edytuj harmonogram',
+    'recurring.frequency': 'Częstotliwość',
+    'recurring.weekly': 'Co tydzień',
+    'recurring.monthly': 'Co miesiąc',
+    'recurring.yearly': 'Co rok',
+    'recurring.interval': 'Interwał',
+    'recurring.startDate': 'Data startu',
+    'recurring.nextRunDate': 'Następne utworzenie',
+    'recurring.runNow': 'Uruchom teraz',
+    'recurring.saved': 'Harmonogram został zapisany.',
+    'recurring.saveError': 'Nie udało się zapisać harmonogramu.',
+    'recurring.deleted': 'Harmonogram został usunięty.',
+    'recurring.deleteError': 'Nie udało się usunąć harmonogramu.',
+    'recurring.ran': 'Cykliczne wydatki zostały przetworzone.',
+    'recurring.badge': 'Cykliczny',
+
+    'cashflow.subtitle': 'Rzeczywiste koszty, budżet, prognoza i najbliższe cykliczne obciążenia.',
+    'cashflow.actual': 'Rzeczywiste koszty',
+    'cashflow.budget': 'Budżet',
+    'cashflow.forecast': 'Prognoza miesiąca',
+    'cashflow.pending': 'Do akceptacji',
+    'cashflow.duplicates': 'Duplikaty',
+    'cashflow.trend': 'Trend cashflow',
+    'cashflow.statusSummary': 'Statusy wydatków',
+    'cashflow.upcomingRecurring': 'Nadchodzące cykliczne',
     'common.none': 'Brak',
     'common.select': 'Wybierz',
     'common.noData': 'Brak danych.',
@@ -237,12 +319,67 @@ const translations: Record<UiLanguage, Record<string, string>> = {
     'common.blocked': 'Zablokowany',
     'common.selected': 'OK',
 
+    'nav.integrations': 'Integracje',
+
+    'action.testConnection': 'Test połączenia',
+    'action.refresh': 'Odśwież',
+
+    'expenses.duplicateDismissed': 'Duplikat został odrzucony.',
+    'expenses.duplicateConfirmed': 'Wydatek został oznaczony jako potwierdzony duplikat.',
+    'expenses.duplicateReopened': 'Sprawdzenie duplikatu zostało przywrócone.',
+    'expenses.duplicateStatus.open': 'Do sprawdzenia',
+    'expenses.duplicateStatus.confirmed': 'Potwierdzony',
+    'expenses.duplicateStatus.dismissed': 'Odrzucony',
+
+    'recurring.endDate': 'Data końcowa',
+    'recurring.maxOccurrences': 'Maks. liczba utworzeń',
+    'recurring.generatedCount': 'Utworzono',
+
+    'integrations.title': 'Integracje',
+    'integrations.subtitle': 'Połączenia per użytkownik z zewnętrznymi źródłami danych oraz import historyczny.',
+    'integrations.shoppingList': 'Lista zakupów API',
+    'integrations.enabled': 'Włącz integrację dla tego użytkownika',
+    'integrations.baseUrl': 'URL API',
+    'integrations.apiToken': 'Token API',
+    'integrations.keepToken': 'Zostaw puste, aby zachować obecny token.',
+    'integrations.authMode': 'Tryb autoryzacji',
+    'integrations.ownerId': 'Domyślny owner ID',
+    'integrations.defaultListId': 'Domyślne list ID',
+    'integrations.history': 'Import historyczny',
+    'integrations.period': 'Miesiąc / rok',
+    'integrations.limit': 'Limit rekordów',
+    'integrations.summary': 'Podsumowanie zewnętrzne',
+    'integrations.latest': 'Wydatki z wybranego okresu',
+    'integrations.lists': 'Listy zakupowe z okresu',
+    'integrations.listExpenses': 'Pozycje wybranej listy',
+    'integrations.importTitle': 'Import do lokalnych wydatków',
+    'integrations.importSelectedList': 'Importuj wybraną listę jako 1 wydatek',
+    'integrations.selectListHint': 'Wybierz listę po lewej, aby podejrzeć pozycje i zaimportować całą listę lub pojedyncze wydatki.',
+    'integrations.selectedListSummary': 'Pozycje / suma',
+    'integrations.tags': 'Tagi importu',
+    'integrations.tagsHint': 'Oddzielaj tagi przecinkami.',
+    'integrations.externalSpend': 'Suma zewnętrzna',
+    'integrations.externalCount': 'Rekordy zewnętrzne',
+    'integrations.notConfigured': 'Skonfiguruj integrację i zapisz ustawienia, aby pobrać dane.',
+    'integrations.saveSuccess': 'Ustawienia integracji zostały zapisane.',
+    'integrations.saveError': 'Nie udało się zapisać ustawień integracji.',
+    'integrations.testSuccess': 'Połączenie z zewnętrznym API działa.',
+    'integrations.testError': 'Nie udało się połączyć z zewnętrznym API.',
+    'integrations.loadError': 'Nie udało się pobrać danych integracji.',
+    'integrations.importListSuccess': 'Lista zakupowa została zaimportowana jako lokalny wydatek.',
+    'integrations.importItemSuccess': 'Pozycja z listy zakupowej została zaimportowana.',
+    'integrations.importError': 'Nie udało się zaimportować danych z list zakupowych.',
+
+    'dashboard.externalSpend': 'Zewnętrzna suma',
+    'dashboard.externalRecords': 'Zewnętrzne rekordy',
+
     'table.title': 'Tytuł',
     'table.merchant': 'Kontrahent',
     'table.date': 'Data',
     'table.amount': 'Kwota',
     'table.count': 'Liczba',
     'table.category': 'Kategoria',
+    'table.actions': 'Akcje',
 
     'toast.ready': 'Gotowe',
     'toast.error': 'Błąd',
@@ -288,6 +425,7 @@ const translations: Record<UiLanguage, Record<string, string>> = {
     'action.unblock': 'Unblock',
     'action.setUser': 'Set USER',
     'action.setAdmin': 'Set ADMIN',
+    'action.import': 'Import',
 
     'theme.label': 'Theme',
     'theme.dark': 'Dark',
@@ -471,6 +609,87 @@ const translations: Record<UiLanguage, Record<string, string>> = {
     'admin.statusUpdated': 'Account status updated successfully.',
     'admin.statusError': 'Failed to change the account status.',
 
+
+    'nav.cashflow': 'Cashflow',
+    'nav.budgets': 'Budgets',
+    'nav.recurring': 'Recurring',
+
+    'action.saveDraft': 'Save draft',
+
+    'status.draft': 'Draft',
+    'status.pending': 'Pending',
+    'status.approved': 'Approved',
+    'status.rejected': 'Rejected',
+
+    'dashboard.cashflowHint': 'Overview of spend, budgets, duplicates, and upcoming recurring charges.',
+    'dashboard.budgetUsage': 'Budget usage',
+
+    'expenses.field.status': 'Status',
+    'expenses.field.tags': 'Tags',
+    'expenses.field.customFields': 'Custom fields',
+    'expenses.field.customKey': 'Field name',
+    'expenses.field.customValue': 'Value',
+    'expenses.tagPlaceholder': 'e.g. project-x, marketing',
+    'expenses.noCustomFields': 'No custom fields.',
+    'expenses.attachmentsSelected': 'Selected attachments',
+    'expenses.duplicatesTitle': 'Potential duplicates detected',
+    'expenses.potentialMatches': 'similar entries',
+    'expenses.duplicatesOnly': 'Show only potential duplicates',
+    'expenses.duplicate': 'Duplicate',
+    'expenses.draftSaved': 'Expense draft was saved.',
+
+    'stats.tags': 'Tag analysis',
+
+    'reports.exportTitle': 'Report export',
+    'reports.exportError': 'Failed to export the report.',
+
+    'budget.title': 'Monthly budgets',
+    'budget.subtitle': 'Monthly limits overall and per category with usage alerts.',
+    'budget.new': 'New budget',
+    'budget.edit': 'Edit budget',
+    'budget.month': 'Month',
+    'budget.name': 'Name',
+    'budget.amount': 'Budget amount',
+    'budget.category': 'Category',
+    'budget.overall': 'Overall budget',
+    'budget.thresholds': 'Alert thresholds',
+    'budget.total': 'Total budget',
+    'budget.spent': 'Spent',
+    'budget.usage': 'Usage',
+    'budget.alerts': 'Budget alerts',
+    'budget.saved': 'Budget was saved.',
+    'budget.saveError': 'Failed to save budget.',
+    'budget.deleted': 'Budget was deleted.',
+    'budget.deleteError': 'Failed to delete budget.',
+
+    'recurring.title': 'Recurring expenses',
+    'recurring.subtitle': 'Templates for costs generated automatically over time.',
+    'recurring.new': 'New schedule',
+    'recurring.edit': 'Edit schedule',
+    'recurring.frequency': 'Frequency',
+    'recurring.weekly': 'Weekly',
+    'recurring.monthly': 'Monthly',
+    'recurring.yearly': 'Yearly',
+    'recurring.interval': 'Interval',
+    'recurring.startDate': 'Start date',
+    'recurring.nextRunDate': 'Next run date',
+    'recurring.runNow': 'Run now',
+    'recurring.saved': 'Recurring schedule was saved.',
+    'recurring.saveError': 'Failed to save recurring schedule.',
+    'recurring.deleted': 'Recurring schedule was deleted.',
+    'recurring.deleteError': 'Failed to delete recurring schedule.',
+    'recurring.ran': 'Recurring expenses were processed.',
+    'recurring.badge': 'Recurring',
+
+    'cashflow.subtitle': 'Actual spend, budget, forecast, and upcoming recurring charges.',
+    'cashflow.actual': 'Actual spend',
+    'cashflow.budget': 'Budget',
+    'cashflow.forecast': 'Month forecast',
+    'cashflow.pending': 'Pending approval',
+    'cashflow.duplicates': 'Duplicates',
+    'cashflow.trend': 'Cashflow trend',
+    'cashflow.statusSummary': 'Expense statuses',
+    'cashflow.upcomingRecurring': 'Upcoming recurring',
     'common.none': 'None',
     'common.select': 'Select',
     'common.noData': 'No data.',
@@ -481,12 +700,67 @@ const translations: Record<UiLanguage, Record<string, string>> = {
     'common.blocked': 'Blocked',
     'common.selected': 'OK',
 
+    'nav.integrations': 'Integrations',
+
+    'action.testConnection': 'Test connection',
+    'action.refresh': 'Refresh',
+
+    'expenses.duplicateDismissed': 'Duplicate flag was dismissed.',
+    'expenses.duplicateConfirmed': 'Expense was marked as a confirmed duplicate.',
+    'expenses.duplicateReopened': 'Duplicate review was reopened.',
+    'expenses.duplicateStatus.open': 'Needs review',
+    'expenses.duplicateStatus.confirmed': 'Confirmed',
+    'expenses.duplicateStatus.dismissed': 'Dismissed',
+
+    'recurring.endDate': 'End date',
+    'recurring.maxOccurrences': 'Max occurrences',
+    'recurring.generatedCount': 'Generated',
+
+    'integrations.title': 'Integrations',
+    'integrations.subtitle': 'Per-user connections to external data sources with historical backfill.',
+    'integrations.shoppingList': 'Shopping list API',
+    'integrations.enabled': 'Enable integration for this user',
+    'integrations.baseUrl': 'API URL',
+    'integrations.apiToken': 'API token',
+    'integrations.keepToken': 'Leave blank to keep the current token.',
+    'integrations.authMode': 'Authorization mode',
+    'integrations.ownerId': 'Default owner ID',
+    'integrations.defaultListId': 'Default list ID',
+    'integrations.history': 'Historical import',
+    'integrations.period': 'Month / year',
+    'integrations.limit': 'Record limit',
+    'integrations.summary': 'External summary',
+    'integrations.latest': 'Expenses for selected period',
+    'integrations.lists': 'Shopping lists for period',
+    'integrations.listExpenses': 'Entries for selected list',
+    'integrations.importTitle': 'Import into local expenses',
+    'integrations.importSelectedList': 'Import selected list as 1 expense',
+    'integrations.selectListHint': 'Select a list on the left to preview entries and import the whole list or individual expenses.',
+    'integrations.selectedListSummary': 'Entries / total',
+    'integrations.tags': 'Import tags',
+    'integrations.tagsHint': 'Separate tags with commas.',
+    'integrations.externalSpend': 'External spend',
+    'integrations.externalCount': 'External records',
+    'integrations.notConfigured': 'Configure the integration and save settings to load data.',
+    'integrations.saveSuccess': 'Integration settings were saved.',
+    'integrations.saveError': 'Failed to save integration settings.',
+    'integrations.testSuccess': 'Connection to the external API works.',
+    'integrations.testError': 'Failed to connect to the external API.',
+    'integrations.loadError': 'Failed to load integration data.',
+    'integrations.importListSuccess': 'The shopping list was imported as a local expense.',
+    'integrations.importItemSuccess': 'The shopping list entry was imported.',
+    'integrations.importError': 'Failed to import data from the shopping list API.',
+
+    'dashboard.externalSpend': 'External spend',
+    'dashboard.externalRecords': 'External records',
+
     'table.title': 'Title',
     'table.merchant': 'Merchant',
     'table.date': 'Date',
     'table.amount': 'Amount',
     'table.count': 'Count',
     'table.category': 'Category',
+    'table.actions': 'Actions',
 
     'toast.ready': 'Done',
     'toast.error': 'Error',

web/src/app/features/budgets/budgets.component.ts

@@ -0,0 +1,130 @@
+import { CommonModule, CurrencyPipe } from '@angular/common';
+import { Component, OnInit, inject, signal } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { BudgetsService } from '../../core/services/budgets.service';
+import { CategoriesService } from '../../core/services/categories.service';
+import { ToastService } from '../../core/services/toast.service';
+import { UiService } from '../../core/services/ui.service';
+import type { Budget } from '../../shared/models';
+
+const currentMonth = () => {
+  const date = new Date();
+  return `${date.getFullYear()}-${`${date.getMonth() + 1}`.padStart(2, '0')}`;
+};
+
+@Component({
+  selector: 'app-budgets',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, CurrencyPipe],
+  template: `
+    <div class="page-header d-print-none mb-3 ec-page-header">
+      <div class="row align-items-center g-3">
+        <div class="col">
+          <h2 class="page-title mb-1">{{ ui.t('nav.budgets') }}</h2>
+          <div class="text-secondary">{{ ui.t('budget.subtitle') }}</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row row-cards">
+      <div class="col-lg-4">
+        <div class="card overflow-hidden">
+          <div class="card-header d-flex justify-content-between align-items-center">
+            <h3 class="card-title">{{ editingId() ? ui.t('budget.edit') : ui.t('budget.new') }}</h3>
+            @if (editingId()) {
+              <button class="btn btn-outline-secondary btn-sm" type="button" (click)="cancelEdit()">{{ ui.t('action.cancelEdit') }}</button>
+            }
+          </div>
+          <div class="card-body">
+            <form [formGroup]="form" (ngSubmit)="save()" class="d-grid gap-3">
+              <div><label class="form-label">{{ ui.t('budget.month') }}</label><input class="form-control" type="month" formControlName="month" /></div>
+              <div><label class="form-label">{{ ui.t('budget.name') }}</label><input class="form-control" formControlName="name" /></div>
+              <div><label class="form-label">{{ ui.t('budget.amount') }}</label><input class="form-control" type="number" step="0.01" formControlName="amount" /></div>
+              <div>
+                <label class="form-label">{{ ui.t('budget.category') }}</label>
+                <select class="form-select" formControlName="categoryId">
+                  <option value="">{{ ui.t('budget.overall') }}</option>
+                  @for (category of categories(); track category.id) { <option [value]="category.id">{{ category.name }}</option> }
+                </select>
+              </div>
+              <div><label class="form-label">{{ ui.t('budget.thresholds') }}</label><input class="form-control" formControlName="thresholdsText" /></div>
+              <label class="form-check mb-0"><input class="form-check-input" type="checkbox" formControlName="isActive" /><span class="form-check-label">{{ ui.t('common.active') }}</span></label>
+              <button class="btn btn-success" [disabled]="form.invalid">{{ ui.t('action.save') }}</button>
+            </form>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-lg-8">
+        <div class="row g-3 mb-3">
+          <div class="col-sm-4"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('budget.total') }}</div><div class="display-6">{{ summary()?.totalBudget || 0 | currency:'PLN':'symbol':'1.2-2' }}</div></div></div></div>
+          <div class="col-sm-4"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('budget.spent') }}</div><div class="display-6">{{ summary()?.totalSpent || 0 | currency:'PLN':'symbol':'1.2-2' }}</div></div></div></div>
+          <div class="col-sm-4"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('budget.alerts') }}</div><div class="display-6">{{ summary()?.alerts?.length || 0 }}</div></div></div></div>
+        </div>
+
+        @if (summary()?.alerts?.length) {
+          <div class="alert alert-warning">
+            <div class="fw-semibold mb-2">{{ ui.t('budget.alerts') }}</div>
+            <div class="d-grid gap-1">@for (alert of summary()!.alerts; track alert.budgetId) { <div>{{ alert.message }}</div> }</div>
+          </div>
+        }
+
+        <div class="card overflow-hidden">
+          <div class="card-header d-flex justify-content-between align-items-center">
+            <h3 class="card-title">{{ ui.t('budget.title') }}</h3>
+            <input class="form-control form-control-sm" style="max-width: 10rem" type="month" [value]="selectedMonth()" (change)="changeMonth($any($event.target).value)" />
+          </div>
+          <div class="table-responsive">
+            <table class="table table-vcenter card-table mb-0">
+              <thead><tr><th>{{ ui.t('budget.name') }}</th><th>{{ ui.t('table.category') }}</th><th>{{ ui.t('budget.usage') }}</th><th class="text-end">{{ ui.t('table.amount') }}</th><th></th></tr></thead>
+              <tbody>
+                @for (item of items(); track item.id) {
+                  <tr>
+                    <td><div class="fw-semibold">{{ item.name || item.category?.name || ui.t('budget.overall') }}</div><div class="progress progress-sm mt-2"><div class="progress-bar" [style.width.%]="item.usagePercent > 100 ? 100 : item.usagePercent"></div></div></td>
+                    <td>{{ item.category?.name || ui.t('budget.overall') }}</td>
+                    <td><span class="badge" [ngClass]="item.alertLevel ? 'text-bg-warning' : 'text-bg-success'">{{ item.usagePercent }}%</span></td>
+                    <td class="text-end"><div>{{ item.spent | currency:'PLN':'symbol':'1.2-2' }}</div><div class="text-secondary small">/ {{ item.amount | currency:'PLN':'symbol':'1.2-2' }}</div></td>
+                    <td class="text-end"><div class="btn-list justify-content-end flex-nowrap"><button class="btn btn-sm btn-outline-primary" type="button" (click)="edit(item)">{{ ui.t('action.edit') }}</button><button class="btn btn-sm btn-outline-danger" type="button" (click)="remove(item)">{{ ui.t('action.delete') }}</button></div></td>
+                  </tr>
+                } @empty { <tr><td colspan="5" class="text-secondary">{{ ui.t('common.noData') }}</td></tr> }
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  `
+})
+export class BudgetsComponent implements OnInit {
+  readonly ui = inject(UiService);
+  private readonly fb = inject(FormBuilder);
+  private readonly categoriesService = inject(CategoriesService);
+  private readonly budgetsService = inject(BudgetsService);
+  private readonly toast = inject(ToastService);
+
+  readonly categories = this.categoriesService.items;
+  readonly items = signal<Budget[]>([]);
+  readonly summary = signal<{ totalBudget: number; totalSpent: number; alerts: Array<{ budgetId: string; message: string; usagePercent: number; level: number }> } | null>(null);
+  readonly selectedMonth = signal(currentMonth());
+  readonly editingId = signal<string | null>(null);
+
+  readonly form = this.fb.nonNullable.group({ month: [currentMonth(), Validators.required], name: [''], amount: [0, [Validators.required, Validators.min(0.01)]], categoryId: [''], thresholdsText: ['80,100'], isActive: [true] });
+
+  ngOnInit() { this.categoriesService.ensureLoaded(true); this.load(); }
+
+  changeMonth(month: string) { this.selectedMonth.set(month || currentMonth()); this.load(); }
+
+  load() { this.budgetsService.list(this.selectedMonth()).subscribe({ next: (response) => { this.items.set(response.items); this.summary.set(response.summary); } }); }
+
+  save() {
+    if (this.form.invalid) return;
+    const raw = this.form.getRawValue();
+    const payload = { month: raw.month, name: raw.name || undefined, amount: raw.amount, categoryId: raw.categoryId || null, alertThresholds: raw.thresholdsText.split(',').map((item) => Number(item.trim())).filter((item) => Number.isFinite(item) && item > 0), isActive: raw.isActive };
+    const request = this.editingId() ? this.budgetsService.update(this.editingId()!, payload) : this.budgetsService.create(payload);
+    request.subscribe({ next: () => { this.toast.success(this.ui.t('budget.saved')); this.cancelEdit(); this.load(); }, error: (error) => this.toast.error(error.error?.message ?? this.ui.t('budget.saveError')) });
+  }
+
+  edit(item: Budget) { this.editingId.set(item.id); this.form.reset({ month: item.month, name: item.name || '', amount: item.amount, categoryId: item.category?.id || '', thresholdsText: (item.alertThresholds || [80, 100]).join(','), isActive: item.isActive }); }
+  cancelEdit() { this.editingId.set(null); this.form.reset({ month: this.selectedMonth(), name: '', amount: 0, categoryId: '', thresholdsText: '80,100', isActive: true }); }
+  remove(item: Budget) { this.budgetsService.delete(item.id).subscribe({ next: () => { this.toast.success(this.ui.t('budget.deleted')); this.load(); }, error: (error) => this.toast.error(error.error?.message ?? this.ui.t('budget.deleteError')) }); }
+}

web/src/app/features/cashflow/cashflow.component.ts

@@ -0,0 +1,87 @@
+import { CommonModule, CurrencyPipe, DatePipe } from '@angular/common';
+import { AfterViewChecked, Component, OnDestroy, OnInit, inject, signal } from '@angular/core';
+import { Chart, LineController, LineElement, PointElement, CategoryScale, LinearScale, Tooltip, Legend } from 'chart.js';
+import { StatsService } from '../../core/services/stats.service';
+import { UiService } from '../../core/services/ui.service';
+import type { CashflowResponse } from '../../shared/models';
+
+Chart.register(LineController, LineElement, PointElement, CategoryScale, LinearScale, Tooltip, Legend);
+
+@Component({
+  selector: 'app-cashflow',
+  standalone: true,
+  imports: [CommonModule, CurrencyPipe, DatePipe],
+  template: `
+    <div class="page-header d-print-none mb-3 ec-page-header">
+      <div class="row align-items-center g-3"><div class="col"><h2 class="page-title mb-1">{{ ui.t('nav.cashflow') }}</h2><div class="text-secondary">{{ ui.t('cashflow.subtitle') }}</div></div></div>
+    </div>
+
+    <div class="row row-cards">
+      <div class="col-md-3"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('cashflow.actual') }}</div><div class="display-6">{{ data()?.actualCurrent || 0 | currency:'PLN':'symbol':'1.2-2' }}</div></div></div></div>
+      <div class="col-md-3"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('cashflow.budget') }}</div><div class="display-6">{{ data()?.totalBudget || 0 | currency:'PLN':'symbol':'1.2-2' }}</div></div></div></div>
+      <div class="col-md-3"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('cashflow.forecast') }}</div><div class="display-6">{{ data()?.forecastCurrentMonth || 0 | currency:'PLN':'symbol':'1.2-2' }}</div></div></div></div>
+      <div class="col-md-3"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('cashflow.pending') }}</div><div class="display-6">{{ data()?.pendingApproval || 0 }}</div></div></div></div>
+
+      <div class="col-lg-8 d-flex align-items-stretch">
+        <div class="card pv-card h-100 w-100 overflow-hidden">
+          <div class="card-header"><h3 class="card-title">{{ ui.t('cashflow.trend') }}</h3></div>
+          <div class="card-body"><div class="ec-chart-wrap"><canvas id="cashflowTrendChart"></canvas></div></div>
+        </div>
+      </div>
+      <div class="col-lg-4 d-flex align-items-stretch">
+        <div class="card pv-card h-100 w-100 overflow-hidden">
+          <div class="card-header"><h3 class="card-title">{{ ui.t('budget.alerts') }}</h3></div>
+          <div class="card-body d-grid gap-2">
+            @for (alert of data()?.alerts || []; track alert.id) {
+              <div class="alert alert-warning mb-0 py-2 px-3">{{ alert.name }} · {{ alert.usagePercent }}%</div>
+            } @empty {
+              <div class="text-secondary">{{ ui.t('common.noData') }}</div>
+            }
+          </div>
+        </div>
+      </div>
+
+      <div class="col-lg-6">
+        <div class="card overflow-hidden">
+          <div class="card-header"><h3 class="card-title">{{ ui.t('cashflow.statusSummary') }}</h3></div>
+          <div class="table-responsive"><table class="table table-vcenter card-table mb-0"><thead><tr><th>{{ ui.t('expenses.field.status') }}</th><th class="text-end">{{ ui.t('table.count') }}</th></tr></thead><tbody>@for (item of data()?.statusSummary || []; track item.status) { <tr><td>{{ ui.t('status.' + item.status.toLowerCase()) }}</td><td class="text-end">{{ item.count }}</td></tr> } @empty { <tr><td colspan="2" class="text-secondary">{{ ui.t('common.noData') }}</td></tr> }</tbody></table></div>
+        </div>
+      </div>
+      <div class="col-lg-6">
+        <div class="card overflow-hidden">
+          <div class="card-header"><h3 class="card-title">{{ ui.t('cashflow.upcomingRecurring') }}</h3></div>
+          <div class="table-responsive"><table class="table table-vcenter card-table mb-0"><thead><tr><th>{{ ui.t('table.title') }}</th><th>{{ ui.t('table.date') }}</th><th class="text-end">{{ ui.t('table.amount') }}</th></tr></thead><tbody>@for (item of data()?.upcomingRecurring || []; track item.id) { <tr><td>{{ item.title }}</td><td>{{ item.nextRunDate | date:'yyyy-MM-dd' }}</td><td class="text-end">{{ item.amount | currency:'PLN':'symbol':'1.2-2' }}</td></tr> } @empty { <tr><td colspan="3" class="text-secondary">{{ ui.t('common.noData') }}</td></tr> }</tbody></table></div>
+        </div>
+      </div>
+    </div>
+  `
+})
+export class CashflowComponent implements OnInit, AfterViewChecked, OnDestroy {
+  readonly ui = inject(UiService);
+  private readonly statsService = inject(StatsService);
+  readonly data = signal<CashflowResponse | null>(null);
+  private chart?: Chart;
+  private chartPending = false;
+
+  ngOnInit() { this.statsService.cashflow().subscribe({ next: (response) => { this.data.set(response); this.chartPending = true; } }); }
+  ngAfterViewChecked() { if (this.chartPending) { this.chartPending = false; this.renderChart(); } }
+  ngOnDestroy() { this.chart?.destroy(); }
+
+  private renderChart() {
+    const canvas = document.getElementById('cashflowTrendChart') as HTMLCanvasElement | null;
+    const data = this.data();
+    if (!canvas || !data?.trend?.length) return;
+    this.chart?.destroy();
+    this.chart = new Chart(canvas, {
+      type: 'line',
+      data: {
+        labels: data.trend.map((item) => item.label),
+        datasets: [
+          { label: this.ui.t('cashflow.actual'), data: data.trend.map((item) => item.actual), borderColor: '#206bc4', backgroundColor: '#206bc4', tension: 0.25 },
+          { label: this.ui.t('cashflow.budget'), data: data.trend.map((item) => item.budget), borderColor: '#2fb344', backgroundColor: '#2fb344', tension: 0.25 }
+        ]
+      },
+      options: { maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: { color: '#9ca3af' } } }, scales: { x: { ticks: { color: '#9ca3af' } }, y: { ticks: { color: '#9ca3af' } } } }
+    });
+  }
+}

web/src/app/features/dashboard/dashboard.component.ts

@@ -1,17 +1,16 @@
 import { CommonModule, CurrencyPipe, DatePipe } from '@angular/common';
 import { AfterViewChecked, Component, OnDestroy, OnInit, inject } from '@angular/core';
-import { RouterLink } from '@angular/router';
-import { Chart, DoughnutController, ArcElement, Tooltip, Legend } from 'chart.js';
-import { AuthService } from '../../core/services/auth.service';
-import { UiService } from '../../core/services/ui.service';
+import { Chart, ArcElement, DoughnutController, Legend, Tooltip } from 'chart.js';
 import { ExpensesService } from '../../core/services/expenses.service';
+import { ShoppingListIntegrationService } from '../../core/services/shopping-list-integration.service';
 import { StatsService } from '../../core/services/stats.service';
-import type { Expense, StatsResponse } from '../../shared/models';
+import { UiService } from '../../core/services/ui.service';
+import type { CashflowResponse, Expense, ShoppingListSummary, StatsResponse } from '../../shared/models';
 
 Chart.register(DoughnutController, ArcElement, Tooltip, Legend);
 
+const DASHBOARD_CACHE_KEY = 'expense-control-dashboard-v6';
 const chartPalette = ['#206bc4', '#2fb344', '#f59f00', '#d63939', '#9b4dca', '#4263eb', '#0ca678', '#e8590c'];
-const DASHBOARD_CACHE_KEY = 'expense-control-dashboard-cache';
 
 const formatLocalDate = (date: Date) => {
   const year = date.getFullYear();
@@ -21,83 +20,42 @@ const formatLocalDate = (date: Date) => {
 };
 
 const getMonthRange = () => {
-  const now = new Date();
+  const today = new Date();
   return {
-    start: formatLocalDate(new Date(now.getFullYear(), now.getMonth(), 1)),
-    end: formatLocalDate(now)
+    start: formatLocalDate(new Date(today.getFullYear(), today.getMonth(), 1)),
+    end: formatLocalDate(today)
   };
 };
 
 @Component({
   selector: 'app-dashboard',
   standalone: true,
-  imports: [CommonModule, CurrencyPipe, DatePipe, RouterLink],
+  imports: [CommonModule, CurrencyPipe, DatePipe],
   template: `
     <div class="page-header d-print-none mb-3 ec-page-header">
       <div class="row align-items-center g-3">
         <div class="col">
-          <h2 class="page-title mb-1">{{ auth.currentUser()?.fullName }}</h2>
-        </div>
-        <div class="col-12 col-xl d-flex justify-content-xl-end">
-          <div class="ec-page-header-actions">
-            <a class="btn btn-success d-inline-flex align-items-center gap-2" routerLink="/expenses">
-              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14"/><path d="M5 12l14 0"/></svg>
-              <span>{{ ui.t('action.addExpense') }}</span>
-            </a>
-          </div>
+          <h2 class="page-title mb-1">{{ ui.t('nav.dashboard') }}</h2>
+          <div class="text-secondary">{{ ui.t('dashboard.cashflowHint') }}</div>
         </div>
       </div>
     </div>
 
-    <div class="row row-cards g-3">
-      <div class="col-12">
-        <div class="card pv-card pv-hero-card overflow-hidden">
-          <div class="card-body">
-            <div class="row align-items-center g-3">
-              <div class="col-lg-7">
-                <div class="text-secondary text-uppercase small fw-semibold mb-2">{{ ui.t('dashboard.total') }}</div>
-                <div class="display-6 fw-bold mb-0">{{ (stats?.total || 0) | currency:'PLN':'symbol':'1.2-2' }}</div>
-              </div>
-              <div class="col-lg-5">
-                <div class="row g-3">
-                  <div class="col-6">
-                    <div class="border rounded-3 p-3 h-100 ec-metric-card">
-                      <div class="text-secondary small">{{ ui.t('dashboard.count') }}</div>
-                      <div class="h2 mb-0">{{ stats?.count || 0 }}</div>
-                    </div>
-                  </div>
-                  <div class="col-6">
-                    <div class="border rounded-3 p-3 h-100 ec-metric-card">
-                      <div class="text-secondary small">{{ ui.t('dashboard.avg') }}</div>
-                      <div class="h2 mb-0">{{ (stats?.average || 0) | currency:'PLN':'symbol':'1.2-2' }}</div>
-                    </div>
-                  </div>
-                  <div class="col-12">
-                    <div class="border rounded-3 p-3 h-100 ec-metric-card">
-                      <div class="text-secondary small">{{ ui.t('dashboard.top') }}</div>
-                      <div class="h3 mb-0">{{ stats?.topCategory?.categoryName || ui.t('common.none') }}</div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+    <div class="row row-cards">
+      <div class="col-md-3"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('dashboard.total') }}</div><div class="display-6">{{ (stats?.total || 0) | currency:'PLN':'symbol':'1.2-2' }}</div></div></div></div>
+      <div class="col-md-3"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('dashboard.count') }}</div><div class="display-6">{{ stats?.count || 0 }}</div></div></div></div>
+      <div class="col-md-3"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('dashboard.budgetUsage') }}</div><div class="display-6">{{ cashflow?.budgetUsagePercent || 0 }}%</div></div></div></div>
+      <div class="col-md-3"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('cashflow.forecast') }}</div><div class="display-6">{{ (cashflow?.forecastCurrentMonth || 0) | currency:'PLN':'symbol':'1.2-2' }}</div></div></div></div>
 
-      <div class="col-lg-5 d-flex align-items-stretch">
-        <div class="card pv-card w-100 overflow-hidden">
-          <div class="card-header">
-            <div>
-              <h3 class="card-title">{{ ui.t('dashboard.share') }}</h3>
-              <div class="ec-card-header-muted">{{ ui.t('dashboard.shareHint') }}</div>
-            </div>
-          </div>
+      <div class="col-md-6"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('dashboard.externalSpend') }}</div><div class="display-6">{{ externalAmount() | currency:'PLN':'symbol':'1.2-2' }}</div></div></div></div>
+      <div class="col-md-6"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('dashboard.externalRecords') }}</div><div class="display-6">{{ externalCount() }}</div></div></div></div>
+
+      <div class="col-lg-7 d-flex align-items-stretch">
+        <div class="card pv-card h-100 w-100 overflow-hidden">
+          <div class="card-header"><h3 class="card-title">{{ ui.t('dashboard.share') }}</h3></div>
           <div class="card-body">
-            @if (hasCategoryData()) {
-              <div class="ec-chart-wrap ec-chart-wrap-sm">
-                <canvas id="dashboardCategoryChart"></canvas>
-              </div>
+            @if (stats?.byCategory?.length) {
+              <div class="ec-chart-wrap"><canvas id="dashboardCategoryChart"></canvas></div>
             } @else {
               <div class="alert alert-info mb-0">{{ ui.t('dashboard.noChartData') }}</div>
             }
@@ -105,26 +63,63 @@ const getMonthRange = () => {
         </div>
       </div>
 
-      <div class="col-lg-7 d-flex align-items-stretch">
-        <div class="card pv-card w-100 overflow-hidden">
-          <div class="card-header">
+      <div class="col-lg-5 d-flex align-items-stretch">
+        <div class="card pv-card h-100 w-100 overflow-hidden">
+          <div class="card-header"><h3 class="card-title">{{ ui.t('nav.cashflow') }}</h3></div>
+          <div class="card-body d-grid gap-3">
+            <div class="d-flex justify-content-between"><span class="text-secondary">{{ ui.t('cashflow.actual') }}</span><strong>{{ (cashflow?.actualCurrent || 0) | currency:'PLN':'symbol':'1.2-2' }}</strong></div>
+            <div class="d-flex justify-content-between"><span class="text-secondary">{{ ui.t('cashflow.budget') }}</span><strong>{{ (cashflow?.totalBudget || 0) | currency:'PLN':'symbol':'1.2-2' }}</strong></div>
+            <div class="d-flex justify-content-between"><span class="text-secondary">{{ ui.t('cashflow.pending') }}</span><strong>{{ cashflow?.pendingApproval || 0 }}</strong></div>
+            <div class="d-flex justify-content-between"><span class="text-secondary">{{ ui.t('cashflow.duplicates') }}</span><strong>{{ cashflow?.duplicateCount || 0 }}</strong></div>
             <div>
-              <h3 class="card-title">{{ ui.t('dashboard.areas') }}</h3>
-              <div class="ec-card-header-muted">{{ ui.t('dashboard.areasHint') }}</div>
+              <div class="form-label mb-2">{{ ui.t('budget.alerts') }}</div>
+              <div class="d-grid gap-2">
+                @for (alert of cashflow?.alerts || []; track alert.id) {
+                  <div class="alert alert-warning mb-0 py-2 px-3">{{ alert.name }} · {{ alert.usagePercent }}%</div>
+                } @empty {
+                  <div class="text-secondary">{{ ui.t('common.noData') }}</div>
+                }
+              </div>
             </div>
           </div>
+        </div>
+      </div>
+
+      <div class="col-lg-6">
+        <div class="card overflow-hidden">
+          <div class="card-header"><h3 class="card-title">{{ ui.t('dashboard.recent') }}</h3></div>
           <div class="table-responsive">
-            <table class="table table-vcenter card-table table-striped mb-0">
-              <thead>
-                <tr><th>{{ ui.t('table.category') }}</th><th class="text-end">{{ ui.t('table.amount') }}</th><th class="text-end">{{ ui.t('table.count') }}</th></tr>
-              </thead>
+            <table class="table table-vcenter card-table mb-0">
+              <thead><tr><th>{{ ui.t('table.title') }}</th><th>{{ ui.t('table.category') }}</th><th>{{ ui.t('expenses.field.status') }}</th><th class="text-end">{{ ui.t('table.amount') }}</th></tr></thead>
               <tbody>
-                @for (row of stats?.byCategory || []; track row.categoryId) {
+                @for (item of recentExpenses; track item.id) {
                   <tr>
-                    <td>{{ row.categoryName }}</td>
-                    <td class="text-end">{{ row.total | currency:'PLN':'symbol':'1.2-2' }}</td>
-                    <td class="text-end">{{ row.count }}</td>
+                    <td>
+                      <div class="fw-semibold">{{ item.title }}</div>
+                      <div class="text-secondary small">{{ item.merchant || ui.t('expenses.noMerchant') }}</div>
+                    </td>
+                    <td>{{ item.category.name }}</td>
+                    <td><span class="badge" [ngClass]="statusBadgeClass(item.status)">{{ ui.t('status.' + item.status.toLowerCase()) }}</span></td>
+                    <td class="text-end">{{ item.amount | currency:'PLN':'symbol':'1.2-2' }}</td>
                   </tr>
+                } @empty {
+                  <tr><td colspan="4" class="text-secondary">{{ ui.t('common.noExpenses') }}</td></tr>
+                }
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-lg-6">
+        <div class="card overflow-hidden">
+          <div class="card-header"><h3 class="card-title">{{ ui.t('cashflow.upcomingRecurring') }}</h3></div>
+          <div class="table-responsive">
+            <table class="table table-vcenter card-table mb-0">
+              <thead><tr><th>{{ ui.t('table.title') }}</th><th>{{ ui.t('table.date') }}</th><th class="text-end">{{ ui.t('table.amount') }}</th></tr></thead>
+              <tbody>
+                @for (item of cashflow?.upcomingRecurring || []; track item.id) {
+                  <tr><td>{{ item.title }}</td><td>{{ item.nextRunDate | date:'yyyy-MM-dd' }}</td><td class="text-end">{{ item.amount | currency:'PLN':'symbol':'1.2-2' }}</td></tr>
                 } @empty {
                   <tr><td colspan="3" class="text-secondary">{{ ui.t('common.noData') }}</td></tr>
                 }
@@ -133,51 +128,19 @@ const getMonthRange = () => {
           </div>
         </div>
       </div>
-
-      <div class="col-12">
-        <div class="card pv-card overflow-hidden">
-          <div class="card-header">
-            <div>
-              <h3 class="card-title">{{ ui.t('dashboard.recent') }}</h3>
-              <div class="ec-card-header-muted">{{ ui.t('dashboard.recentHint') }}</div>
-            </div>
-          </div>
-          @if (recentExpenses.length) {
-            <div class="table-responsive">
-              <table class="table table-vcenter card-table table-striped mb-0">
-                <thead>
-                  <tr><th>{{ ui.t('table.title') }}</th><th>{{ ui.t('table.merchant') }}</th><th>{{ ui.t('table.date') }}</th><th class="text-end">{{ ui.t('table.amount') }}</th></tr>
-                </thead>
-                <tbody>
-                  @for (item of recentExpenses; track item.id) {
-                    <tr>
-                      <td>{{ item.title }}</td>
-                      <td>{{ item.merchant || ui.t('common.none') }}</td>
-                      <td>{{ item.expenseDate | date:'shortDate' }}</td>
-                      <td class="text-end">{{ item.amount | currency:item.currency:'symbol':'1.2-2' }}</td>
-                    </tr>
-                  }
-                </tbody>
-              </table>
-            </div>
-          } @else {
-            <div class="card-body">
-              <div class="alert alert-warning mb-0">{{ ui.t('common.noExpenses') }}</div>
-            </div>
-          }
-        </div>
-      </div>
     </div>
   `
 })
 export class DashboardComponent implements OnInit, AfterViewChecked, OnDestroy {
-  readonly auth = inject(AuthService);
   readonly ui = inject(UiService);
   private readonly expensesService = inject(ExpensesService);
   private readonly statsService = inject(StatsService);
+  private readonly shoppingIntegration = inject(ShoppingListIntegrationService);
 
   recentExpenses: Expense[] = [];
   stats: StatsResponse | null = null;
+  cashflow: CashflowResponse | null = null;
+  externalSummary: ShoppingListSummary | null = null;
   private categoryChart?: Chart;
   private chartPending = false;
 
@@ -197,27 +160,24 @@ export class DashboardComponent implements OnInit, AfterViewChecked, OnDestroy {
     this.categoryChart?.destroy();
   }
 
-  hasCategoryData() {
-    return Boolean(this.stats?.byCategory?.length);
+  loadDashboard() {
+    const range = getMonthRange();
+    this.expensesService.list().subscribe({ next: (response) => { this.recentExpenses = response.items.slice(0, 8); this.persistCache(); } });
+    this.statsService.overview({ startDate: range.start, endDate: range.end, bucket: 'month' }).subscribe({ next: (response) => { this.stats = response; this.chartPending = true; this.persistCache(); } });
+    this.statsService.cashflow().subscribe({ next: (response) => { this.cashflow = response; this.persistCache(); } });
+    this.shoppingIntegration.summary({ start_date: range.start, end_date: range.end }).subscribe({ next: (response) => { this.externalSummary = response; this.persistCache(); }, error: () => { this.externalSummary = this.externalSummary ?? null; } });
   }
 
-  private loadDashboard() {
-    const range = getMonthRange();
+  externalAmount() { return Number(this.externalSummary?.total ?? this.externalSummary?.amount ?? this.externalSummary?.meta?.total_amount ?? 0); }
+  externalCount() { return Number(this.externalSummary?.count ?? this.externalSummary?.records ?? this.externalSummary?.meta?.total_count ?? 0); }
 
-    this.expensesService.list().subscribe({
-      next: (response) => {
-        this.recentExpenses = response.items.slice(0, 8);
-        this.persistCache();
-      }
-    });
-
-    this.statsService.overview({ startDate: range.start, endDate: range.end, bucket: 'month' }).subscribe({
-      next: (response) => {
-        this.stats = response;
-        this.chartPending = true;
-        this.persistCache();
-      }
-    });
+  statusBadgeClass(status: string) {
+    return {
+      DRAFT: 'text-bg-secondary',
+      PENDING: 'text-bg-warning',
+      APPROVED: 'text-bg-success',
+      REJECTED: 'text-bg-danger'
+    }[status] || 'text-bg-secondary';
   }
 
   private renderChart() {
@@ -228,35 +188,18 @@ export class DashboardComponent implements OnInit, AfterViewChecked, OnDestroy {
     }
 
     const colors = this.stats.byCategory.map((_, index) => chartPalette[index % chartPalette.length]);
-
     this.categoryChart?.destroy();
     this.categoryChart = new Chart(canvas, {
       type: 'doughnut',
       data: {
         labels: this.stats.byCategory.map((item) => item.categoryName),
-        datasets: [
-          {
-            data: this.stats.byCategory.map((item) => item.total),
-            backgroundColor: colors,
-            borderColor: '#ffffff',
-            hoverOffset: 10
-          }
-        ]
+        datasets: [{ data: this.stats.byCategory.map((item) => item.total), backgroundColor: colors, borderColor: '#ffffff', hoverOffset: 10 }]
       },
       options: {
         responsive: true,
         maintainAspectRatio: false,
         cutout: '66%',
-        plugins: {
-          legend: {
-            position: 'bottom',
-            labels: {
-              usePointStyle: true,
-              boxWidth: 10,
-              color: '#9ca3af'
-            }
-          }
-        }
+        plugins: { legend: { position: 'bottom', labels: { usePointStyle: true, boxWidth: 10, color: '#9ca3af' } } }
       }
     });
   }
@@ -265,16 +208,18 @@ export class DashboardComponent implements OnInit, AfterViewChecked, OnDestroy {
     try {
       const raw = localStorage.getItem(DASHBOARD_CACHE_KEY);
       if (!raw) return;
-      const parsed = JSON.parse(raw) as { recentExpenses?: Expense[]; stats?: StatsResponse | null };
+      const parsed = JSON.parse(raw) as { recentExpenses?: Expense[]; stats?: StatsResponse | null; cashflow?: CashflowResponse | null; externalSummary?: ShoppingListSummary | null };
       this.recentExpenses = parsed.recentExpenses ?? [];
       this.stats = parsed.stats ?? null;
+      this.cashflow = parsed.cashflow ?? null;
+      this.externalSummary = parsed.externalSummary ?? null;
       this.chartPending = Boolean(this.stats?.byCategory?.length);
     } catch {}
   }
 
   private persistCache() {
     try {
-      localStorage.setItem(DASHBOARD_CACHE_KEY, JSON.stringify({ recentExpenses: this.recentExpenses, stats: this.stats }));
+      localStorage.setItem(DASHBOARD_CACHE_KEY, JSON.stringify({ recentExpenses: this.recentExpenses, stats: this.stats, cashflow: this.cashflow, externalSummary: this.externalSummary }));
     } catch {}
   }
 }

web/src/app/features/expenses/expenses.component.ts

@@ -1,13 +1,13 @@
 import { CommonModule, CurrencyPipe, DatePipe } from '@angular/common';
-import { Component, OnInit, inject, signal } from '@angular/core';
-import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Component, OnInit, computed, inject, signal } from '@angular/core';
+import { FormArray, FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { ImageCroppedEvent, ImageCropperComponent } from 'ngx-image-cropper';
 import { CategoriesService } from '../../core/services/categories.service';
 import { ExpensesService } from '../../core/services/expenses.service';
 import { MerchantsService } from '../../core/services/merchants.service';
 import { ToastService } from '../../core/services/toast.service';
 import { UiService } from '../../core/services/ui.service';
-import type { Expense, Merchant, Proof } from '../../shared/models';
+import type { DuplicateGroup, Expense, Merchant, Proof } from '../../shared/models';
 
 const formatLocalDate = (date: Date) => {
   const year = date.getFullYear();
@@ -24,269 +24,150 @@ const today = formatLocalDate(new Date());
   imports: [CommonModule, ReactiveFormsModule, CurrencyPipe, DatePipe, ImageCropperComponent],
   template: `
     <div class="page-header d-print-none mb-3 ec-page-header">
-      <div class="row align-items-center g-3">
-        <div class="col">
-          <h2 class="page-title mb-1">{{ ui.t('expenses.title') }}</h2>
-          <div class="text-secondary">{{ ui.t('expenses.subtitle') }}</div>
-        </div>
-      </div>
+      <div class="row align-items-center g-3"><div class="col"><h2 class="page-title mb-1">{{ ui.t('expenses.title') }}</h2><div class="text-secondary">{{ ui.t('expenses.subtitle') }}</div></div></div>
     </div>
 
+    @if (duplicateGroups().length) {
+      <div class="alert alert-warning">
+        <div class="fw-semibold mb-2">{{ ui.t('expenses.duplicatesTitle') }}</div>
+        <div class="d-grid gap-1">@for (group of duplicateGroups().slice(0, 3); track group.source.id) { <div>{{ group.source.title }} · {{ group.matches.length }} {{ ui.t('expenses.potentialMatches') }}</div> }</div>
+      </div>
+    }
+
     <div class="row row-cards align-items-start">
       <div class="col-xl-7">
         <div class="card overflow-hidden">
-          <div class="card-header d-flex justify-content-between align-items-center">
-            <h3 class="card-title">{{ editingExpenseId() ? ui.t('expenses.edit') : ui.t('expenses.new') }}</h3>
-            @if (editingExpenseId()) {
-              <button class="btn btn-outline-secondary btn-sm" type="button" (click)="cancelEdit()">{{ ui.t('action.cancelEdit') }}</button>
-            }
-          </div>
+          <div class="card-header d-flex justify-content-between align-items-center"><h3 class="card-title">{{ editingExpenseId() ? ui.t('expenses.edit') : ui.t('expenses.new') }}</h3>@if (editingExpenseId()) { <button class="btn btn-outline-secondary btn-sm" type="button" (click)="cancelEdit()">{{ ui.t('action.cancelEdit') }}</button> }</div>
           <div class="card-body">
             <form [formGroup]="expenseForm" (ngSubmit)="submitExpense()" class="d-grid gap-3" novalidate>
-              @if (submitted() && expenseForm.invalid) {
-                <div class="alert alert-danger mb-0">{{ ui.t('expenses.requiredHint') }}</div>
-              }
+              @if (submitted() && expenseForm.invalid) { <div class="alert alert-danger mb-0">{{ ui.t('expenses.requiredHint') }}</div> }
 
               <div class="row g-3">
-                <div class="col-md-7">
-                  <label class="form-label">{{ ui.t('expenses.field.title') }} <span class="text-danger">*</span></label>
-                  <input class="form-control" formControlName="title" [class.is-invalid]="expenseForm.controls.title.invalid && (expenseForm.controls.title.touched || submitted())" />
-                  @if (expenseForm.controls.title.invalid && (expenseForm.controls.title.touched || submitted())) {
-                    <div class="invalid-feedback d-block">{{ ui.t('expenses.validation.title') }}</div>
-                  }
-                </div>
-                <div class="col-md-5">
-                  <label class="form-label">{{ ui.t('expenses.field.amount') }} <span class="text-danger">*</span></label>
-                  <input class="form-control" type="number" step="0.01" formControlName="amount" [class.is-invalid]="expenseForm.controls.amount.invalid && (expenseForm.controls.amount.touched || submitted())" />
-                  @if (expenseForm.controls.amount.invalid && (expenseForm.controls.amount.touched || submitted())) {
-                    <div class="invalid-feedback d-block">{{ ui.t('expenses.validation.amount') }}</div>
-                  }
-                </div>
-                <div class="col-md-4">
-                  <label class="form-label">{{ ui.t('expenses.field.date') }} <span class="text-danger">*</span></label>
-                  <input class="form-control" type="date" formControlName="expenseDate" [class.is-invalid]="expenseForm.controls.expenseDate.invalid && (expenseForm.controls.expenseDate.touched || submitted())" />
-                  @if (expenseForm.controls.expenseDate.invalid && (expenseForm.controls.expenseDate.touched || submitted())) {
-                    <div class="invalid-feedback d-block">{{ ui.t('expenses.validation.date') }}</div>
-                  }
-                </div>
-                <div class="col-md-4">
-                  <label class="form-label">{{ ui.t('expenses.field.category') }} <span class="text-danger">*</span></label>
-                  <select class="form-select" formControlName="categoryId" [class.is-invalid]="expenseForm.controls.categoryId.invalid && (expenseForm.controls.categoryId.touched || submitted())">
-                    <option value="">{{ ui.t('common.select') }}</option>
-                    @for (category of categories(); track category.id) {
-                      <option [value]="category.id">{{ category.name }}</option>
-                    }
-                  </select>
-                  @if (expenseForm.controls.categoryId.invalid && (expenseForm.controls.categoryId.touched || submitted())) {
-                    <div class="invalid-feedback d-block">{{ ui.t('expenses.validation.category') }}</div>
-                  }
-                </div>
-                <div class="col-md-4">
-                  <label class="form-label">{{ ui.t('expenses.field.payment') }}</label>
-                  <select class="form-select" formControlName="paymentMethod">
-                    <option value="">{{ ui.t('expenses.payment.none') }}</option>
-                    <option value="CARD">{{ ui.t('expenses.payment.card') }}</option>
-                    <option value="CASH">{{ ui.t('expenses.payment.cash') }}</option>
-                    <option value="TRANSFER">{{ ui.t('expenses.payment.transfer') }}</option>
-                    <option value="BLIK">BLIK</option>
-                    <option value="OTHER">{{ ui.t('expenses.payment.other') }}</option>
-                  </select>
-                </div>
-                <div class="col-md-9">
-                  <label class="form-label">{{ ui.t('expenses.field.merchantPicker') }}</label>
-                  <div class="input-group">
-                    <select class="form-select" [value]="selectedMerchantId()" (change)="selectMerchant($any($event.target).value)">
-                      <option value="">{{ ui.t('expenses.customEntry') }}</option>
-                      @for (item of activeMerchants(); track item.id) {
-                        <option [value]="item.id">{{ item.name }}</option>
-                      }
-                    </select>
-                    <button class="btn btn-outline-primary" type="button" (click)="openMerchantModal()">{{ ui.t('action.add') }}</button>
-                  </div>
-                </div>
-                <div class="col-md-3">
-                  <label class="form-label">{{ ui.t('expenses.field.merchantName') }}</label>
-                  <input class="form-control" formControlName="merchant" />
-                </div>
-                <div class="col-12">
-                  <label class="form-label">{{ ui.t('expenses.field.description') }}</label>
-                  <textarea class="form-control" rows="3" formControlName="description"></textarea>
-                </div>
+                <div class="col-md-7"><label class="form-label">{{ ui.t('expenses.field.title') }} <span class="text-danger">*</span></label><input class="form-control" formControlName="title" [class.is-invalid]="expenseForm.controls.title.invalid && (expenseForm.controls.title.touched || submitted())" /></div>
+                <div class="col-md-5"><label class="form-label">{{ ui.t('expenses.field.amount') }} <span class="text-danger">*</span></label><input class="form-control" type="number" step="0.01" formControlName="amount" [class.is-invalid]="expenseForm.controls.amount.invalid && (expenseForm.controls.amount.touched || submitted())" /></div>
+                <div class="col-md-4"><label class="form-label">{{ ui.t('expenses.field.date') }} <span class="text-danger">*</span></label><input class="form-control" type="date" formControlName="expenseDate" /></div>
+                <div class="col-md-4"><label class="form-label">{{ ui.t('expenses.field.category') }} <span class="text-danger">*</span></label><select class="form-select" formControlName="categoryId"><option value="">{{ ui.t('common.select') }}</option>@for (category of categories(); track category.id) { <option [value]="category.id">{{ category.name }}</option> }</select></div>
+                <div class="col-md-4"><label class="form-label">{{ ui.t('expenses.field.status') }}</label><select class="form-select" formControlName="status"><option value="DRAFT">{{ ui.t('status.draft') }}</option><option value="PENDING">{{ ui.t('status.pending') }}</option><option value="APPROVED">{{ ui.t('status.approved') }}</option><option value="REJECTED">{{ ui.t('status.rejected') }}</option></select></div>
+                <div class="col-md-5"><label class="form-label">{{ ui.t('expenses.field.payment') }}</label><select class="form-select" formControlName="paymentMethod"><option value="">{{ ui.t('expenses.payment.none') }}</option><option value="CARD">{{ ui.t('expenses.payment.card') }}</option><option value="CASH">{{ ui.t('expenses.payment.cash') }}</option><option value="TRANSFER">{{ ui.t('expenses.payment.transfer') }}</option><option value="BLIK">BLIK</option><option value="OTHER">{{ ui.t('expenses.payment.other') }}</option></select></div>
+                <div class="col-md-7"><label class="form-label">{{ ui.t('expenses.field.merchantPicker') }}</label><div class="input-group"><select class="form-select" [value]="selectedMerchantId()" (change)="selectMerchant($any($event.target).value)"><option value="">{{ ui.t('expenses.customEntry') }}</option>@for (item of activeMerchants(); track item.id) { <option [value]="item.id">{{ item.name }}</option> }</select><button class="btn btn-outline-primary" type="button" (click)="openMerchantModal()">{{ ui.t('action.add') }}</button></div></div>
+                <div class="col-md-6"><label class="form-label">{{ ui.t('expenses.field.merchantName') }}</label><input class="form-control" formControlName="merchant" /></div>
+                <div class="col-md-6"><label class="form-label">{{ ui.t('expenses.field.tags') }}</label><input class="form-control" formControlName="tagsText" [placeholder]="ui.t('expenses.tagPlaceholder')" /></div>
+                <div class="col-12"><label class="form-label">{{ ui.t('expenses.field.description') }}</label><textarea class="form-control" rows="3" formControlName="description"></textarea></div>
               </div>
 
-              @if (!editingExpenseId()) {
-                <div class="card bg-body-tertiary overflow-hidden">
-                  <div class="card-body d-grid gap-3">
-                    <div class="row g-3">
-                      <div class="col-md-4">
-                        <label class="form-label">{{ ui.t('expenses.field.proofType') }}</label>
-                        <select class="form-select" formControlName="proofType">
-                          <option value="RECEIPT">{{ ui.t('proof.receipt') }}</option>
-                          <option value="INVOICE">{{ ui.t('proof.invoice') }}</option>
-                          <option value="NOTE">{{ ui.t('proof.note') }}</option>
-                          <option value="BANK_STATEMENT">{{ ui.t('proof.statement') }}</option>
-                          <option value="OTHER">{{ ui.t('proof.other') }}</option>
-                        </select>
-                      </div>
-                      <div class="col-md-4">
-                        <label class="form-label">{{ ui.t('expenses.field.proofLabel') }}</label>
-                        <input class="form-control" formControlName="proofLabel" />
-                      </div>
-                      <div class="col-md-4">
-                        <label class="form-label">{{ ui.t('expenses.field.file') }}</label>
-                        <input class="form-control" type="file" accept="image/*,.pdf" (change)="onProofSelected($event)" />
-                      </div>
-                      <div class="col-12">
-                        <label class="form-label">{{ ui.t('expenses.field.proofNote') }}</label>
-                        <textarea class="form-control" rows="2" formControlName="proofNote"></textarea>
-                      </div>
+              <div class="card bg-body-tertiary overflow-hidden"><div class="card-body d-grid gap-3">
+                <div class="d-flex justify-content-between align-items-center"><div class="form-label mb-0">{{ ui.t('expenses.field.customFields') }}</div><button class="btn btn-outline-secondary btn-sm" type="button" (click)="addCustomField()">{{ ui.t('action.add') }}</button></div>
+                <div formArrayName="customFields" class="d-grid gap-2">
+                  @for (group of customFields.controls; track $index) {
+                    <div [formGroupName]="$index" class="row g-2">
+                      <div class="col-sm-5"><input class="form-control" formControlName="key" [placeholder]="ui.t('expenses.field.customKey')" /></div>
+                      <div class="col-sm-5"><input class="form-control" formControlName="value" [placeholder]="ui.t('expenses.field.customValue')" /></div>
+                      <div class="col-sm-2"><button class="btn btn-outline-danger w-100" type="button" (click)="removeCustomField($index)">{{ ui.t('action.delete') }}</button></div>
                     </div>
-
-                    @if (showCropper()) {
-                      <div>
-                        <div class="form-label">{{ ui.t('expenses.field.crop') }}</div>
-                        <image-cropper [imageChangedEvent]="imageChangedEvent()" [maintainAspectRatio]="false" format="png" (imageCropped)="onImageCropped($event)"></image-cropper>
-                      </div>
-                    }
-
-                    @if (croppedPreview()) {
-                      <div>
-                        <div class="form-label">{{ ui.t('expenses.field.cropPreview') }}</div>
-                        <img class="img-fluid rounded" [src]="croppedPreview()" [alt]="ui.t('expenses.field.cropPreview')" />
-                      </div>
-                    }
-                  </div>
+                  } @empty {
+                    <div class="text-secondary small">{{ ui.t('expenses.noCustomFields') }}</div>
+                  }
                 </div>
+              </div></div>
+
+              @if (!editingExpenseId()) {
+                <div class="card bg-body-tertiary overflow-hidden"><div class="card-body d-grid gap-3">
+                  <div class="row g-3">
+                    <div class="col-md-4"><label class="form-label">{{ ui.t('expenses.field.proofType') }}</label><select class="form-select" formControlName="proofType"><option value="RECEIPT">{{ ui.t('proof.receipt') }}</option><option value="INVOICE">{{ ui.t('proof.invoice') }}</option><option value="NOTE">{{ ui.t('proof.note') }}</option><option value="BANK_STATEMENT">{{ ui.t('proof.statement') }}</option><option value="OTHER">{{ ui.t('proof.other') }}</option></select></div>
+                    <div class="col-md-4"><label class="form-label">{{ ui.t('expenses.field.proofLabel') }}</label><input class="form-control" formControlName="proofLabel" /></div>
+                    <div class="col-md-4"><label class="form-label">{{ ui.t('expenses.field.file') }}</label><input class="form-control" type="file" accept="image/*,.pdf" multiple (change)="onProofSelected($event)" /></div>
+                    <div class="col-12"><label class="form-label">{{ ui.t('expenses.field.proofNote') }}</label><textarea class="form-control" rows="2" formControlName="proofNote"></textarea></div>
+                  </div>
+                  @if (showCropper()) {
+                    <div><div class="form-label">{{ ui.t('expenses.field.crop') }}</div><image-cropper [imageChangedEvent]="imageChangedEvent()" [maintainAspectRatio]="false" format="png" (imageCropped)="onImageCropped($event)"></image-cropper></div>
+                  }
+                  @if (croppedPreview()) {
+                    <div><div class="form-label">{{ ui.t('expenses.field.cropPreview') }}</div><img class="img-fluid rounded" [src]="croppedPreview()" [alt]="ui.t('expenses.field.cropPreview')" /></div>
+                  }
+                  @if (selectedFiles().length) {
+                    <div><div class="form-label">{{ ui.t('expenses.attachmentsSelected') }}</div><div class="d-flex flex-wrap gap-2">@for (file of selectedFiles(); track file.name + $index) { <span class="badge text-bg-secondary">{{ file.name }}</span> }</div></div>
+                  }
+                </div></div>
               }
 
-              <button class="btn btn-success d-inline-flex align-items-center justify-content-center gap-2" [disabled]="saving()">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10"/></svg>
-                <span>{{ saving() ? ui.t('expenses.saving') : (editingExpenseId() ? ui.t('action.saveChanges') : ui.t('action.addExpense')) }}</span>
-              </button>
+              <div class="btn-list flex-wrap">
+                <button class="btn btn-outline-secondary" type="button" (click)="submitExpense('DRAFT')" [disabled]="saving()">{{ ui.t('action.saveDraft') }}</button>
+                <button class="btn btn-success" [disabled]="saving()">{{ saving() ? ui.t('expenses.saving') : ui.t('action.save') }}</button>
+              </div>
             </form>
           </div>
         </div>
       </div>
 
       <div class="col-xl-5">
-        <div class="card sticky-top overflow-hidden" style="top: 1rem;">
+        <div class="card overflow-hidden mb-3">
           <div class="card-header"><h3 class="card-title">{{ ui.t('expenses.filters') }}</h3></div>
-          <div class="card-body">
-            <form [formGroup]="filterForm" (ngSubmit)="loadExpenses()" class="row g-2 mb-4">
-              <div class="col-6"><input class="form-control" type="date" formControlName="startDate" /></div>
-              <div class="col-6"><input class="form-control" type="date" formControlName="endDate" /></div>
-              <div class="col-12">
-                <select class="form-select" formControlName="categoryId">
-                  <option value="">{{ ui.t('expenses.allCategories') }}</option>
-                  @for (category of categories(); track category.id) {
-                    <option [value]="category.id">{{ category.name }}</option>
-                  }
-                </select>
-              </div>
-              <div class="col-12"><input class="form-control" formControlName="search" [placeholder]="ui.t('expenses.search')" /></div>
-              <div class="col-12 d-flex gap-2">
-                <button class="btn btn-primary flex-fill">{{ ui.t('action.filter') }}</button>
-                <button class="btn btn-outline-secondary" type="button" (click)="resetFilters()">{{ ui.t('action.reset') }}</button>
-              </div>
-            </form>
+          <div class="card-body"><form [formGroup]="filterForm" (ngSubmit)="loadExpenses()" class="row g-3 align-items-end">
+            <div class="col-sm-6"><label class="form-label">{{ ui.t('stats.from') }}</label><input class="form-control" type="date" formControlName="startDate" /></div>
+            <div class="col-sm-6"><label class="form-label">{{ ui.t('stats.to') }}</label><input class="form-control" type="date" formControlName="endDate" /></div>
+            <div class="col-sm-6"><label class="form-label">{{ ui.t('expenses.field.category') }}</label><select class="form-select" formControlName="categoryId"><option value="">{{ ui.t('expenses.allCategories') }}</option>@for (category of categories(); track category.id) { <option [value]="category.id">{{ category.name }}</option> }</select></div>
+            <div class="col-sm-6"><label class="form-label">{{ ui.t('expenses.field.status') }}</label><select class="form-select" formControlName="status"><option value="">{{ ui.t('common.none') }}</option><option value="DRAFT">{{ ui.t('status.draft') }}</option><option value="PENDING">{{ ui.t('status.pending') }}</option><option value="APPROVED">{{ ui.t('status.approved') }}</option><option value="REJECTED">{{ ui.t('status.rejected') }}</option></select></div>
+            <div class="col-sm-6"><label class="form-label">{{ ui.t('expenses.field.tags') }}</label><input class="form-control" formControlName="tags" /></div>
+            <div class="col-sm-6"><label class="form-label">{{ ui.t('expenses.search') }}</label><input class="form-control" formControlName="search" /></div>
+            <div class="col-12"><label class="form-check"><input class="form-check-input" type="checkbox" formControlName="duplicatesOnly" /><span class="form-check-label">{{ ui.t('expenses.duplicatesOnly') }}</span></label></div>
+            <div class="col-12 d-flex gap-2 flex-wrap"><button class="btn btn-primary" type="submit">{{ ui.t('action.filter') }}</button><button class="btn btn-outline-secondary" type="button" (click)="resetFilters()">{{ ui.t('action.reset') }}</button></div>
+          </form></div>
+        </div>
 
-            @if (expenses().length) {
-              <div class="list-group list-group-flush">
-                @for (expense of expenses(); track expense.id) {
-                  <div class="list-group-item px-0">
-                    <div class="d-flex justify-content-between gap-3">
-                      <div>
-                        <div class="fw-semibold">{{ expense.title }}</div>
-                        <div class="small text-secondary">{{ expense.merchant || ui.t('expenses.noMerchant') }} • {{ expense.expenseDate | date:'shortDate' }}</div>
-                        <div class="small text-secondary">{{ expense.category.name }}</div>
-                      </div>
-                      <div class="text-end">
-                        <div class="fw-bold">{{ expense.amount | currency:expense.currency:'symbol':'1.2-2' }}</div>
-                        <div class="btn-list justify-content-end mt-2">
-                          <button class="btn btn-outline-primary btn-sm" type="button" (click)="startEdit(expense)">{{ ui.t('action.edit') }}</button>
-                          <button class="btn btn-outline-danger btn-sm" type="button" (click)="removeExpense(expense)">{{ ui.t('action.delete') }}</button>
-                        </div>
-                      </div>
-                    </div>
-                    @if (expense.proofs.length) {
-                      <div class="btn-list mt-3">
-                        @for (proof of expense.proofs; track proof.id) {
-                          <button class="btn btn-outline-info btn-sm" type="button" (click)="openProof(proof)">
-                            {{ proof.label || proof.originalName || ui.t('expenses.proof') }}
-                          </button>
+        <div class="card overflow-hidden">
+          <div class="table-responsive">
+            <table class="table table-vcenter card-table mb-0">
+              <thead><tr><th>{{ ui.t('table.title') }}</th><th>{{ ui.t('expenses.field.status') }}</th><th class="text-end">{{ ui.t('table.amount') }}</th><th></th></tr></thead>
+              <tbody>
+                @for (item of expenses(); track item.id) {
+                  <tr>
+                    <td>
+                      <div class="fw-semibold d-flex align-items-center gap-2 flex-wrap">
+                        {{ item.title }}
+                        @if (item.possibleDuplicate || item.duplicateStatus) {
+                          <span class="badge" [ngClass]="duplicateBadgeClass(item)">{{ duplicateLabel(item) }}</span>
+                        }
+                        @if (item.recurringSourceId) {
+                          <span class="badge text-bg-info">{{ ui.t('recurring.badge') }}</span>
                         }
                       </div>
-                    }
-                  </div>
-                }
-              </div>
-            } @else {
-              <div class="alert alert-warning mb-0">{{ ui.t('expenses.noItems') }}</div>
-            }
+                      <div class="text-secondary small">{{ item.expenseDate | date:'yyyy-MM-dd' }} · {{ item.category.name }} · {{ item.merchant || ui.t('expenses.noMerchant') }}</div>
+                      @if (item.tags.length) { <div class="mt-1 d-flex flex-wrap gap-1">@for (tag of item.tags; track tag) { <span class="badge text-bg-secondary">#{{ tag }}</span> }</div> }
+                      @if (customFieldEntries(item).length) { <div class="small text-secondary mt-1">@for (field of customFieldEntries(item); track field[0]) { <span class="me-2">{{ field[0] }}: {{ field[1] }}</span> }</div> }
+                      @if (item.proofs.length) { <div class="mt-2 d-flex flex-wrap gap-2">@for (proof of item.proofs; track proof.id) { <button class="btn btn-sm btn-outline-secondary" type="button" (click)="openProof(proof)">{{ proof.label || proof.originalName || ui.t('expenses.proof') }}</button> }</div> }
+                    </td>
+                    <td><span class="badge" [ngClass]="statusBadgeClass(item.status)">{{ ui.t('status.' + item.status.toLowerCase()) }}</span></td>
+                    <td class="text-end">{{ item.amount | currency:'PLN':'symbol':'1.2-2' }}</td>
+                    <td class="text-end">
+                      <div class="btn-list justify-content-end flex-wrap">
+                        @if (item.possibleDuplicate && item.duplicateStatus !== 'CONFIRMED') {
+                          <button class="btn btn-sm btn-outline-success" type="button" (click)="reviewDuplicate(item, 'CONFIRM')">OK</button>
+                        }
+                        @if (item.possibleDuplicate && item.duplicateStatus !== 'DISMISSED') {
+                          <button class="btn btn-sm btn-outline-warning" type="button" (click)="reviewDuplicate(item, 'DISMISS')">X</button>
+                        }
+                        @if (item.duplicateStatus === 'DISMISSED' || item.duplicateStatus === 'CONFIRMED') {
+                          <button class="btn btn-sm btn-outline-secondary" type="button" (click)="reviewDuplicate(item, 'REOPEN')">↺</button>
+                        }
+                        <button class="btn btn-sm btn-outline-primary" type="button" (click)="startEdit(item)">{{ ui.t('action.edit') }}</button>
+                        <button class="btn btn-sm btn-outline-danger" type="button" (click)="removeExpense(item)">{{ ui.t('action.delete') }}</button>
+                      </div>
+                    </td>
+                  </tr>
+                } @empty { <tr><td colspan="4" class="text-secondary">{{ ui.t('expenses.noItems') }}</td></tr> }
+              </tbody>
+            </table>
           </div>
         </div>
       </div>
     </div>
 
     @if (merchantModalOpen()) {
-      <div class="modal modal-blur fade show d-block" tabindex="-1">
-        <div class="modal-dialog modal-dialog-centered">
-          <div class="modal-content">
-            <div class="modal-header">
-              <h5 class="modal-title">{{ ui.t('merchant.new') }}</h5>
-              <button class="btn-close" type="button" (click)="closeMerchantModal()"></button>
-            </div>
-            <form [formGroup]="merchantForm" (ngSubmit)="saveMerchant()">
-              <div class="modal-body">
-                <div class="d-grid gap-3">
-                  <div>
-                    <label class="form-label">{{ ui.t('merchant.name') }}</label>
-                    <input class="form-control" formControlName="name" />
-                  </div>
-                  <div>
-                    <label class="form-label">{{ ui.t('merchant.type') }}</label>
-                    <select class="form-select" formControlName="kind">
-                      <option value="MERCHANT">{{ ui.t('merchant.kind.merchant') }}</option>
-                      <option value="SERVICE_PROVIDER">{{ ui.t('merchant.kind.service') }}</option>
-                      <option value="OTHER">{{ ui.t('merchant.kind.other') }}</option>
-                    </select>
-                  </div>
-                  <div>
-                    <label class="form-label">{{ ui.t('merchant.notes') }}</label>
-                    <textarea class="form-control" rows="3" formControlName="notes"></textarea>
-                  </div>
-                </div>
-              </div>
-              <div class="modal-footer">
-                <button class="btn btn-ghost-secondary" type="button" (click)="closeMerchantModal()">{{ ui.t('action.cancel') }}</button>
-                <button class="btn btn-success" [disabled]="merchantForm.invalid">{{ ui.t('action.saveMerchant') }}</button>
-              </div>
-            </form>
-          </div>
-        </div>
-      </div>
-      <div class="modal-backdrop fade show"></div>
+      <div class="modal modal-blur fade show d-block" tabindex="-1"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header"><h5 class="modal-title">{{ ui.t('merchant.new') }}</h5><button class="btn-close" type="button" (click)="closeMerchantModal()"></button></div><form [formGroup]="merchantForm" (ngSubmit)="saveMerchant()"><div class="modal-body"><div class="d-grid gap-3"><div><label class="form-label">{{ ui.t('merchant.name') }}</label><input class="form-control" formControlName="name" /></div><div><label class="form-label">{{ ui.t('merchant.type') }}</label><select class="form-select" formControlName="kind"><option value="MERCHANT">{{ ui.t('merchant.kind.merchant') }}</option><option value="SERVICE_PROVIDER">{{ ui.t('merchant.kind.service') }}</option><option value="OTHER">{{ ui.t('merchant.kind.other') }}</option></select></div><div><label class="form-label">{{ ui.t('merchant.notes') }}</label><textarea class="form-control" rows="3" formControlName="notes"></textarea></div></div></div><div class="modal-footer"><button class="btn btn-ghost-secondary" type="button" (click)="closeMerchantModal()">{{ ui.t('action.cancel') }}</button><button class="btn btn-success" [disabled]="merchantForm.invalid">{{ ui.t('action.saveMerchant') }}</button></div></form></div></div></div><div class="modal-backdrop fade show"></div>
     }
 
     @if (proofPreview()) {
-      <div class="modal modal-blur fade show d-block" tabindex="-1">
-        <div class="modal-dialog modal-xl modal-dialog-centered">
-          <div class="modal-content">
-            <div class="modal-header">
-              <h5 class="modal-title">{{ proofPreview()?.label || proofPreview()?.originalName || ui.t('expenses.proof') }}</h5>
-              <button class="btn-close" type="button" (click)="closeProofPreview()"></button>
-            </div>
-            <div class="modal-body">
-              @if ((proofPreview()?.mimeType || '').includes('pdf')) {
-                <embed [attr.src]="proofPreview()?.fileUrl" type="application/pdf" style="width:100%;height:75vh;" />
-              } @else {
-                <img class="img-fluid" [src]="proofPreview()?.fileUrl" [alt]="ui.t('expenses.proof')" />
-              }
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="modal-backdrop fade show"></div>
+      <div class="modal modal-blur fade show d-block" tabindex="-1"><div class="modal-dialog modal-xl modal-dialog-centered"><div class="modal-content"><div class="modal-header"><h5 class="modal-title">{{ proofPreview()?.label || proofPreview()?.originalName || ui.t('expenses.proof') }}</h5><button class="btn-close" type="button" (click)="closeProofPreview()"></button></div><div class="modal-body">@if (isPdf(proofPreview()!)) { <embed [attr.src]="proofPreview()?.fileUrl" type="application/pdf" style="width:100%;height:75vh;" /> } @else { <img class="img-fluid" [src]="proofPreview()?.fileUrl" [alt]="ui.t('expenses.proof')" /> }</div></div></div></div><div class="modal-backdrop fade show"></div>
     }
   `
 })
@@ -301,13 +182,14 @@ export class ExpensesComponent implements OnInit {
   readonly categories = this.categoriesService.items;
   readonly merchants = this.merchantsService.items;
   readonly expenses = signal<Expense[]>([]);
+  readonly duplicateGroups = signal<DuplicateGroup[]>([]);
   readonly selectedMerchantId = signal('');
   readonly editingExpenseId = signal<string | null>(null);
   readonly saving = signal(false);
   readonly submitted = signal(false);
   readonly merchantModalOpen = signal(false);
   readonly proofPreview = signal<Proof | null>(null);
-
+  readonly selectedFiles = signal<File[]>([]);
   readonly imageChangedEvent = signal<Event | null>(null);
   readonly croppedFile = signal<File | null>(null);
   readonly croppedPreview = signal<string | null>(null);
@@ -321,42 +203,42 @@ export class ExpensesComponent implements OnInit {
     merchant: [''],
     paymentMethod: [''],
     description: [''],
+    status: ['PENDING'],
+    tagsText: [''],
     proofType: ['RECEIPT'],
     proofLabel: [''],
-    proofNote: ['']
+    proofNote: [''],
+    customFields: this.fb.array([])
   });
 
-  readonly filterForm = this.fb.nonNullable.group({
-    startDate: [''],
-    endDate: [''],
-    categoryId: [''],
-    search: ['']
-  });
+  readonly filterForm = this.fb.nonNullable.group({ startDate: [''], endDate: [''], categoryId: [''], search: [''], status: [''], tags: [''], duplicatesOnly: [false] });
+  readonly merchantForm = this.fb.nonNullable.group({ name: ['', [Validators.required, Validators.minLength(2)]], kind: ['MERCHANT' as Merchant['kind'], Validators.required], notes: [''] });
 
-  readonly merchantForm = this.fb.nonNullable.group({
-    name: ['', [Validators.required, Validators.minLength(2)]],
-    kind: ['MERCHANT' as Merchant['kind'], Validators.required],
-    notes: ['']
-  });
+  get customFields() { return this.expenseForm.controls.customFields as FormArray; }
+  readonly activeMerchants = computed(() => this.merchants().filter((item) => item.isActive));
 
   ngOnInit() {
     this.categoriesService.ensureLoaded(true);
     this.merchantsService.ensureLoaded(true);
     this.loadExpenses();
+    this.loadDuplicates();
   }
 
-  activeMerchants() {
-    return this.merchants().filter((item) => item.isActive);
-  }
+  addCustomField(key = '', value = '') { this.customFields.push(this.fb.group({ key: [key], value: [value] })); }
+  removeCustomField(index: number) { this.customFields.removeAt(index); }
+  customFieldEntries(item: Expense) { return Object.entries(item.customFields || {}); }
 
   loadExpenses() {
-    this.expensesService.list(this.filterForm.getRawValue()).subscribe({
-      next: (response) => this.expenses.set(response.items)
-    });
+    const raw = this.filterForm.getRawValue();
+    this.expensesService.list({ startDate: raw.startDate || undefined, endDate: raw.endDate || undefined, categoryId: raw.categoryId || undefined, search: raw.search || undefined, status: raw.status || undefined, tags: raw.tags || undefined, duplicatesOnly: raw.duplicatesOnly || undefined }).subscribe({ next: (response) => this.expenses.set(response.items) });
+  }
+
+  loadDuplicates() {
+    this.expensesService.duplicates().subscribe({ next: (response) => this.duplicateGroups.set(response.items) });
   }
 
   resetFilters() {
-    this.filterForm.reset({ startDate: '', endDate: '', categoryId: '', search: '' });
+    this.filterForm.reset({ startDate: '', endDate: '', categoryId: '', search: '', status: '', tags: '', duplicatesOnly: false });
     this.loadExpenses();
   }
 
@@ -386,16 +268,12 @@ export class ExpensesComponent implements OnInit {
 
   onProofSelected(event: Event) {
     const input = event.target as HTMLInputElement;
-    const file = input.files?.[0] ?? null;
-    this.croppedFile.set(file);
+    const files = Array.from(input.files ?? []);
+    this.selectedFiles.set(files);
+    this.croppedFile.set(null);
     this.croppedPreview.set(null);
     this.imageChangedEvent.set(event);
-
-    if (file && file.type.startsWith('image/')) {
-      this.showCropper.set(true);
-    } else {
-      this.showCropper.set(false);
-    }
+    this.showCropper.set(files.length === 1 && files[0].type.startsWith('image/'));
   }
 
   onImageCropped(event: ImageCroppedEvent) {
@@ -405,41 +283,30 @@ export class ExpensesComponent implements OnInit {
     this.croppedPreview.set(event.objectUrl ?? null);
   }
 
-  submitExpense() {
+  submitExpense(forcedStatus?: Expense['status']) {
     this.submitted.set(true);
     this.expenseForm.markAllAsTouched();
-    this.expenseForm.updateValueAndValidity();
-
     if (this.expenseForm.invalid) return;
 
     const raw = this.expenseForm.getRawValue();
+    const customFieldEntries = this.customFields.getRawValue().map((item: { key: string; value: string }) => [item.key, item.value] as [string, string]).filter(([key, value]) => Boolean(key && value));
+    const customFields = Object.fromEntries(customFieldEntries);
+    const tags = raw.tagsText.split(',').map((item) => item.trim()).filter(Boolean);
+    const status = forcedStatus ?? (raw.status as Expense['status']);
     this.saving.set(true);
 
     if (this.editingExpenseId()) {
-      this.expensesService
-        .update(this.editingExpenseId()!, {
-          title: raw.title,
-          amount: raw.amount,
-          expenseDate: raw.expenseDate,
-          categoryId: raw.categoryId,
-          merchant: raw.merchant,
-          paymentMethod: raw.paymentMethod as Expense['paymentMethod'],
-          description: raw.description,
-          currency: 'PLN'
-        })
-        .subscribe({
-          next: () => {
-            this.saving.set(false);
-            this.submitted.set(false);
-            this.toast.success(this.ui.t('expenses.saved'));
-            this.cancelEdit();
-            this.loadExpenses();
-          },
-          error: (error) => {
-            this.saving.set(false);
-            this.toast.error(error.error?.message ?? this.ui.t('expenses.saveError'));
-          }
-        });
+      this.expensesService.update(this.editingExpenseId()!, { title: raw.title, amount: raw.amount, expenseDate: raw.expenseDate, categoryId: raw.categoryId, merchant: raw.merchant, paymentMethod: raw.paymentMethod as Expense['paymentMethod'], description: raw.description, currency: 'PLN', status, tags, customFields }).subscribe({
+        next: (response) => {
+          this.finishSave(response.warnings);
+          this.toast.success(this.ui.t('expenses.saved'));
+          this.cancelEdit();
+        },
+        error: (error) => {
+          this.saving.set(false);
+          this.toast.error(error.error?.message ?? this.ui.t('expenses.saveError'));
+        }
+      });
       return;
     }
 
@@ -452,33 +319,25 @@ export class ExpensesComponent implements OnInit {
     formData.set('paymentMethod', raw.paymentMethod);
     formData.set('description', raw.description);
     formData.set('currency', 'PLN');
+    formData.set('status', status);
+    formData.set('tags', JSON.stringify(tags));
+    formData.set('customFields', JSON.stringify(customFields));
     formData.set('proofType', raw.proofType);
     formData.set('proofLabel', raw.proofLabel);
     formData.set('proofNote', raw.proofNote);
-    if (this.croppedFile()) formData.set('proofFile', this.croppedFile()!);
+
+    const selected = this.selectedFiles();
+    if (this.croppedFile()) {
+      formData.append('proofFiles', this.croppedFile()!);
+      selected.slice(1).forEach((file) => formData.append('proofFiles', file));
+    } else {
+      selected.forEach((file) => formData.append('proofFiles', file));
+    }
 
     this.expensesService.create(formData).subscribe({
-      next: () => {
-        this.saving.set(false);
-        this.submitted.set(false);
-        this.toast.success(this.ui.t('expenses.added'));
-        this.expenseForm.reset({
-          title: '',
-          amount: 0,
-          expenseDate: today,
-          categoryId: '',
-          merchant: '',
-          paymentMethod: '',
-          description: '',
-          proofType: 'RECEIPT',
-          proofLabel: '',
-          proofNote: ''
-        });
-        this.selectedMerchantId.set('');
-        this.croppedFile.set(null);
-        this.croppedPreview.set(null);
-        this.showCropper.set(false);
-        this.loadExpenses();
+      next: (response) => {
+        this.finishSave(response.warnings);
+        this.toast.success(status === 'DRAFT' ? this.ui.t('expenses.draftSaved') : this.ui.t('expenses.added'));
       },
       error: (error) => {
         this.saving.set(false);
@@ -487,35 +346,37 @@ export class ExpensesComponent implements OnInit {
     });
   }
 
+  private finishSave(warnings?: string[]) {
+    this.saving.set(false);
+    this.submitted.set(false);
+    warnings?.forEach((warning) => this.toast.warning(warning));
+    this.resetForm();
+    this.loadExpenses();
+    this.loadDuplicates();
+  }
+
   startEdit(item: Expense) {
     this.editingExpenseId.set(item.id);
     this.submitted.set(false);
-    this.expenseForm.patchValue({
-      title: item.title,
-      amount: item.amount,
-      expenseDate: item.expenseDate,
-      categoryId: item.category.id,
-      merchant: item.merchant ?? '',
-      paymentMethod: item.paymentMethod ?? '',
-      description: item.description ?? ''
-    });
+    this.customFields.clear();
+    Object.entries(item.customFields || {}).forEach(([key, value]) => this.addCustomField(key, value));
+    this.expenseForm.patchValue({ title: item.title, amount: item.amount, expenseDate: item.expenseDate, categoryId: item.category.id, merchant: item.merchant ?? '', paymentMethod: item.paymentMethod ?? '', description: item.description ?? '', status: item.status, tagsText: (item.tags || []).join(', '), proofType: 'RECEIPT', proofLabel: '', proofNote: '' });
   }
 
   cancelEdit() {
     this.editingExpenseId.set(null);
     this.submitted.set(false);
-    this.expenseForm.reset({
-      title: '',
-      amount: 0,
-      expenseDate: today,
-      categoryId: '',
-      merchant: '',
-      paymentMethod: '',
-      description: '',
-      proofType: 'RECEIPT',
-      proofLabel: '',
-      proofNote: ''
-    });
+    this.resetForm();
+  }
+
+  private resetForm() {
+    this.customFields.clear();
+    this.expenseForm.reset({ title: '', amount: 0, expenseDate: today, categoryId: '', merchant: '', paymentMethod: '', description: '', status: 'PENDING', tagsText: '', proofType: 'RECEIPT', proofLabel: '', proofNote: '', customFields: [] as never[] });
+    this.selectedMerchantId.set('');
+    this.selectedFiles.set([]);
+    this.croppedFile.set(null);
+    this.croppedPreview.set(null);
+    this.showCropper.set(false);
   }
 
   removeExpense(item: Expense) {
@@ -523,20 +384,43 @@ export class ExpensesComponent implements OnInit {
       next: () => {
         this.toast.success(this.ui.t('expenses.deleted'));
         this.loadExpenses();
+        this.loadDuplicates();
       },
       error: (error) => this.toast.error(error.error?.message ?? this.ui.t('expenses.deleteError'))
     });
   }
 
-  openProof(proof: Proof) {
-    this.proofPreview.set(proof);
+  reviewDuplicate(item: Expense, action: 'CONFIRM' | 'DISMISS' | 'REOPEN') {
+    this.expensesService.reviewDuplicate(item.id, action).subscribe({
+      next: () => {
+        if (action === 'CONFIRM') this.toast.success(this.ui.t('expenses.duplicateConfirmed'));
+        if (action === 'DISMISS') this.toast.success(this.ui.t('expenses.duplicateDismissed'));
+        if (action === 'REOPEN') this.toast.success(this.ui.t('expenses.duplicateReopened'));
+        this.loadExpenses();
+        this.loadDuplicates();
+      },
+      error: (error) => this.toast.error(error.error?.message ?? this.ui.t('toast.error'))
+    });
   }
 
-  closeMerchantModal() {
-    this.merchantModalOpen.set(false);
+  openProof(proof: Proof) { this.proofPreview.set(proof); }
+  closeMerchantModal() { this.merchantModalOpen.set(false); }
+  closeProofPreview() { this.proofPreview.set(null); }
+  isPdf(proof: Proof) { return (proof.mimeType || '').includes('pdf'); }
+
+  statusBadgeClass(status: string) {
+    return ({ DRAFT: 'text-bg-secondary', PENDING: 'text-bg-warning', APPROVED: 'text-bg-success', REJECTED: 'text-bg-danger' } as Record<string, string>)[status] || 'text-bg-secondary';
   }
 
-  closeProofPreview() {
-    this.proofPreview.set(null);
+  duplicateBadgeClass(item: Expense) {
+    const state = item.duplicateStatus ?? (item.possibleDuplicate ? 'OPEN' : null);
+    return ({ OPEN: 'text-bg-warning', CONFIRMED: 'text-bg-danger', DISMISSED: 'text-bg-secondary' } as Record<string, string>)[state || 'OPEN'] || 'text-bg-warning';
+  }
+
+  duplicateLabel(item: Expense) {
+    const state = item.duplicateStatus ?? (item.possibleDuplicate ? 'OPEN' : null);
+    if (state === 'CONFIRMED') return this.ui.t('expenses.duplicateStatus.confirmed');
+    if (state === 'DISMISSED') return this.ui.t('expenses.duplicateStatus.dismissed');
+    return this.ui.t('expenses.duplicateStatus.open');
   }
 }

web/src/app/features/integrations/integrations.component.ts

@@ -0,0 +1,541 @@
+import { CommonModule, CurrencyPipe, DatePipe } from '@angular/common';
+import { Component, OnInit, computed, inject, signal } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { CategoriesService } from '../../core/services/categories.service';
+import { ShoppingListIntegrationService } from '../../core/services/shopping-list-integration.service';
+import { ToastService } from '../../core/services/toast.service';
+import { UiService } from '../../core/services/ui.service';
+import type { Category, ShoppingListExpenseItem, ShoppingListRef, ShoppingListSummary } from '../../shared/models';
+
+const currentMonth = () => new Date().toISOString().slice(0, 7);
+const today = () => new Date().toISOString().slice(0, 10);
+const monthRange = (period: string) => {
+  const safe = /^\d{4}-\d{2}$/.test(period) ? period : currentMonth();
+  const [yearText, monthText] = safe.split('-');
+  const year = Number(yearText);
+  const month = Number(monthText);
+  const nextMonth = month === 12 ? new Date(year + 1, 0, 1) : new Date(year, month, 1);
+  const end = new Date(nextMonth.getTime() - 24 * 60 * 60 * 1000).toISOString().slice(0, 10);
+  return { start: `${safe}-01`, end };
+};
+
+@Component({
+  selector: 'app-integrations',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, CurrencyPipe, DatePipe],
+  template: `
+    <div class="page-header d-print-none mb-3 ec-page-header">
+      <div class="row align-items-center g-3">
+        <div class="col">
+          <h2 class="page-title mb-1">{{ ui.t('integrations.title') }}</h2>
+          <div class="text-secondary">{{ ui.t('integrations.subtitle') }}</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row row-cards mb-3">
+      <div class="col-lg-5">
+        <div class="card overflow-hidden h-100">
+          <div class="card-header"><h3 class="card-title">{{ ui.t('integrations.shoppingList') }}</h3></div>
+          <div class="card-body">
+            <form [formGroup]="form" (ngSubmit)="save()" class="d-grid gap-3">
+              <label class="form-check">
+                <input class="form-check-input" type="checkbox" formControlName="enabled" />
+                <span class="form-check-label">{{ ui.t('integrations.enabled') }}</span>
+              </label>
+              <div>
+                <label class="form-label">{{ ui.t('integrations.baseUrl') }}</label>
+                <input class="form-control" formControlName="baseUrl" placeholder="https://host.example.com" />
+              </div>
+              <div>
+                <label class="form-label">{{ ui.t('integrations.apiToken') }}</label>
+                <input class="form-control" formControlName="apiToken" type="password" />
+                <div class="form-hint">{{ ui.t('integrations.keepToken') }}</div>
+              </div>
+              <div>
+                <label class="form-label">{{ ui.t('integrations.authMode') }}</label>
+                <select class="form-select" formControlName="authMode">
+                  <option value="both">Bearer + X-API-Token</option>
+                  <option value="bearer">Bearer</option>
+                  <option value="x-api-token">X-API-Token</option>
+                </select>
+              </div>
+              <div class="row g-3">
+                <div class="col-md-6">
+                  <label class="form-label">{{ ui.t('integrations.ownerId') }}</label>
+                  <input class="form-control" formControlName="ownerId" />
+                </div>
+                <div class="col-md-6">
+                  <label class="form-label">{{ ui.t('integrations.defaultListId') }}</label>
+                  <input class="form-control" formControlName="defaultListId" />
+                </div>
+              </div>
+              <div class="btn-list flex-wrap">
+                <button class="btn btn-success" [disabled]="form.invalid">{{ ui.t('action.save') }}</button>
+                <button class="btn btn-outline-info" type="button" (click)="test()">{{ ui.t('action.testConnection') }}</button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-lg-7">
+        <div class="card overflow-hidden h-100">
+          <div class="card-header"><h3 class="card-title">{{ ui.t('integrations.history') }}</h3></div>
+          <div class="card-body d-grid gap-3">
+            <form [formGroup]="historyForm" class="row g-3 align-items-end">
+              <div class="col-md-4">
+                <label class="form-label">{{ ui.t('integrations.period') }}</label>
+                <input class="form-control" type="month" formControlName="period" />
+              </div>
+              <div class="col-md-3">
+                <label class="form-label">{{ ui.t('integrations.limit') }}</label>
+                <input class="form-control" type="number" min="1" max="200" formControlName="limit" />
+              </div>
+              <div class="col-md-5">
+                <div class="btn-list justify-content-md-end">
+                  <button class="btn btn-primary" type="button" (click)="refresh()">{{ ui.t('action.refresh') }}</button>
+                </div>
+              </div>
+            </form>
+
+            <div class="row row-cards">
+              <div class="col-md-6">
+                <div class="card overflow-hidden">
+                  <div class="card-body">
+                    <div class="text-secondary">{{ ui.t('integrations.externalSpend') }}</div>
+                    <div class="display-6">{{ summaryAmount() | currency:'PLN':'symbol':'1.2-2' }}</div>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-6">
+                <div class="card overflow-hidden">
+                  <div class="card-body">
+                    <div class="text-secondary">{{ ui.t('integrations.externalCount') }}</div>
+                    <div class="display-6">{{ summaryCount() }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="border rounded-3 p-3 bg-body-tertiary">
+              @if (configured()) {
+                <div class="small text-secondary mb-2">{{ ui.t('integrations.summary') }}</div>
+                <pre class="mb-0 small">{{ summaryText() }}</pre>
+              } @else {
+                <div class="text-secondary">{{ ui.t('integrations.notConfigured') }}</div>
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row row-cards mb-3">
+      <div class="col-lg-4">
+        <div class="card overflow-hidden h-100">
+          <div class="card-header"><h3 class="card-title">{{ ui.t('integrations.lists') }}</h3></div>
+          <div class="list-group list-group-flush">
+            @for (item of visibleLists(); track item.id) {
+              <button class="list-group-item list-group-item-action text-start" type="button" [class.active]="isSelectedList(item)" (click)="selectList(item)">
+                <div class="d-flex justify-content-between gap-2 align-items-start">
+                  <div>
+                    <div class="fw-semibold">{{ listTitle(item) }}</div>
+                    <div class="text-secondary small">#{{ item.id }} · {{ listOwner(item) || ui.t('common.none') }}</div>
+                  </div>
+                  <span class="badge text-bg-secondary">{{ listCreatedAt(item) | date:'yyyy-MM-dd' }}</span>
+                </div>
+              </button>
+            } @empty {
+              <div class="list-group-item text-secondary">{{ ui.t('common.noData') }}</div>
+            }
+          </div>
+        </div>
+      </div>
+
+      <div class="col-lg-8">
+        <div class="card overflow-hidden h-100">
+          <div class="card-header"><h3 class="card-title">{{ ui.t('integrations.importTitle') }}</h3></div>
+          <div class="card-body d-grid gap-3">
+            <form [formGroup]="importForm" class="row g-3">
+              <div class="col-md-5">
+                <label class="form-label">{{ ui.t('expenses.field.category') }}</label>
+                <select class="form-select" formControlName="categoryId">
+                  <option value="">{{ ui.t('common.select') }}</option>
+                  @for (item of categories(); track item.id) {
+                    <option [value]="item.id">{{ item.name }}</option>
+                  }
+                </select>
+              </div>
+              <div class="col-md-3">
+                <label class="form-label">{{ ui.t('expenses.field.status') }}</label>
+                <select class="form-select" formControlName="status">
+                  <option value="DRAFT">{{ ui.t('status.draft') }}</option>
+                  <option value="PENDING">{{ ui.t('status.pending') }}</option>
+                </select>
+              </div>
+              <div class="col-md-4">
+                <label class="form-label">{{ ui.t('table.merchant') }}</label>
+                <input class="form-control" formControlName="merchant" />
+              </div>
+              <div class="col-12">
+                <label class="form-label">{{ ui.t('integrations.tags') }}</label>
+                <input class="form-control" formControlName="tags" />
+                <div class="form-hint">{{ ui.t('integrations.tagsHint') }}</div>
+              </div>
+            </form>
+
+            @if (selectedList()) {
+              <div class="border rounded-3 p-3">
+                <div class="d-flex justify-content-between gap-3 flex-wrap align-items-start">
+                  <div>
+                    <div class="fw-semibold">{{ listTitle(selectedList()!) }}</div>
+                    <div class="text-secondary small">#{{ selectedList()!.id }} · {{ listCreatedAt(selectedList()!) | date:'yyyy-MM-dd' }}</div>
+                    <div class="text-secondary small">{{ ui.t('integrations.selectedListSummary') }}: {{ selectedListCount() }} / {{ selectedListTotal() | currency:'PLN':'symbol':'1.2-2' }}</div>
+                  </div>
+                  <button class="btn btn-primary" type="button" [disabled]="importForm.invalid || selectedListCount() === 0" (click)="importSelectedList()">
+                    {{ ui.t('integrations.importSelectedList') }}
+                  </button>
+                </div>
+              </div>
+            } @else {
+              <div class="alert alert-info mb-0">{{ ui.t('integrations.selectListHint') }}</div>
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row row-cards">
+      <div class="col-lg-6">
+        <div class="card overflow-hidden h-100">
+          <div class="card-header"><h3 class="card-title">{{ ui.t('integrations.latest') }}</h3></div>
+          <div class="table-responsive">
+            <table class="table table-vcenter card-table mb-0">
+              <thead>
+                <tr>
+                  <th>{{ ui.t('table.title') }}</th>
+                  <th>{{ ui.t('table.date') }}</th>
+                  <th class="text-end">{{ ui.t('table.amount') }}</th>
+                  <th class="text-end">{{ ui.t('table.actions') }}</th>
+                </tr>
+              </thead>
+              <tbody>
+                @for (item of latestExpenses(); track $index) {
+                  <tr>
+                    <td>
+                      <div class="fw-semibold">{{ itemTitle(item) }}</div>
+                      <div class="text-secondary small">{{ listTitle(item.list) }} · {{ ownerName(item) || ui.t('common.none') }}</div>
+                    </td>
+                    <td>{{ itemDate(item) }}</td>
+                    <td class="text-end">{{ itemAmount(item) | number:'1.2-2' }}</td>
+                    <td class="text-end"><button class="btn btn-sm btn-outline-primary" type="button" [disabled]="importForm.invalid" (click)="importItem(item)">{{ ui.t('action.import') }}</button></td>
+                  </tr>
+                } @empty {
+                  <tr><td colspan="4" class="text-secondary">{{ ui.t('common.noData') }}</td></tr>
+                }
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-lg-6">
+        <div class="card overflow-hidden h-100">
+          <div class="card-header"><h3 class="card-title">{{ ui.t('integrations.listExpenses') }}</h3></div>
+          <div class="table-responsive">
+            <table class="table table-vcenter card-table mb-0">
+              <thead>
+                <tr>
+                  <th>{{ ui.t('table.title') }}</th>
+                  <th>{{ ui.t('table.date') }}</th>
+                  <th class="text-end">{{ ui.t('table.amount') }}</th>
+                  <th class="text-end">{{ ui.t('table.actions') }}</th>
+                </tr>
+              </thead>
+              <tbody>
+                @for (item of selectedListExpenses(); track $index) {
+                  <tr>
+                    <td>
+                      <div class="fw-semibold">{{ itemTitle(item) }}</div>
+                      <div class="text-secondary small">{{ ownerName(item) || ui.t('common.none') }}</div>
+                    </td>
+                    <td>{{ itemDate(item) }}</td>
+                    <td class="text-end">{{ itemAmount(item) | number:'1.2-2' }}</td>
+                    <td class="text-end"><button class="btn btn-sm btn-outline-primary" type="button" [disabled]="importForm.invalid" (click)="importItem(item)">{{ ui.t('action.import') }}</button></td>
+                  </tr>
+                } @empty {
+                  <tr><td colspan="4" class="text-secondary">{{ ui.t('common.noData') }}</td></tr>
+                }
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  `
+})
+export class IntegrationsComponent implements OnInit {
+  readonly ui = inject(UiService);
+  private readonly fb = inject(FormBuilder);
+  private readonly integration = inject(ShoppingListIntegrationService);
+  private readonly categoriesService = inject(CategoriesService);
+  private readonly toast = inject(ToastService);
+
+  readonly categories = this.categoriesService.items;
+  readonly configured = signal(false);
+  readonly summary = signal<ShoppingListSummary | null>(null);
+  readonly allLists = signal<ShoppingListRef[]>([]);
+  readonly latestExpenses = signal<ShoppingListExpenseItem[]>([]);
+  readonly selectedList = signal<ShoppingListRef | null>(null);
+  readonly selectedListExpenses = signal<ShoppingListExpenseItem[]>([]);
+
+  readonly form = this.fb.nonNullable.group({
+    enabled: [false],
+    baseUrl: ['', Validators.required],
+    apiToken: [''],
+    authMode: ['both' as 'bearer' | 'x-api-token' | 'both', Validators.required],
+    ownerId: [''],
+    defaultListId: ['']
+  });
+
+  readonly historyForm = this.fb.nonNullable.group({
+    period: [currentMonth(), Validators.required],
+    limit: [50, [Validators.required, Validators.min(1), Validators.max(200)]]
+  });
+
+  readonly importForm = this.fb.nonNullable.group({
+    categoryId: ['', Validators.required],
+    status: ['PENDING' as 'DRAFT' | 'PENDING', Validators.required],
+    merchant: ['Shopping list API'],
+    tags: ['shopping-list, external-import']
+  });
+
+  readonly summaryAmount = computed(() => Number(this.summary()?.total ?? this.summary()?.amount ?? this.summary()?.meta?.total_amount ?? 0));
+  readonly summaryCount = computed(() => Number(this.summary()?.count ?? this.summary()?.records ?? this.summary()?.meta?.total_count ?? 0));
+  readonly summaryText = computed(() => JSON.stringify(this.summary(), null, 2));
+  readonly selectedListTotal = computed(() => this.selectedListExpenses().reduce((sum: number, item: ShoppingListExpenseItem) => sum + this.itemAmount(item), 0));
+  readonly selectedListCount = computed(() => this.selectedListExpenses().length);
+
+  ngOnInit() {
+    this.categoriesService.list().subscribe({
+      next: (response: { items: Category[] }) => {
+        const first = response.items[0];
+        if (first && !this.importForm.controls.categoryId.value) this.importForm.controls.categoryId.setValue(first.id);
+      },
+      error: () => undefined
+    });
+
+    this.integration.getSettings().subscribe({
+      next: (response: { item: { enabled: boolean; baseUrl: string; hasToken: boolean; authMode: 'bearer' | 'x-api-token' | 'both'; ownerId: string | null; defaultListId: string | null } }) => {
+        const item = response.item;
+        this.form.reset({
+          enabled: item.enabled,
+          baseUrl: item.baseUrl || '',
+          apiToken: '',
+          authMode: item.authMode,
+          ownerId: item.ownerId || '',
+          defaultListId: item.defaultListId || ''
+        });
+        this.configured.set(Boolean(item.enabled && item.baseUrl && item.hasToken));
+        if (this.configured()) this.refresh();
+      },
+      error: (error) => this.toast.error(error.error?.message ?? this.ui.t('integrations.loadError'))
+    });
+  }
+
+  save() {
+    if (this.form.invalid) return;
+    const raw = this.form.getRawValue();
+    this.integration
+      .updateSettings({
+        enabled: raw.enabled,
+        baseUrl: raw.baseUrl || null,
+        apiToken: raw.apiToken || undefined,
+        authMode: raw.authMode,
+        ownerId: raw.ownerId || null,
+        defaultListId: raw.defaultListId || null
+      })
+      .subscribe({
+        next: (response: { item: { enabled: boolean; baseUrl: string; hasToken: boolean } }) => {
+          this.configured.set(Boolean(response.item.enabled && response.item.baseUrl && response.item.hasToken));
+          this.toast.success(this.ui.t('integrations.saveSuccess'));
+          if (this.configured()) this.refresh();
+        },
+        error: (error) => this.toast.error(error.error?.message ?? this.ui.t('integrations.saveError'))
+      });
+  }
+
+  test() {
+    this.integration.test().subscribe({
+      next: () => this.toast.success(this.ui.t('integrations.testSuccess')),
+      error: (error) => this.toast.error(error.error?.message ?? this.ui.t('integrations.testError'))
+    });
+  }
+
+  refresh() {
+    if (!this.configured()) return;
+    const raw = this.form.getRawValue();
+    const history = this.historyForm.getRawValue();
+    const range = monthRange(history.period);
+    const filters = {
+      start_date: range.start,
+      end_date: range.end,
+      owner_id: raw.ownerId || undefined,
+      list_id: raw.defaultListId || undefined
+    };
+
+    this.integration.summary(filters).subscribe({
+      next: (response: ShoppingListSummary) => this.summary.set(response),
+      error: (error) => this.toast.error(error.error?.message ?? this.ui.t('integrations.loadError'))
+    });
+
+    this.integration.latest({ ...filters, limit: history.limit }).subscribe({
+      next: (response: { items?: ShoppingListExpenseItem[]; data?: ShoppingListExpenseItem[] }) => this.latestExpenses.set(this.pickItems<ShoppingListExpenseItem>(response)),
+      error: () => this.latestExpenses.set([])
+    });
+
+    this.integration.lists({ owner_id: raw.ownerId || undefined, limit: 200 }).subscribe({
+      next: (response: { items?: ShoppingListRef[]; data?: ShoppingListRef[] }) => {
+        const items = this.pickItems<ShoppingListRef>(response);
+        this.allLists.set(items);
+        const visible = this.visibleLists(items);
+        const currentId = String(this.selectedList()?.id ?? '');
+        const nextSelected = visible.find((item) => String(item.id) === currentId) ?? visible[0] ?? null;
+        this.selectedList.set(nextSelected);
+        if (nextSelected) {
+          this.loadListExpenses(nextSelected);
+        } else {
+          this.selectedListExpenses.set([]);
+        }
+      },
+      error: () => {
+        this.allLists.set([]);
+        this.selectedList.set(null);
+        this.selectedListExpenses.set([]);
+      }
+    });
+  }
+
+  visibleLists(source?: ShoppingListRef[]) {
+    const period = this.historyForm.controls.period.value;
+    const items = source ?? this.allLists();
+    return items.filter((item) => {
+      const createdAt = this.listCreatedAt(item);
+      return createdAt ? createdAt.slice(0, 7) === period : true;
+    });
+  }
+
+  selectList(item: ShoppingListRef) {
+    this.selectedList.set(item);
+    this.loadListExpenses(item);
+  }
+
+  importSelectedList() {
+    const list = this.selectedList();
+    if (!list || this.importForm.invalid) return;
+    const raw = this.importForm.getRawValue();
+    this.integration
+      .importList({
+        listId: list.id,
+        listTitle: this.listTitle(list),
+        listCreatedAt: this.listCreatedAt(list),
+        categoryId: raw.categoryId,
+        status: raw.status,
+        merchant: raw.merchant || this.listTitle(list),
+        tags: this.normalizedTags()
+      })
+      .subscribe({
+        next: (response: { item: unknown; warnings?: string[] }) => {
+          this.toast.success(this.ui.t('integrations.importListSuccess'));
+          this.emitWarnings(response.warnings);
+        },
+        error: (error) => this.toast.error(error.error?.message ?? this.ui.t('integrations.importError'))
+      });
+  }
+
+  importItem(item: ShoppingListExpenseItem) {
+    if (this.importForm.invalid) return;
+    const raw = this.importForm.getRawValue();
+    this.integration
+      .importItem({
+        expenseId: item.expense_id ?? item.id ?? null,
+        listId: item.list?.id ?? this.selectedList()?.id ?? null,
+        listTitle: this.listTitle(item.list ?? this.selectedList()),
+        categoryId: raw.categoryId,
+        status: raw.status,
+        title: this.itemTitle(item),
+        amount: this.itemAmount(item),
+        expenseDate: this.itemDate(item),
+        merchant: raw.merchant || this.listTitle(item.list ?? this.selectedList()),
+        ownerName: this.ownerName(item),
+        tags: this.normalizedTags()
+      })
+      .subscribe({
+        next: (response: { item: unknown; warnings?: string[] }) => {
+          this.toast.success(this.ui.t('integrations.importItemSuccess'));
+          this.emitWarnings(response.warnings);
+        },
+        error: (error) => this.toast.error(error.error?.message ?? this.ui.t('integrations.importError'))
+      });
+  }
+
+  isSelectedList(item: ShoppingListRef) {
+    return String(this.selectedList()?.id ?? '') === String(item.id);
+  }
+
+  listTitle(item?: ShoppingListRef | null) {
+    return item?.title || item?.name || (item?.id !== undefined ? String(item.id) : '-');
+  }
+
+  listOwner(item?: ShoppingListRef | null) {
+    return item?.owner?.username || item?.owner?.fullName || item?.owner?.name || item?.owner?.email || null;
+  }
+
+  listCreatedAt(item?: ShoppingListRef | null) {
+    return item?.created_at || null;
+  }
+
+  itemTitle(item: ShoppingListExpenseItem) {
+    return item.title || item.name || item.list?.title || item.list?.name || `Expense #${item.expense_id ?? item.id ?? '-'}`;
+  }
+
+  itemDate(item: ShoppingListExpenseItem) {
+    return (item.expense_date || item.added_at || item.created_at || today()).slice(0, 10);
+  }
+
+  itemAmount(item: ShoppingListExpenseItem) {
+    return Number(item.amount ?? item.total ?? 0);
+  }
+
+  ownerName(item: ShoppingListExpenseItem) {
+    return item.owner?.fullName || item.owner?.name || item.owner?.username || item.owner?.email || null;
+  }
+
+  private loadListExpenses(item: ShoppingListRef) {
+    const limit = this.historyForm.controls.limit.value;
+    this.integration.listExpenses(item.id, limit).subscribe({
+      next: (response: { items?: ShoppingListExpenseItem[]; data?: ShoppingListExpenseItem[] }) => this.selectedListExpenses.set(this.pickItems<ShoppingListExpenseItem>(response)),
+      error: () => this.selectedListExpenses.set([])
+    });
+  }
+
+  private normalizedTags() {
+    return Array.from(
+      new Set(
+        this.importForm.controls.tags.value
+          .split(',')
+          .map((item) => item.trim())
+          .filter(Boolean)
+      )
+    );
+  }
+
+  private emitWarnings(warnings?: string[]) {
+    (warnings ?? []).forEach((message) => this.toast.warning(message));
+  }
+
+  private pickItems<T extends { id?: string | number }>(response: { items?: T[]; data?: T[] }) {
+    return response.items ?? response.data ?? [];
+  }
+}

web/src/app/features/recurring/recurring.component.ts

@@ -0,0 +1,182 @@
+import { CommonModule, CurrencyPipe, DatePipe } from '@angular/common';
+import { Component, OnInit, inject, signal } from '@angular/core';
+import { FormArray, FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { CategoriesService } from '../../core/services/categories.service';
+import { RecurringExpensesService } from '../../core/services/recurring-expenses.service';
+import { ToastService } from '../../core/services/toast.service';
+import { UiService } from '../../core/services/ui.service';
+import type { RecurringExpense } from '../../shared/models';
+
+const today = () => new Date().toISOString().slice(0, 10);
+
+@Component({
+  selector: 'app-recurring',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, CurrencyPipe, DatePipe],
+  template: `
+    <div class="page-header d-print-none mb-3 ec-page-header">
+      <div class="row align-items-center g-3">
+        <div class="col">
+          <h2 class="page-title mb-1">{{ ui.t('nav.recurring') }}</h2>
+          <div class="text-secondary">{{ ui.t('recurring.subtitle') }}</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row row-cards">
+      <div class="col-lg-5">
+        <div class="card overflow-hidden">
+          <div class="card-header d-flex justify-content-between align-items-center">
+            <h3 class="card-title">{{ editingId() ? ui.t('recurring.edit') : ui.t('recurring.new') }}</h3>
+            <div class="btn-list">
+              @if (editingId()) { <button class="btn btn-outline-secondary btn-sm" type="button" (click)="cancelEdit()">{{ ui.t('action.cancelEdit') }}</button> }
+              <button class="btn btn-outline-primary btn-sm" type="button" (click)="runNow()">{{ ui.t('recurring.runNow') }}</button>
+            </div>
+          </div>
+          <div class="card-body">
+            <form [formGroup]="form" (ngSubmit)="save()" class="d-grid gap-3">
+              <div class="row g-3">
+                <div class="col-md-8"><label class="form-label">{{ ui.t('expenses.field.title') }}</label><input class="form-control" formControlName="title" /></div>
+                <div class="col-md-4"><label class="form-label">{{ ui.t('expenses.field.amount') }}</label><input class="form-control" type="number" step="0.01" formControlName="amount" /></div>
+                <div class="col-md-6"><label class="form-label">{{ ui.t('expenses.field.category') }}</label><select class="form-select" formControlName="categoryId"><option value="">{{ ui.t('common.select') }}</option>@for (category of categories(); track category.id) { <option [value]="category.id">{{ category.name }}</option> }</select></div>
+                <div class="col-md-6"><label class="form-label">{{ ui.t('expenses.field.status') }}</label><select class="form-select" formControlName="defaultStatus"><option value="DRAFT">{{ ui.t('status.draft') }}</option><option value="PENDING">{{ ui.t('status.pending') }}</option></select></div>
+                <div class="col-md-6"><label class="form-label">{{ ui.t('recurring.frequency') }}</label><select class="form-select" formControlName="frequency"><option value="WEEKLY">{{ ui.t('recurring.weekly') }}</option><option value="MONTHLY">{{ ui.t('recurring.monthly') }}</option><option value="YEARLY">{{ ui.t('recurring.yearly') }}</option></select></div>
+                <div class="col-md-6"><label class="form-label">{{ ui.t('recurring.interval') }}</label><input class="form-control" type="number" min="1" formControlName="intervalValue" /></div>
+                <div class="col-md-4"><label class="form-label">{{ ui.t('recurring.startDate') }}</label><input class="form-control" type="date" formControlName="startDate" /></div>
+                <div class="col-md-4"><label class="form-label">{{ ui.t('recurring.nextRunDate') }}</label><input class="form-control" type="date" formControlName="nextRunDate" /></div>
+                <div class="col-md-4"><label class="form-label">{{ ui.t('recurring.endDate') }}</label><input class="form-control" type="date" formControlName="endDate" /></div>
+                <div class="col-md-6"><label class="form-label">{{ ui.t('recurring.maxOccurrences') }}</label><input class="form-control" type="number" min="1" formControlName="maxOccurrences" /></div>
+                <div class="col-md-6"><label class="form-label">{{ ui.t('expenses.field.merchantName') }}</label><input class="form-control" formControlName="merchant" /></div>
+                <div class="col-md-6"><label class="form-label">{{ ui.t('expenses.field.tags') }}</label><input class="form-control" formControlName="tagsText" /></div>
+                <div class="col-12"><label class="form-label">{{ ui.t('expenses.field.description') }}</label><textarea class="form-control" rows="2" formControlName="description"></textarea></div>
+              </div>
+
+              <div formArrayName="customFields" class="d-grid gap-2">
+                <div class="d-flex justify-content-between align-items-center"><div class="form-label mb-0">{{ ui.t('expenses.field.customFields') }}</div><button class="btn btn-outline-secondary btn-sm" type="button" (click)="addCustomField()">{{ ui.t('action.add') }}</button></div>
+                @for (group of customFields.controls; track $index) {
+                  <div [formGroupName]="$index" class="row g-2">
+                    <div class="col-sm-5"><input class="form-control" formControlName="key" [placeholder]="ui.t('expenses.field.customKey')" /></div>
+                    <div class="col-sm-5"><input class="form-control" formControlName="value" [placeholder]="ui.t('expenses.field.customValue')" /></div>
+                    <div class="col-sm-2"><button class="btn btn-outline-danger w-100" type="button" (click)="removeCustomField($index)">{{ ui.t('action.delete') }}</button></div>
+                  </div>
+                } @empty {
+                  <div class="text-secondary small">{{ ui.t('expenses.noCustomFields') }}</div>
+                }
+              </div>
+
+              <label class="form-check"><input class="form-check-input" type="checkbox" formControlName="isActive" /><span class="form-check-label">{{ ui.t('common.active') }}</span></label>
+              <button class="btn btn-success" [disabled]="form.invalid">{{ ui.t('action.save') }}</button>
+            </form>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-lg-7">
+        <div class="card overflow-hidden">
+          <div class="card-header"><h3 class="card-title">{{ ui.t('recurring.title') }}</h3></div>
+          <div class="table-responsive">
+            <table class="table table-vcenter card-table mb-0">
+              <thead><tr><th>{{ ui.t('table.title') }}</th><th>{{ ui.t('recurring.frequency') }}</th><th>{{ ui.t('recurring.nextRunDate') }}</th><th class="text-end">{{ ui.t('table.amount') }}</th><th></th></tr></thead>
+              <tbody>
+                @for (item of items(); track item.id) {
+                  <tr>
+                    <td>
+                      <div class="fw-semibold">{{ item.title }}</div>
+                      <div class="text-secondary small">{{ item.category.name }} · {{ item.merchant || ui.t('expenses.noMerchant') }}</div>
+                      <div class="text-secondary small">{{ ui.t('recurring.generatedCount') }}: {{ item.generatedCount }} · {{ ui.t('recurring.endDate') }}: {{ item.endDate || ui.t('common.none') }}</div>
+                      <div class="mt-1 d-flex gap-1 flex-wrap">@for (tag of item.tags; track tag) { <span class="badge text-bg-secondary">#{{ tag }}</span> }</div>
+                    </td>
+                    <td>{{ ui.t('recurring.' + item.frequency.toLowerCase()) }}</td>
+                    <td>{{ item.nextRunDate | date:'yyyy-MM-dd' }}</td>
+                    <td class="text-end">{{ item.amount | currency:'PLN':'symbol':'1.2-2' }}</td>
+                    <td class="text-end"><div class="btn-list justify-content-end flex-nowrap"><button class="btn btn-sm btn-outline-primary" type="button" (click)="edit(item)">{{ ui.t('action.edit') }}</button><button class="btn btn-sm btn-outline-danger" type="button" (click)="remove(item)">{{ ui.t('action.delete') }}</button></div></td>
+                  </tr>
+                } @empty { <tr><td colspan="5" class="text-secondary">{{ ui.t('common.noData') }}</td></tr> }
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  `
+})
+export class RecurringComponent implements OnInit {
+  readonly ui = inject(UiService);
+  private readonly fb = inject(FormBuilder);
+  private readonly categoriesService = inject(CategoriesService);
+  private readonly recurringService = inject(RecurringExpensesService);
+  private readonly toast = inject(ToastService);
+
+  readonly categories = this.categoriesService.items;
+  readonly items = signal<RecurringExpense[]>([]);
+  readonly editingId = signal<string | null>(null);
+
+  readonly form = this.fb.nonNullable.group({
+    title: ['', [Validators.required, Validators.minLength(2)]],
+    amount: [0, [Validators.required, Validators.min(0.01)]],
+    categoryId: ['', Validators.required],
+    defaultStatus: ['PENDING' as RecurringExpense['defaultStatus']],
+    frequency: ['MONTHLY' as RecurringExpense['frequency']],
+    intervalValue: [1, [Validators.required, Validators.min(1)]],
+    startDate: [today(), Validators.required],
+    nextRunDate: [today(), Validators.required],
+    endDate: [''],
+    maxOccurrences: [null as number | null],
+    merchant: [''],
+    description: [''],
+    tagsText: [''],
+    isActive: [true],
+    customFields: this.fb.array([])
+  });
+
+  get customFields() { return this.form.controls.customFields as FormArray; }
+
+  ngOnInit() {
+    this.categoriesService.ensureLoaded(true);
+    this.load();
+  }
+
+  load() {
+    this.recurringService.list().subscribe({ next: (response) => this.items.set(response.items) });
+  }
+
+  addCustomField(key = '', value = '') { this.customFields.push(this.fb.group({ key: [key], value: [value] })); }
+  removeCustomField(index: number) { this.customFields.removeAt(index); }
+
+  save() {
+    if (this.form.invalid) return;
+    const raw = this.form.getRawValue();
+    const customEntries = this.customFields.getRawValue().map((item: { key: string; value: string }) => [item.key, item.value] as [string, string]).filter(([key, value]) => Boolean(key && value));
+    const payload = {
+      ...raw,
+      categoryId: raw.categoryId,
+      endDate: raw.endDate || null,
+      maxOccurrences: raw.maxOccurrences ? Number(raw.maxOccurrences) : null,
+      tags: raw.tagsText.split(',').map((item) => item.trim()).filter(Boolean),
+      customFields: Object.fromEntries(customEntries)
+    };
+    const request = this.editingId() ? this.recurringService.update(this.editingId()!, payload) : this.recurringService.create(payload);
+    request.subscribe({ next: () => { this.toast.success(this.ui.t('recurring.saved')); this.cancelEdit(); this.load(); }, error: (error) => this.toast.error(error.error?.message ?? this.ui.t('recurring.saveError')) });
+  }
+
+  edit(item: RecurringExpense) {
+    this.editingId.set(item.id);
+    this.customFields.clear();
+    Object.entries(item.customFields || {}).forEach(([key, value]) => this.addCustomField(key, value));
+    this.form.reset({ title: item.title, amount: item.amount, categoryId: item.category.id, defaultStatus: item.defaultStatus, frequency: item.frequency, intervalValue: item.intervalValue, startDate: item.startDate, nextRunDate: item.nextRunDate, endDate: item.endDate || '', maxOccurrences: item.maxOccurrences, merchant: item.merchant || '', description: item.description || '', tagsText: item.tags.join(', '), isActive: item.isActive, customFields: [] as never[] });
+  }
+
+  cancelEdit() {
+    this.editingId.set(null);
+    this.customFields.clear();
+    this.form.reset({ title: '', amount: 0, categoryId: '', defaultStatus: 'PENDING', frequency: 'MONTHLY', intervalValue: 1, startDate: today(), nextRunDate: today(), endDate: '', maxOccurrences: null, merchant: '', description: '', tagsText: '', isActive: true, customFields: [] as never[] });
+  }
+
+  remove(item: RecurringExpense) {
+    this.recurringService.delete(item.id).subscribe({ next: () => { this.toast.success(this.ui.t('recurring.deleted')); this.load(); }, error: (error) => this.toast.error(error.error?.message ?? this.ui.t('recurring.deleteError')) });
+  }
+
+  runNow() {
+    this.recurringService.runNow().subscribe({ next: () => { this.toast.success(this.ui.t('recurring.ran')); this.load(); }, error: (error) => this.toast.error(error.error?.message ?? this.ui.t('toast.error')) });
+  }
+}

web/src/app/features/reports/reports.component.ts

@@ -14,56 +14,35 @@ import { CategoryPickerComponent } from '../../shared/ui/category-picker.compone
   imports: [CommonModule, ReactiveFormsModule, CategoryPickerComponent],
   template: `
     <div class="page-header d-print-none mb-3 ec-page-header">
-      <div class="row align-items-center g-3">
-        <div class="col">
-          <h2 class="page-title mb-1">{{ ui.t('reports.title') }}</h2>
-          <div class="text-secondary">{{ ui.t('reports.subtitle') }}</div>
-        </div>
-      </div>
+      <div class="row align-items-center g-3"><div class="col"><h2 class="page-title mb-1">{{ ui.t('reports.title') }}</h2><div class="text-secondary">{{ ui.t('reports.subtitle') }}</div></div></div>
     </div>
 
     <div class="row row-cards">
       <div class="col-lg-5">
-        <div class="card pv-card overflow-visible">
+        <div class="card pv-card overflow-visible mb-3">
           <div class="card-header"><h3 class="card-title">{{ ui.t('reports.emailTitle') }}</h3></div>
           <div class="card-body">
             <form [formGroup]="form" (ngSubmit)="save()" class="d-grid gap-3">
-              <label class="form-check">
-                <input class="form-check-input" type="checkbox" formControlName="enabled" />
-                <span class="form-check-label">{{ ui.t('reports.enable') }}</span>
-              </label>
-              <div>
-                <label class="form-label">{{ ui.t('reports.frequency') }}</label>
-                <select class="form-select" formControlName="frequency">
-                  <option value="monthly">{{ ui.t('reports.frequency.monthly') }}</option>
-                  <option value="yearly">{{ ui.t('reports.frequency.yearly') }}</option>
-                  <option value="threshold">{{ ui.t('reports.frequency.threshold') }}</option>
-                </select>
-              </div>
-              <div>
-                <label class="form-label">{{ ui.t('reports.targetEmail') }}</label>
-                <input class="form-control" formControlName="sendToEmail" />
-              </div>
-              <div>
-                <label class="form-label">{{ ui.t('reports.threshold') }}</label>
-                <input class="form-control" type="number" step="0.01" formControlName="thresholdAmount" />
-              </div>
-              <div>
-                <label class="form-label">{{ ui.t('reports.categories') }}</label>
-                <app-category-picker
-                  [items]="categories()"
-                  [selectedIds]="form.getRawValue().categoryIds"
-                  [placeholder]="ui.t('expenses.allCategories')"
-                  (changed)="setCategoryIds($event)"></app-category-picker>
-              </div>
-              <div class="btn-list flex-wrap">
-                <button class="btn btn-success d-inline-flex align-items-center gap-2" [disabled]="form.invalid" type="submit">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10"/></svg>
-                  <span>{{ ui.t('action.save') }}</span>
-                </button>
-                <button class="btn btn-outline-info" type="button" (click)="preview()">{{ ui.t('action.refreshPreview') }}</button>
-                <button class="btn btn-warning" type="button" (click)="send()">{{ ui.t('action.sendNow') }}</button>
-              </div>
+              <label class="form-check"><input class="form-check-input" type="checkbox" formControlName="enabled" /><span class="form-check-label">{{ ui.t('reports.enable') }}</span></label>
+              <div><label class="form-label">{{ ui.t('reports.frequency') }}</label><select class="form-select" formControlName="frequency"><option value="monthly">{{ ui.t('reports.frequency.monthly') }}</option><option value="yearly">{{ ui.t('reports.frequency.yearly') }}</option><option value="threshold">{{ ui.t('reports.frequency.threshold') }}</option></select></div>
+              <div><label class="form-label">{{ ui.t('reports.targetEmail') }}</label><input class="form-control" formControlName="sendToEmail" /></div>
+              <div><label class="form-label">{{ ui.t('reports.threshold') }}</label><input class="form-control" type="number" step="0.01" formControlName="thresholdAmount" /></div>
+              <div><label class="form-label">{{ ui.t('reports.categories') }}</label><app-category-picker [items]="categories()" [selectedIds]="form.getRawValue().categoryIds" [placeholder]="ui.t('expenses.allCategories')" (changed)="setCategoryIds($event)"></app-category-picker></div>
+              <div class="btn-list flex-wrap"><button class="btn btn-success" [disabled]="form.invalid" type="submit">{{ ui.t('action.save') }}</button><button class="btn btn-outline-info" type="button" (click)="preview()">{{ ui.t('action.refreshPreview') }}</button><button class="btn btn-warning" type="button" (click)="send()">{{ ui.t('action.sendNow') }}</button></div>
+            </form>
+          </div>
+        </div>
+
+        <div class="card pv-card overflow-hidden">
+          <div class="card-header"><h3 class="card-title">{{ ui.t('reports.exportTitle') }}</h3></div>
+          <div class="card-body">
+            <form [formGroup]="exportForm" class="row g-3 align-items-end">
+              <div class="col-md-6"><label class="form-label">{{ ui.t('stats.from') }}</label><input class="form-control" type="date" formControlName="startDate" /></div>
+              <div class="col-md-6"><label class="form-label">{{ ui.t('stats.to') }}</label><input class="form-control" type="date" formControlName="endDate" /></div>
+              <div class="col-md-6"><label class="form-label">{{ ui.t('expenses.field.status') }}</label><select class="form-select" formControlName="status"><option value="">{{ ui.t('common.none') }}</option><option value="DRAFT">{{ ui.t('status.draft') }}</option><option value="PENDING">{{ ui.t('status.pending') }}</option><option value="APPROVED">{{ ui.t('status.approved') }}</option><option value="REJECTED">{{ ui.t('status.rejected') }}</option></select></div>
+              <div class="col-md-6"><label class="form-label">{{ ui.t('expenses.field.tags') }}</label><input class="form-control" formControlName="tag" [placeholder]="ui.t('expenses.tagPlaceholder')" /></div>
+              <div class="col-12"><label class="form-label">{{ ui.t('reports.categories') }}</label><app-category-picker [items]="categories()" [selectedIds]="exportForm.getRawValue().categoryIds" [placeholder]="ui.t('expenses.allCategories')" (changed)="setExportCategoryIds($event)"></app-category-picker></div>
+              <div class="col-12"><div class="btn-list flex-wrap"><button class="btn btn-outline-primary" type="button" (click)="download('csv')">CSV</button><button class="btn btn-outline-primary" type="button" (click)="download('json')">JSON</button><button class="btn btn-outline-primary" type="button" (click)="download('html')">HTML</button><button class="btn btn-outline-primary" type="button" (click)="download('pdf')">PDF</button></div></div>
             </form>
           </div>
         </div>
@@ -80,11 +59,7 @@ import { CategoryPickerComponent } from '../../shared/ui/category-picker.compone
                 <div class="col-sm-4"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('stats.average') }}</div><div class="h1">{{ summary()!.average.toFixed(2) }}</div></div></div></div>
               </div>
             }
-            <div class="card bg-body-tertiary overflow-hidden">
-              <div class="card-body">
-                <div [innerHTML]="html()"></div>
-              </div>
-            </div>
+            <div class="card bg-body-tertiary overflow-hidden"><div class="card-body"><div [innerHTML]="html()"></div></div></div>
           </div>
         </div>
       </div>
@@ -102,59 +77,33 @@ export class ReportsComponent implements OnInit {
   readonly html = signal(`<div class="text-secondary">${this.ui.t('reports.noData')}</div>`);
   readonly summary = signal<StatsResponse | null>(null);
 
-  readonly form = this.fb.nonNullable.group({
-    enabled: [false],
-    frequency: ['monthly' as ReportPreferences['frequency'], Validators.required],
-    sendToEmail: ['', Validators.required],
-    thresholdAmount: [0],
-    categoryIds: [[] as string[]]
-  });
+  readonly form = this.fb.nonNullable.group({ enabled: [false], frequency: ['monthly' as ReportPreferences['frequency'], Validators.required], sendToEmail: ['', Validators.required], thresholdAmount: [0], categoryIds: [[] as string[]] });
+  readonly exportForm = this.fb.nonNullable.group({ startDate: [''], endDate: [''], status: [''], tag: [''], categoryIds: [[] as string[]] });
 
   ngOnInit() {
     this.categoriesService.ensureLoaded(true);
-    this.reports.getPreferences().subscribe({
-      next: (response) => {
-        this.form.reset({
-          enabled: response.item.enabled,
-          frequency: response.item.frequency,
-          sendToEmail: response.item.sendToEmail ?? '',
-          thresholdAmount: response.item.thresholdAmount,
-          categoryIds: response.item.categoryIds ?? []
-        });
-        this.preview();
-      }
-    });
+    this.reports.getPreferences().subscribe({ next: (response) => { this.form.reset({ enabled: response.item.enabled, frequency: response.item.frequency, sendToEmail: response.item.sendToEmail ?? '', thresholdAmount: response.item.thresholdAmount, categoryIds: response.item.categoryIds ?? [] }); this.preview(); } });
   }
 
-  setCategoryIds(categoryIds: string[]) {
-    this.form.patchValue({ categoryIds });
-  }
+  setCategoryIds(categoryIds: string[]) { this.form.patchValue({ categoryIds }); }
+  setExportCategoryIds(categoryIds: string[]) { this.exportForm.patchValue({ categoryIds }); }
 
-  save() {
-    if (this.form.invalid) return;
-    this.reports.updatePreferences(this.form.getRawValue()).subscribe({
-      next: () => {
-        this.toast.success(this.ui.t('reports.saved'));
-        this.preview();
+  save() { if (this.form.invalid) return; this.reports.updatePreferences(this.form.getRawValue()).subscribe({ next: () => { this.toast.success(this.ui.t('reports.saved')); this.preview(); }, error: (error) => this.toast.error(error.error?.message ?? this.ui.t('reports.saveError')) }); }
+  preview() { this.reports.preview(this.form.getRawValue()).subscribe({ next: (response) => { this.summary.set(response.summary); this.html.set(response.html || `<div class="text-secondary">${this.ui.t('reports.noData')}</div>`); }, error: (error) => this.toast.error(error.error?.message ?? this.ui.t('reports.previewError')) }); }
+  send() { this.reports.send().subscribe({ next: (response) => this.toast.success(this.ui.t('reports.sentTo', { email: response.sentTo })), error: (error) => this.toast.error(error.error?.message ?? this.ui.t('reports.sendError')) }); }
+
+  download(format: 'csv' | 'json' | 'html' | 'pdf') {
+    const raw = this.exportForm.getRawValue();
+    this.reports.export({ format, startDate: raw.startDate || undefined, endDate: raw.endDate || undefined, status: raw.status || undefined, tag: raw.tag || undefined, categoryIds: raw.categoryIds.join(',') || undefined }).subscribe({
+      next: (blob) => {
+        const url = URL.createObjectURL(blob);
+        const anchor = document.createElement('a');
+        anchor.href = url;
+        anchor.download = `expense-report.${format}`;
+        anchor.click();
+        URL.revokeObjectURL(url);
       },
-      error: (error) => this.toast.error(error.error?.message ?? this.ui.t('reports.saveError'))
-    });
-  }
-
-  preview() {
-    this.reports.preview(this.form.getRawValue()).subscribe({
-      next: (response) => {
-        this.summary.set(response.summary);
-        this.html.set(response.html || `<div class="text-secondary">${this.ui.t('reports.noData')}</div>`);
-      },
-      error: (error) => this.toast.error(error.error?.message ?? this.ui.t('reports.previewError'))
-    });
-  }
-
-  send() {
-    this.reports.send().subscribe({
-      next: (response) => this.toast.success(this.ui.t('reports.sentTo', { email: response.sentTo })),
-      error: (error) => this.toast.error(error.error?.message ?? this.ui.t('reports.sendError'))
+      error: (error) => this.toast.error(error.error?.message ?? this.ui.t('reports.exportError'))
     });
   }
 }

web/src/app/features/stats/stats.component.ts

@@ -1,36 +1,14 @@
 import { CommonModule, CurrencyPipe } from '@angular/common';
 import { AfterViewChecked, Component, OnDestroy, OnInit, inject, signal } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
-import {
-  Chart,
-  DoughnutController,
-  ArcElement,
-  Tooltip,
-  Legend,
-  LineController,
-  LineElement,
-  PointElement,
-  CategoryScale,
-  LinearScale
-} from 'chart.js';
+import { Chart, DoughnutController, ArcElement, Tooltip, Legend, LineController, LineElement, PointElement, CategoryScale, LinearScale } from 'chart.js';
 import { CategoriesService } from '../../core/services/categories.service';
 import { StatsService } from '../../core/services/stats.service';
 import { UiService } from '../../core/services/ui.service';
 import type { StatsResponse } from '../../shared/models';
 import { CategoryPickerComponent } from '../../shared/ui/category-picker.component';
 
-Chart.register(
-  DoughnutController,
-  ArcElement,
-  Tooltip,
-  Legend,
-  LineController,
-  LineElement,
-  PointElement,
-  CategoryScale,
-  LinearScale
-);
-
+Chart.register(DoughnutController, ArcElement, Tooltip, Legend, LineController, LineElement, PointElement, CategoryScale, LinearScale);
 const chartPalette = ['#206bc4', '#2fb344', '#f59f00', '#d63939', '#9b4dca', '#4263eb', '#0ca678', '#e8590c'];
 
 @Component({
@@ -38,105 +16,28 @@ const chartPalette = ['#206bc4', '#2fb344', '#f59f00', '#d63939', '#9b4dca', '#4
   standalone: true,
   imports: [CommonModule, ReactiveFormsModule, CurrencyPipe, CategoryPickerComponent],
   template: `
-    <div class="page-header d-print-none mb-3 ec-page-header">
-      <div class="row align-items-center g-3">
-        <div class="col">
-          <h2 class="page-title mb-1">{{ ui.t('stats.title') }}</h2>
-          <div class="text-secondary">{{ ui.t('stats.subtitle') }}</div>
-        </div>
-      </div>
-    </div>
+    <div class="page-header d-print-none mb-3 ec-page-header"><div class="row align-items-center g-3"><div class="col"><h2 class="page-title mb-1">{{ ui.t('stats.title') }}</h2><div class="text-secondary">{{ ui.t('stats.subtitle') }}</div></div></div></div>
 
     <div class="row row-cards">
-      <div class="col-12">
-        <div class="card overflow-visible">
-          <div class="card-body">
-            <form [formGroup]="form" (ngSubmit)="load()" class="row g-3 align-items-end">
-              <div class="col-md-3">
-                <label class="form-label">{{ ui.t('stats.period') }}</label>
-                <select class="form-select" formControlName="bucket">
-                  <option value="month">{{ ui.t('stats.period.month') }}</option>
-                  <option value="quarter">{{ ui.t('stats.period.quarter') }}</option>
-                  <option value="year">{{ ui.t('stats.period.year') }}</option>
-                </select>
-              </div>
-              <div class="col-md-3"><label class="form-label">{{ ui.t('stats.from') }}</label><input class="form-control" type="date" formControlName="startDate" /></div>
-              <div class="col-md-3"><label class="form-label">{{ ui.t('stats.to') }}</label><input class="form-control" type="date" formControlName="endDate" /></div>
-              <div class="col-md-3">
-                <label class="form-label">{{ ui.t('reports.categories') }}</label>
-                <app-category-picker
-                  [items]="categories()"
-                  [selectedIds]="form.getRawValue().categoryIds"
-                  [placeholder]="ui.t('expenses.allCategories')"
-                  (changed)="setCategoryIds($event)"></app-category-picker>
-              </div>
-              <div class="col-12 d-flex gap-2 flex-wrap">
-                <button class="btn btn-success d-inline-flex align-items-center gap-2" type="submit">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10"/></svg>
-                  <span>{{ ui.t('action.show') }}</span>
-                </button>
-                <button class="btn btn-outline-secondary" type="button" (click)="reset()">{{ ui.t('action.reset') }}</button>
-              </div>
-            </form>
-          </div>
-        </div>
-      </div>
+      <div class="col-12"><div class="card overflow-visible"><div class="card-body"><form [formGroup]="form" (ngSubmit)="load()" class="row g-3 align-items-end">
+        <div class="col-md-2"><label class="form-label">{{ ui.t('stats.period') }}</label><select class="form-select" formControlName="bucket"><option value="month">{{ ui.t('stats.period.month') }}</option><option value="quarter">{{ ui.t('stats.period.quarter') }}</option><option value="year">{{ ui.t('stats.period.year') }}</option></select></div>
+        <div class="col-md-2"><label class="form-label">{{ ui.t('stats.from') }}</label><input class="form-control" type="date" formControlName="startDate" /></div>
+        <div class="col-md-2"><label class="form-label">{{ ui.t('stats.to') }}</label><input class="form-control" type="date" formControlName="endDate" /></div>
+        <div class="col-md-3"><label class="form-label">{{ ui.t('reports.categories') }}</label><app-category-picker [items]="categories()" [selectedIds]="form.getRawValue().categoryIds" [placeholder]="ui.t('expenses.allCategories')" (changed)="setCategoryIds($event)"></app-category-picker></div>
+        <div class="col-md-1"><label class="form-label">{{ ui.t('expenses.field.status') }}</label><select class="form-select" formControlName="status"><option value="">{{ ui.t('common.none') }}</option><option value="DRAFT">{{ ui.t('status.draft') }}</option><option value="PENDING">{{ ui.t('status.pending') }}</option><option value="APPROVED">{{ ui.t('status.approved') }}</option><option value="REJECTED">{{ ui.t('status.rejected') }}</option></select></div>
+        <div class="col-md-2"><label class="form-label">{{ ui.t('expenses.field.tags') }}</label><input class="form-control" formControlName="tag" [placeholder]="ui.t('expenses.tagPlaceholder')" /></div>
+        <div class="col-12 d-flex gap-2 flex-wrap"><button class="btn btn-success" type="submit">{{ ui.t('action.show') }}</button><button class="btn btn-outline-secondary" type="button" (click)="reset()">{{ ui.t('action.reset') }}</button></div>
+      </form></div></div></div>
 
       <div class="col-md-4"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('stats.sum') }}</div><div class="display-6">{{ (stats()?.total || 0) | currency:'PLN':'symbol':'1.2-2' }}</div></div></div></div>
       <div class="col-md-4"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('dashboard.count') }}</div><div class="display-6">{{ stats()?.count || 0 }}</div></div></div></div>
       <div class="col-md-4"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('stats.average') }}</div><div class="display-6">{{ (stats()?.average || 0) | currency:'PLN':'symbol':'1.2-2' }}</div></div></div></div>
 
-      <div class="col-lg-6 d-flex align-items-stretch">
-        <div class="card pv-card h-100 w-100 overflow-hidden">
-          <div class="card-header"><h3 class="card-title">{{ ui.t('stats.share') }}</h3></div>
-          <div class="card-body">
-            @if (hasCategoryData()) {
-              <div class="ec-chart-wrap ec-chart-wrap-sm">
-                <canvas id="statsCategoryChart"></canvas>
-              </div>
-            } @else {
-              <div class="alert alert-info mb-0">{{ ui.t('stats.noCategoryChart') }}</div>
-            }
-          </div>
-        </div>
-      </div>
+      <div class="col-lg-6 d-flex align-items-stretch"><div class="card pv-card h-100 w-100 overflow-hidden"><div class="card-header"><h3 class="card-title">{{ ui.t('stats.share') }}</h3></div><div class="card-body">@if (hasCategoryData()) { <div class="ec-chart-wrap ec-chart-wrap-sm"><canvas id="statsCategoryChart"></canvas></div> } @else { <div class="alert alert-info mb-0">{{ ui.t('stats.noCategoryChart') }}</div> }</div></div></div>
+      <div class="col-lg-6 d-flex align-items-stretch"><div class="card pv-card h-100 w-100 overflow-hidden"><div class="card-header"><h3 class="card-title">{{ ui.t('stats.trend') }}</h3></div><div class="card-body">@if (hasTimelineData()) { <div class="ec-chart-wrap ec-chart-wrap-sm"><canvas id="statsLineChart"></canvas></div> } @else { <div class="alert alert-info mb-0">{{ ui.t('stats.noTrendChart') }}</div> }</div></div></div>
 
-      <div class="col-lg-6 d-flex align-items-stretch">
-        <div class="card pv-card h-100 w-100 overflow-hidden">
-          <div class="card-header"><h3 class="card-title">{{ ui.t('stats.trend') }}</h3></div>
-          <div class="card-body">
-            @if (hasTimelineData()) {
-              <div class="ec-chart-wrap ec-chart-wrap-sm">
-                <canvas id="statsLineChart"></canvas>
-              </div>
-            } @else {
-              <div class="alert alert-info mb-0">{{ ui.t('stats.noTrendChart') }}</div>
-            }
-          </div>
-        </div>
-      </div>
-
-      <div class="col-12">
-        <div class="card overflow-hidden">
-          <div class="card-header"><h3 class="card-title">{{ ui.t('stats.breakdown') }}</h3></div>
-          <div class="table-responsive">
-            <table class="table table-vcenter card-table mb-0">
-              <thead><tr><th>{{ ui.t('table.category') }}</th><th class="text-end">{{ ui.t('table.amount') }}</th><th class="text-end">{{ ui.t('table.count') }}</th></tr></thead>
-              <tbody>
-                @for (row of stats()?.byCategory || []; track row.categoryId) {
-                  <tr>
-                    <td>{{ row.categoryName }}</td>
-                    <td class="text-end">{{ row.total | currency:'PLN':'symbol':'1.2-2' }}</td>
-                    <td class="text-end">{{ row.count }}</td>
-                  </tr>
-                } @empty {
-                  <tr><td colspan="3" class="text-secondary">{{ ui.t('common.noData') }}</td></tr>
-                }
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
+      <div class="col-lg-6"><div class="card overflow-hidden"><div class="card-header"><h3 class="card-title">{{ ui.t('stats.breakdown') }}</h3></div><div class="table-responsive"><table class="table table-vcenter card-table mb-0"><thead><tr><th>{{ ui.t('table.category') }}</th><th class="text-end">{{ ui.t('table.amount') }}</th><th class="text-end">{{ ui.t('table.count') }}</th></tr></thead><tbody>@for (row of stats()?.byCategory || []; track row.categoryId) { <tr><td>{{ row.categoryName }}</td><td class="text-end">{{ row.total | currency:'PLN':'symbol':'1.2-2' }}</td><td class="text-end">{{ row.count }}</td></tr> } @empty { <tr><td colspan="3" class="text-secondary">{{ ui.t('common.noData') }}</td></tr> }</tbody></table></div></div></div>
+      <div class="col-lg-6"><div class="card overflow-hidden"><div class="card-header"><h3 class="card-title">{{ ui.t('stats.tags') }}</h3></div><div class="table-responsive"><table class="table table-vcenter card-table mb-0"><thead><tr><th>{{ ui.t('expenses.field.tags') }}</th><th class="text-end">{{ ui.t('table.amount') }}</th></tr></thead><tbody>@for (row of stats()?.byTag || []; track row.tag) { <tr><td>#{{ row.tag }}</td><td class="text-end">{{ row.total | currency:'PLN':'symbol':'1.2-2' }}</td></tr> } @empty { <tr><td colspan="2" class="text-secondary">{{ ui.t('common.noData') }}</td></tr> }</tbody></table></div></div></div>
     </div>
   `
 })
@@ -152,63 +53,21 @@ export class StatsComponent implements OnInit, AfterViewChecked, OnDestroy {
   private lineChart?: Chart;
   private chartsPending = false;
 
-  readonly form = this.fb.nonNullable.group({
-    bucket: ['month' as 'month' | 'quarter' | 'year'],
-    startDate: [''],
-    endDate: [''],
-    categoryIds: [[] as string[]]
-  });
+  readonly form = this.fb.nonNullable.group({ bucket: ['month' as 'month' | 'quarter' | 'year'], startDate: [''], endDate: [''], categoryIds: [[] as string[]], status: [''], tag: [''] });
 
-  ngOnInit() {
-    this.categoriesService.ensureLoaded(true);
-    this.load();
-  }
-
-  ngAfterViewChecked() {
-    if (this.chartsPending) {
-      this.chartsPending = false;
-      this.renderCharts();
-    }
-  }
-
-  ngOnDestroy() {
-    this.categoryChart?.destroy();
-    this.lineChart?.destroy();
-  }
-
-  setCategoryIds(categoryIds: string[]) {
-    this.form.patchValue({ categoryIds });
-  }
+  ngOnInit() { this.categoriesService.ensureLoaded(true); this.load(); }
+  ngAfterViewChecked() { if (this.chartsPending) { this.chartsPending = false; this.renderCharts(); } }
+  ngOnDestroy() { this.categoryChart?.destroy(); this.lineChart?.destroy(); }
+  setCategoryIds(categoryIds: string[]) { this.form.patchValue({ categoryIds }); }
+  hasCategoryData() { return Boolean(this.stats()?.byCategory?.length); }
+  hasTimelineData() { return Boolean(this.stats()?.timeline?.length); }
 
   load() {
     const raw = this.form.getRawValue();
-    this.statsService
-      .overview({
-        startDate: raw.startDate || undefined,
-        endDate: raw.endDate || undefined,
-        categoryIds: raw.categoryIds.join(',') || undefined,
-        bucket: raw.bucket
-      })
-      .subscribe({
-        next: (response) => {
-          this.stats.set(response);
-          this.chartsPending = true;
-        }
-      });
+    this.statsService.overview({ startDate: raw.startDate || undefined, endDate: raw.endDate || undefined, categoryIds: raw.categoryIds.join(',') || undefined, bucket: raw.bucket, status: raw.status || undefined, tag: raw.tag || undefined }).subscribe({ next: (response) => { this.stats.set(response); this.chartsPending = true; } });
   }
 
-  reset() {
-    this.form.reset({ bucket: 'month', startDate: '', endDate: '', categoryIds: [] });
-    this.load();
-  }
-
-  hasCategoryData() {
-    return Boolean(this.stats()?.byCategory?.length);
-  }
-
-  hasTimelineData() {
-    return Boolean(this.stats()?.timeline?.length);
-  }
+  reset() { this.form.reset({ bucket: 'month', startDate: '', endDate: '', categoryIds: [], status: '', tag: '' }); this.load(); }
 
   private renderCharts() {
     const current = this.stats();
@@ -218,82 +77,12 @@ export class StatsComponent implements OnInit, AfterViewChecked, OnDestroy {
     if (categoryCanvas && current?.byCategory?.length) {
       const colors = current.byCategory.map((_, index) => chartPalette[index % chartPalette.length]);
       this.categoryChart?.destroy();
-      this.categoryChart = new Chart(categoryCanvas, {
-        type: 'doughnut',
-        data: {
-          labels: current.byCategory.map((item) => item.categoryName),
-          datasets: [
-            {
-              data: current.byCategory.map((item) => item.total),
-              backgroundColor: colors,
-              borderColor: '#ffffff',
-              hoverOffset: 10
-            }
-          ]
-        },
-        options: {
-          maintainAspectRatio: false,
-          cutout: '64%',
-          plugins: {
-            legend: {
-              position: 'bottom',
-              labels: {
-                usePointStyle: true,
-                boxWidth: 10,
-                color: '#9ca3af'
-              }
-            }
-          }
-        }
-      });
-    } else {
-      this.categoryChart?.destroy();
-    }
+      this.categoryChart = new Chart(categoryCanvas, { type: 'doughnut', data: { labels: current.byCategory.map((item) => item.categoryName), datasets: [{ data: current.byCategory.map((item) => item.total), backgroundColor: colors, borderColor: '#ffffff', hoverOffset: 10 }] }, options: { maintainAspectRatio: false, cutout: '64%', plugins: { legend: { position: 'bottom', labels: { usePointStyle: true, boxWidth: 10, color: '#9ca3af' } } } } });
+    } else this.categoryChart?.destroy();
 
     if (lineCanvas && current?.timeline?.length) {
       this.lineChart?.destroy();
-      this.lineChart = new Chart(lineCanvas, {
-        type: 'line',
-        data: {
-          labels: current.timeline.map((item) => item.label),
-          datasets: [
-            {
-              label: this.ui.t('stats.expensesLabel'),
-              data: current.timeline.map((item) => item.total),
-              tension: 0.35,
-              borderColor: '#206bc4',
-              backgroundColor: 'rgba(32,107,196,0.18)',
-              pointBackgroundColor: '#2fb344',
-              pointBorderColor: '#ffffff',
-              pointRadius: 4,
-              pointHoverRadius: 6,
-              fill: true
-            }
-          ]
-        },
-        options: {
-          maintainAspectRatio: false,
-          plugins: {
-            legend: {
-              labels: {
-                color: '#9ca3af'
-              }
-            }
-          },
-          scales: {
-            x: {
-              ticks: { color: '#9ca3af' },
-              grid: { color: 'rgba(148,163,184,0.16)' }
-            },
-            y: {
-              ticks: { color: '#9ca3af' },
-              grid: { color: 'rgba(148,163,184,0.16)' }
-            }
-          }
-        }
-      });
-    } else {
-      this.lineChart?.destroy();
-    }
+      this.lineChart = new Chart(lineCanvas, { type: 'line', data: { labels: current.timeline.map((item) => item.label), datasets: [{ label: this.ui.t('stats.expensesLabel'), data: current.timeline.map((item) => item.total), borderColor: '#206bc4', backgroundColor: '#206bc4', tension: 0.3 }] }, options: { maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { ticks: { color: '#9ca3af' } }, y: { ticks: { color: '#9ca3af' } } } } });
+    } else this.lineChart?.destroy();
   }
 }

web/src/app/layout/shell.component.ts

@@ -14,88 +14,36 @@ import { UiService } from '../core/services/ui.service';
       <header class="navbar navbar-expand-md d-print-none pv-navbar">
         <div class="container-xl gap-3">
           <div class="navbar-brand navbar-brand-autodark fw-bold">{{ appSettings.appName() }}</div>
-
           <div class="ms-auto d-flex align-items-center gap-2 flex-wrap justify-content-end">
             <nav class="nav nav-segmented ec-segmented-control" role="tablist" [attr.aria-label]="ui.t('lang.label')">
-              <button class="nav-link"
-                      type="button"
-                      role="tab"
-                      [class.active]="ui.language() === 'pl'"
-                      [attr.aria-selected]="ui.language() === 'pl'"
-                      [attr.aria-current]="ui.language() === 'pl' ? 'page' : null"
-                      (click)="ui.setLanguage('pl')">PL</button>
-              <button class="nav-link"
-                      type="button"
-                      role="tab"
-                      [class.active]="ui.language() === 'en'"
-                      [attr.aria-selected]="ui.language() === 'en'"
-                      [attr.aria-current]="ui.language() === 'en' ? 'page' : null"
-                      (click)="ui.setLanguage('en')">EN</button>
+              <button class="nav-link" type="button" role="tab" [class.active]="ui.language() === 'pl'" (click)="ui.setLanguage('pl')">PL</button>
+              <button class="nav-link" type="button" role="tab" [class.active]="ui.language() === 'en'" (click)="ui.setLanguage('en')">EN</button>
             </nav>
-
             <nav class="nav nav-segmented ec-segmented-control" role="tablist" [attr.aria-label]="ui.t('theme.label')">
-              <button class="nav-link d-inline-flex align-items-center gap-2"
-                      type="button"
-                      role="tab"
-                      [class.active]="ui.theme() === 'dark'"
-                      [attr.aria-selected]="ui.theme() === 'dark'"
-                      [attr.aria-current]="ui.theme() === 'dark' ? 'page' : null"
-                      (click)="ui.setTheme('dark')">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-sm" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 .007a8.5 8.5 0 0 0 0 16.986a9 9 0 1 1 -.393 -17z"/></svg>
-                <span>{{ ui.t('theme.dark') }}</span>
-              </button>
-              <button class="nav-link d-inline-flex align-items-center gap-2"
-                      type="button"
-                      role="tab"
-                      [class.active]="ui.theme() === 'light'"
-                      [attr.aria-selected]="ui.theme() === 'light'"
-                      [attr.aria-current]="ui.theme() === 'light' ? 'page' : null"
-                      (click)="ui.setTheme('light')">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-sm" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 .007a9 9 0 1 0 0 17.986a9 9 0 0 0 -.393 -17.993z"/><path d="M12 3v1"/><path d="M12 20v1"/><path d="M3 12h1"/><path d="M20 12h1"/><path d="M5.6 5.6l.7 .7"/><path d="M17.7 17.7l.7 .7"/><path d="M17.7 6.3l.7 -.7"/><path d="M6.3 17.7l-.7 .7"/></svg>
-                <span>{{ ui.t('theme.light') }}</span>
-              </button>
+              <button class="nav-link" type="button" role="tab" [class.active]="ui.theme() === 'dark'" (click)="ui.setTheme('dark')">{{ ui.t('theme.dark') }}</button>
+              <button class="nav-link" type="button" role="tab" [class.active]="ui.theme() === 'light'" (click)="ui.setTheme('light')">{{ ui.t('theme.light') }}</button>
             </nav>
-
-            <div class="pv-navbar-user text-end me-1">
-              <div class="fw-semibold">{{ auth.currentUser()?.fullName }}</div>
-              <div class="small text-secondary">{{ auth.currentUser()?.email }}</div>
-            </div>
-
-            <button class="btn btn-danger btn-sm d-inline-flex align-items-center gap-2 px-3 flex-shrink-0" type="button" (click)="logout()">
-              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 8v-2a2 2 0 0 0 -2 -2h-6a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2 -2v-2"/><path d="M9 12h12l-3 -3"/><path d="M18 15l3 -3"/></svg>
-              <span>{{ ui.t('action.logout') }}</span>
-            </button>
+            <div class="pv-navbar-user text-end me-1"><div class="fw-semibold">{{ auth.currentUser()?.fullName }}</div><div class="small text-secondary">{{ auth.currentUser()?.email }}</div></div>
+            <button class="btn btn-danger btn-sm px-3 flex-shrink-0" type="button" (click)="logout()">{{ ui.t('action.logout') }}</button>
           </div>
         </div>
       </header>
 
-      <div class="pv-subnav">
-        <div class="container-xl">
-          <div class="pv-subnav-shell">
-            <div class="pv-subnav-main">
-              <nav class="pv-subnav-tabs nav nav-pills">
-                <a class="nav-link" routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{ ui.t('nav.dashboard') }}</a>
-                <a class="nav-link" routerLink="/expenses" routerLinkActive="active">{{ ui.t('nav.expenses') }}</a>
-                <a class="nav-link" routerLink="/stats" routerLinkActive="active">{{ ui.t('nav.stats') }}</a>
-                <a class="nav-link" routerLink="/merchants" routerLinkActive="active">{{ ui.t('nav.merchants') }}</a>
-                <a class="nav-link" routerLink="/reports" routerLinkActive="active">{{ ui.t('nav.reports') }}</a>
-                <a class="nav-link" routerLink="/categories" routerLinkActive="active">{{ ui.t('nav.categories') }}</a>
-                @if (auth.isAdmin()) {
-                  <a class="nav-link" routerLink="/admin" routerLinkActive="active">{{ ui.t('nav.admin') }}</a>
-                }
-              </nav>
-            </div>
-          </div>
-        </div>
-      </div>
+      <div class="pv-subnav"><div class="container-xl"><div class="pv-subnav-shell"><div class="pv-subnav-main"><nav class="pv-subnav-tabs nav nav-pills flex-wrap gap-1">
+        <a class="nav-link" routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{ ui.t('nav.dashboard') }}</a>
+        <a class="nav-link" routerLink="/expenses" routerLinkActive="active">{{ ui.t('nav.expenses') }}</a>
+        <a class="nav-link" routerLink="/stats" routerLinkActive="active">{{ ui.t('nav.stats') }}</a>
+        <a class="nav-link" routerLink="/cashflow" routerLinkActive="active">{{ ui.t('nav.cashflow') }}</a>
+        <a class="nav-link" routerLink="/budgets" routerLinkActive="active">{{ ui.t('nav.budgets') }}</a>
+        <a class="nav-link" routerLink="/recurring" routerLinkActive="active">{{ ui.t('nav.recurring') }}</a>
+        <a class="nav-link" routerLink="/merchants" routerLinkActive="active">{{ ui.t('nav.merchants') }}</a>
+        <a class="nav-link" routerLink="/reports" routerLinkActive="active">{{ ui.t('nav.reports') }}</a>
+        <a class="nav-link" routerLink="/categories" routerLinkActive="active">{{ ui.t('nav.categories') }}</a>
+        <a class="nav-link" routerLink="/integrations" routerLinkActive="active">{{ ui.t('nav.integrations') }}</a>
+        @if (auth.isAdmin()) { <a class="nav-link" routerLink="/admin" routerLinkActive="active">{{ ui.t('nav.admin') }}</a> }
+      </nav></div></div></div></div>
 
-      <div class="page-wrapper">
-        <div class="page-body">
-          <div class="container-xl">
-            <router-outlet></router-outlet>
-          </div>
-        </div>
-      </div>
+      <div class="page-wrapper"><div class="page-body"><div class="container-xl"><router-outlet></router-outlet></div></div></div>
     </div>
   `
 })
@@ -104,9 +52,5 @@ export class ShellComponent {
   readonly ui = inject(UiService);
   readonly appSettings = inject(AppSettingsService);
   private readonly router = inject(Router);
-
-  logout() {
-    this.auth.logout();
-    this.router.navigate(['/login']);
-  }
+  logout() { this.auth.logout(); this.router.navigate(['/login']); }
 }

web/src/app/shared/models.ts

@@ -39,6 +39,9 @@ export interface Proof {
   createdAt: string;
 }
 
+export type ExpenseStatus = 'DRAFT' | 'PENDING' | 'APPROVED' | 'REJECTED';
+export type DuplicateStatus = 'OPEN' | 'CONFIRMED' | 'DISMISSED';
+
 export interface Expense {
   id: string;
   title: string;
@@ -48,13 +51,24 @@ export interface Expense {
   merchant: string | null;
   paymentMethod: 'CARD' | 'CASH' | 'TRANSFER' | 'BLIK' | 'OTHER' | null;
   currency: string;
+  status: ExpenseStatus;
+  tags: string[];
+  customFields: Record<string, string>;
   possibleDuplicate: boolean;
+  duplicateStatus: DuplicateStatus | null;
+  duplicateReviewedAt: string | null;
+  recurringSourceId: string | null;
   category: Category;
   proofs: Proof[];
   createdAt: string;
   updatedAt: string;
 }
 
+export interface DuplicateGroup {
+  source: Expense;
+  matches: Expense[];
+}
+
 export interface StatsResponse {
   total: number;
   count: number;
@@ -62,6 +76,72 @@ export interface StatsResponse {
   topCategory: { categoryId: string; categoryName: string; total: number; count: number } | null;
   byCategory: Array<{ categoryId: string; categoryName: string; total: number; count: number }>;
   timeline: Array<{ label: string; total: number }>;
+  byTag?: Array<{ tag: string; total: number }>;
+  byStatus?: Array<{ status: string; count: number }>;
+}
+
+export interface CashflowResponse {
+  currentMonth: string;
+  actualCurrent: number;
+  totalBudget: number;
+  budgetUsagePercent: number;
+  duplicateCount: number;
+  pendingApproval: number;
+  forecastCurrentMonth: number;
+  trend: Array<{ label: string; actual: number; budget: number }>;
+  alerts: Array<{ id: string; name: string; usagePercent: number; spent: number; amount: number }>;
+  upcomingRecurring: Array<{ id: string; title: string; amount: number; nextRunDate: string; frequency: string }>;
+  statusSummary: Array<{ status: string; count: number }>;
+}
+
+export interface Budget {
+  id: string;
+  month: string;
+  name: string | null;
+  amount: number;
+  spent: number;
+  usagePercent: number;
+  alertLevel: number | null;
+  alertThresholds: number[];
+  isActive: boolean;
+  category: Category | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface BudgetListResponse {
+  month: string;
+  items: Budget[];
+  summary: {
+    totalBudget: number;
+    totalSpent: number;
+    alerts: Array<{ budgetId: string; message: string; usagePercent: number; level: number }>;
+  };
+}
+
+export interface RecurringExpense {
+  id: string;
+  title: string;
+  description: string | null;
+  amount: number;
+  merchant: string | null;
+  paymentMethod: 'CARD' | 'CASH' | 'TRANSFER' | 'BLIK' | 'OTHER' | null;
+  currency: string;
+  frequency: 'WEEKLY' | 'MONTHLY' | 'YEARLY';
+  intervalValue: number;
+  startDate: string;
+  nextRunDate: string;
+  lastRunDate: string | null;
+  endDate: string | null;
+  maxOccurrences: number | null;
+  generatedCount: number;
+  defaultStatus: 'DRAFT' | 'PENDING';
+  tags: string[];
+  customFields: Record<string, string>;
+  isActive: boolean;
+  category: Category;
+  createdAt: string;
+  updatedAt: string;
 }
 
 export interface AppSettings {
@@ -90,3 +170,61 @@ export interface ReportPreferences {
   sendToEmail: string | null;
   categoryIds: string[];
 }
+
+export interface ShoppingListIntegrationSettings {
+  enabled: boolean;
+  baseUrl: string;
+  hasToken: boolean;
+  authMode: 'bearer' | 'x-api-token' | 'both';
+  ownerId: string | null;
+  defaultListId: string | null;
+}
+
+export interface ShoppingListSummary {
+  total?: number;
+  amount?: number;
+  count?: number;
+  records?: number;
+  meta?: { total_amount?: number; total_count?: number; returned_count?: number; [key: string]: unknown };
+  lists?: Array<{ id?: string | number; title?: string; name?: string; total_amount?: number; total?: number; expense_count?: number; count?: number }>;
+  totals?: Array<{ list_id?: string | number; listId?: string | number; name?: string; total?: number; amount?: number; count?: number }>;
+  aggregates?: Array<{ list_id?: string | number; listId?: string | number; name?: string; total?: number; amount?: number; count?: number }>;
+  [key: string]: unknown;
+}
+
+export interface ShoppingListRef {
+  id: string | number;
+  name?: string;
+  title?: string;
+  created_at?: string;
+  categories?: string[];
+  owner_id?: string | number;
+  ownerId?: string | number;
+  owner?: { id?: string | number; username?: string; name?: string; fullName?: string; email?: string };
+  is_active?: boolean;
+  is_archived?: boolean;
+  [key: string]: unknown;
+}
+
+export interface ShoppingListExpenseItem {
+  id?: string | number;
+  expense_id?: string | number;
+  title?: string;
+  name?: string;
+  amount?: number;
+  total?: number;
+  created_at?: string;
+  added_at?: string;
+  expense_date?: string;
+  receipt_filename?: string;
+  list?: ShoppingListRef;
+  owner?: { id?: string | number; username?: string; name?: string; fullName?: string; email?: string };
+  [key: string]: unknown;
+}
+
+export interface ShoppingListTemplate {
+  id: string;
+  name?: string;
+  title?: string;
+  [key: string]: unknown;
+}

web/src/styles.scss

@@ -395,8 +395,16 @@ body {
 
 
 
+.badge {
+  color: #fff !important;
+}
+
+.badge * {
+  color: inherit !important;
+}
+
 .ec-picker-badge {
-  color: var(--tblr-body-color);
+  color: #fff !important;
   background: rgba(var(--tblr-secondary-rgb), 0.16);
   border: 1px solid rgba(var(--tblr-secondary-rgb), 0.18);
 }
@@ -407,8 +415,12 @@ body {
   border: 1px solid rgba(255, 255, 255, 0.28);
 }
 
+[data-bs-theme="dark"] .badge {
+  color: #fff !important;
+}
+
 [data-bs-theme="dark"] .ec-picker-badge {
-  color: #f8fafc;
+  color: #fff !important;
   background: rgba(248, 250, 252, 0.12);
   border-color: rgba(248, 250, 252, 0.18);
 }