From 74afe6da2d982003de0f02f3657a1bfbfc18f639 Mon Sep 17 00:00:00 2001
From: Thomas Huber <th-huber@web.de>
Date: Mon, 3 Aug 2026 10:51:57 +0200
Subject: [PATCH] feat: #94 Loan summary text for double checking in the create
 transaction dialog.

Also improved the formating of the dialog (white fields on gray background)

(cherry picked from commit 1c06ffaec38ff30190f261d86a2bdb327c45ecfa)
---
 src/components/form/form-date-picker.tsx      | 10 ++-
 src/components/form/form-number-input.tsx     | 12 ++-
 src/components/form/form-select.tsx           |  5 +-
 .../loans/loan-add-transaction-control.tsx    |  2 +-
 src/components/loans/transaction-dialog.tsx   | 32 ++++++-
 .../loans/transaction-form-fields.tsx         |  4 +
 .../loans/transaction-dialog-loan-context.ts  | 85 +++++++++++++++++++
 src/messages/de/dashboard.json                |  6 ++
 8 files changed, 145 insertions(+), 11 deletions(-)
 create mode 100644 src/lib/loans/transaction-dialog-loan-context.ts

diff --git a/src/components/form/form-date-picker.tsx b/src/components/form/form-date-picker.tsx
index 4f178e54..53ca41ef 100644
--- a/src/components/form/form-date-picker.tsx
+++ b/src/components/form/form-date-picker.tsx
@@ -10,9 +10,16 @@ interface FormDatePickerProps {
   label?: string;
   placeholder?: string;
   disabled?: (date: Date) => boolean;
+  className?: string;
 }
 
-export function FormDatePicker({ name, label, placeholder = 'Pick a date', disabled }: FormDatePickerProps) {
+export function FormDatePicker({
+  name,
+  label,
+  placeholder = 'Pick a date',
+  disabled,
+  className,
+}: FormDatePickerProps) {
   const form = useFormContext();
 
   return (
@@ -28,6 +35,7 @@ export function FormDatePicker({ name, label, placeholder = 'Pick a date', disab
             onChange={(date) => field.onChange(date ?? '')}
             placeholder={placeholder}
             calendarDisabled={disabled}
+            className={className}
           />
           <FormMessage />
         </FormItem>
diff --git a/src/components/form/form-number-input.tsx b/src/components/form/form-number-input.tsx
index be941910..2b493eaa 100644
--- a/src/components/form/form-number-input.tsx
+++ b/src/components/form/form-number-input.tsx
@@ -4,7 +4,7 @@ import { useFormContext } from 'react-hook-form';
 
 import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
-import { NumberParser } from '@/lib/utils';
+import { cn, NumberParser } from '@/lib/utils';
 
 interface FormNumberInputProps {
   name: string;
@@ -18,6 +18,7 @@ interface FormNumberInputProps {
   minimumFractionDigits?: number;
   maximumFractionDigits?: number;
   autoFocus?: boolean;
+  className?: string;
 }
 
 export function FormNumberInput({
@@ -32,6 +33,7 @@ export function FormNumberInput({
   minimumFractionDigits = 2,
   maximumFractionDigits = 2,
   autoFocus,
+  className,
 }: FormNumberInputProps) {
   const form = useFormContext();
 
@@ -77,9 +79,11 @@ export function FormNumberInput({
                   const value = parser.strip(event.target.value);
                   field.onChange(value);
                 }}
-                className={`[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none ${
-                  prefix ? 'pl-12 ' : ''
-                }`}
+                className={cn(
+                  '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
+                  prefix && 'pl-12',
+                  className,
+                )}
               />
             </div>
           </FormControl>
diff --git a/src/components/form/form-select.tsx b/src/components/form/form-select.tsx
index 39d2d99e..ec9857f5 100644
--- a/src/components/form/form-select.tsx
+++ b/src/components/form/form-select.tsx
@@ -13,6 +13,7 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { Select, SelectContent, SelectItem, SelectSeparator, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { cn } from '@/lib/utils';
 
 type SelectOption =
   | {
@@ -35,6 +36,7 @@ interface FormSelectProps {
   align?: 'start' | 'center' | 'end';
   customContent?: () => ReactNode;
   clearable?: boolean;
+  className?: string;
 }
 
 export function FormSelect({
@@ -49,6 +51,7 @@ export function FormSelect({
   align = 'start',
   customContent,
   clearable = false,
+  className,
 }: FormSelectProps) {
   const t = useTranslations('common');
   const form = useFormContext();
@@ -63,7 +66,7 @@ export function FormSelect({
             <div className="relative">
               <Select disabled={disabled} onValueChange={field.onChange} value={field.value || undefined}>
                 <FormControl>
-                  <SelectTrigger className={field.value ? '' : 'text-muted-foreground/60'}>
+                  <SelectTrigger className={cn(!field.value && 'text-muted-foreground/60', className)}>
                     <SelectValue placeholder={placeholder} />
                   </SelectTrigger>
                 </FormControl>
diff --git a/src/components/loans/loan-add-transaction-control.tsx b/src/components/loans/loan-add-transaction-control.tsx
index 669d0f34..5b1989e2 100644
--- a/src/components/loans/loan-add-transaction-control.tsx
+++ b/src/components/loans/loan-add-transaction-control.tsx
@@ -29,7 +29,7 @@ export function LoanAddTransactionControl({ loanId, loan, className }: LoanAddTr
         <Plus className="mr-2 h-4 w-4" />
         {commonT('terms.transaction')}
       </Button>
-      <TransactionDialog loanId={loanId} open={open} onOpenChange={setOpen} />
+      <TransactionDialog loanId={loanId} loan={loan} open={open} onOpenChange={setOpen} />
     </>
   );
 }
diff --git a/src/components/loans/transaction-dialog.tsx b/src/components/loans/transaction-dialog.tsx
index 55485ba1..dfae667a 100644
--- a/src/components/loans/transaction-dialog.tsx
+++ b/src/components/loans/transaction-dialog.tsx
@@ -2,7 +2,8 @@
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useQueryClient } from '@tanstack/react-query';
-import { useTranslations } from 'next-intl';
+import { Wallet } from 'lucide-react';
+import { useLocale, useTranslations } from 'next-intl';
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
@@ -10,21 +11,25 @@ import { toast } from 'sonner';
 import { addTransactionAction } from '@/actions/loans';
 import { FormCheckbox } from '@/components/form/form-checkbox';
 import { Button } from '@/components/ui/button';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Form } from '@/components/ui/form';
+import { getTransactionDialogLoanContext } from '@/lib/loans/transaction-dialog-loan-context';
 import { transactionFormSchema } from '@/lib/schemas/transaction';
+import type { LoanDetailsWithCalculations } from '@/types/loans';
 
 import { TransactionFormFields } from './transaction-form-fields';
 
 interface TransactionDialogProps {
   loanId: string;
+  loan: LoanDetailsWithCalculations;
   open: boolean;
   onOpenChange: (open: boolean) => void;
 }
 
-export function TransactionDialog({ loanId, open, onOpenChange }: TransactionDialogProps) {
+export function TransactionDialog({ loanId, loan, open, onOpenChange }: TransactionDialogProps) {
   const t = useTranslations('dashboard.loans');
   const commonT = useTranslations('common');
+  const locale = useLocale();
   const queryClient = useQueryClient();
 
   const defaultValues = {
@@ -61,11 +66,30 @@ export function TransactionDialog({ loanId, open, onOpenChange }: TransactionDia
     queryClient.invalidateQueries({ queryKey: ['loans'] });
   });
 
+  const { loanLabel, generalInfo, detailInfo } = getTransactionDialogLoanContext(
+    loan,
+    (key, values) => t(`transactions.${key}`, values),
+    locale,
+  );
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
-        <DialogHeader>
+        <DialogHeader className="space-y-3">
           <DialogTitle>{t('transactions.createTitle')}</DialogTitle>
+          <DialogDescription asChild className="text-foreground">
+            <div className="flex gap-3 rounded-md border border-border bg-white p-3 text-left text-sm text-foreground">
+              <Wallet className="mt-0.5 h-4 w-4 shrink-0 text-foreground" aria-hidden />
+              <div className="min-w-0 space-y-1 text-foreground">
+                <p>
+                  <span>{loanLabel}</span>
+                  {generalInfo ? ` ${generalInfo}` : null}
+                  {!generalInfo ? ` ${detailInfo}` : null}
+                </p>
+                {generalInfo ? <p>{detailInfo}</p> : null}
+              </div>
+            </div>
+          </DialogDescription>
         </DialogHeader>
 
         <Form {...form}>
diff --git a/src/components/loans/transaction-form-fields.tsx b/src/components/loans/transaction-form-fields.tsx
index 19b8ab22..acc5194a 100644
--- a/src/components/loans/transaction-form-fields.tsx
+++ b/src/components/loans/transaction-form-fields.tsx
@@ -100,6 +100,7 @@ export function TransactionFormFields({ loanId }: { loanId: string }) {
         name="type"
         label={t('transactions.type')}
         placeholder={commonT('ui.form.selectPlaceholder')}
+        className="bg-white"
         options={[
           createTypeOption(TransactionType.DEPOSIT, !!loanToDate && loanToDate?.deposits >= loanToDate.amount),
           'divider',
@@ -120,6 +121,7 @@ export function TransactionFormFields({ loanId }: { loanId: string }) {
         name="date"
         label={t('transactions.date')}
         placeholder={commonT('ui.form.enterPlaceholder')}
+        className="bg-white"
         disabled={(date) => {
           if (date > new Date()) {
             return true;
@@ -141,6 +143,7 @@ export function TransactionFormFields({ loanId }: { loanId: string }) {
         min={minAmount}
         max={maxAmount}
         prefix="€"
+        className="bg-white"
         disabled={
           !type ||
           type === TransactionType.TERMINATION ||
@@ -154,6 +157,7 @@ export function TransactionFormFields({ loanId }: { loanId: string }) {
         name="paymentType"
         label={t('transactions.paymentType')}
         placeholder={commonT('ui.form.selectPlaceholder')}
+        className="bg-white"
         options={[
           {
             value: 'BANK',
diff --git a/src/lib/loans/transaction-dialog-loan-context.ts b/src/lib/loans/transaction-dialog-loan-context.ts
new file mode 100644
index 00000000..b0c76e2e
--- /dev/null
+++ b/src/lib/loans/transaction-dialog-loan-context.ts
@@ -0,0 +1,85 @@
+import { SavingsRateType } from '@prisma/client';
+
+import { formatCurrency, formatDateShort } from '@/lib/utils';
+import type { LoanDetailsWithCalculations } from '@/types/loans';
+
+type LoanForTransactionContext = Pick<
+  LoanDetailsWithCalculations,
+  | 'loanNumber'
+  | 'isSavingsContract'
+  | 'savingsRateType'
+  | 'savingsMonthlyAmount'
+  | 'savingsDepositCount'
+  | 'requiredDepositsCount'
+  | 'outstandingDepositsCount'
+  | 'outstandingDepositSum'
+  | 'outstandingDepositSinceDate'
+>;
+
+type TranslateTransactions = (
+  key:
+    | 'createContextLoanLabel'
+    | 'createContextSavingsGeneralFixed'
+    | 'createContextSavingsGeneralVarying'
+    | 'createContextSavingsOutstanding'
+    | 'createContextRegularOutstanding'
+    | 'createContextNotOutstanding',
+  values?: Record<string, string | number>,
+) => string;
+
+export type TransactionDialogLoanContext = {
+  loanLabel: string;
+  generalInfo: string | null;
+  detailInfo: string;
+};
+
+export function getTransactionDialogLoanContext(
+  loan: LoanForTransactionContext,
+  t: TranslateTransactions,
+  locale: string,
+): TransactionDialogLoanContext {
+  const loanLabel = t('createContextLoanLabel', { loanNumber: loan.loanNumber });
+  const isOutstanding = loan.outstandingDepositsCount > 0 && loan.outstandingDepositSinceDate != null;
+  const date = isOutstanding ? formatDateShort(loan.outstandingDepositSinceDate, locale) : '';
+
+  if (!isOutstanding) {
+    return {
+      loanLabel,
+      generalInfo: null,
+      detailInfo: t('createContextNotOutstanding'),
+    };
+  }
+
+  if (loan.isSavingsContract) {
+    const total = loan.requiredDepositsCount || loan.savingsDepositCount || 0;
+    const current = Math.max(1, total - loan.outstandingDepositsCount + 1);
+    const count = total;
+    const detailInfo = t('createContextSavingsOutstanding', { current, total, date });
+
+    if (loan.savingsRateType === SavingsRateType.FIXED && loan.savingsMonthlyAmount != null) {
+      return {
+        loanLabel,
+        generalInfo: t('createContextSavingsGeneralFixed', {
+          count,
+          installmentAmount: formatCurrency(loan.savingsMonthlyAmount, locale),
+        }),
+        detailInfo,
+      };
+    }
+
+    return {
+      loanLabel,
+      generalInfo: t('createContextSavingsGeneralVarying', { count }),
+      detailInfo,
+    };
+  }
+
+  return {
+    loanLabel,
+    generalInfo: null,
+    detailInfo: t('createContextRegularOutstanding', {
+      amount: formatCurrency(loan.outstandingDepositSum ?? 0, locale),
+      date,
+    }),
+  };
+}
diff --git a/src/messages/de/dashboard.json b/src/messages/de/dashboard.json
index fc699ec6..6237d231 100644
--- a/src/messages/de/dashboard.json
+++ b/src/messages/de/dashboard.json
@@ -795,6 +795,12 @@
       "deleteError": "Fehler beim Löschen der Zahlung",
       "noTransactions": "Noch keine Zahlungen",
       "createTitle": "Neue Zahlung",
+      "createContextLoanLabel": "Kredit #{loanNumber}:",
+      "createContextSavingsGeneralFixed": "Ansparvertrag mit {count, plural, one {# Rate} other {# Raten}} zu {installmentAmount}",
+      "createContextSavingsGeneralVarying": "Ansparvertrag mit {count, plural, one {# Rate} other {# Raten}}",
+      "createContextSavingsOutstanding": "Zahlung {current} von {total} ausstehend seit {date}",
+      "createContextRegularOutstanding": "Ausstehende Zahlung über {amount} seit {date}",
+      "createContextNotOutstanding": "Keine Zahlung ausstehend",
       "createSuccess": "Zahlung erfolgreich erstellt",
       "createError": "Fehler beim Erstellen der Zahlung",
       "type": "Zahlungstyp",