@x47base/ch-finance-engine/src/ui/buchung.js

This package is an finance and accounting engine specificly made based on the swiss system.

import React, { useState } from 'react';
import AccountInput from '../ui/input';

const Buchung = ({ task, correctSolution }) => {
    const [buchungen, setBuchungen] = useState([]);
    const [currentBuchung, setCurrentBuchung] = useState({ account1: '', account2: '', amount: '' });
    const [feedback, setFeedback] = useState('');

    const handleSelectAccount1 = (account) => {
        setCurrentBuchung({ ...currentBuchung, account1: account.name });
    };

    const handleSelectAccount2 = (account) => {
        setCurrentBuchung({ ...currentBuchung, account2: account.name });
    };

    const handleAmountChange = (e) => {
        setCurrentBuchung({ ...currentBuchung, amount: e.target.value });
    };

    const handleAddBuchung = () => {
        setBuchungen([...buchungen, currentBuchung]);
        setCurrentBuchung({ account1: '', account2: '', amount: '' });
        verifyBuchungen([...buchungen, currentBuchung]);
    };

    const verifyBuchungen = (buchungen) => {
        if (buchungen.length !== correctSolution.length) {
            setFeedback('Die Anzahl der Buchungen stimmt nicht überein.');
            return;
        }

        for (let i = 0; i < buchungen.length; i++) {
            const userTx = buchungen[i];
            const correctTx = correctSolution[i];

            if (
                userTx.account1 !== correctTx.account1 ||
                userTx.account2 !== correctTx.account2 ||
                parseFloat(userTx.amount) !== correctTx.amount
            ) {
                setFeedback(`Fehler in Buchung ${i + 1}: ${JSON.stringify(userTx)}`);
                return;
            }
        }

        setFeedback('Alle Buchungen sind korrekt.');
    };

    return (
        <div className="container mx-auto p-4">
            <h1 className="text-2xl font-bold mb-4">Buchungstrainer</h1>
            <p>{task.description}</p>
            <div className="mt-4">
                <h2 className="text-xl font-semibold">Neue Buchung</h2>
                <div className="mt-2">
                    <AccountInput onSelect={handleSelectAccount1} />
                    <AccountInput onSelect={handleSelectAccount2} />
                    <input
                        type="number"
                        value={currentBuchung.amount}
                        onChange={handleAmountChange}
                        placeholder="Betrag"
                        className="border p-2 mt-2"
                    />
                    <button
                        className="bg-blue-500 text-white px-4 py-2 rounded mt-2"
                        onClick={handleAddBuchung}
                    >
                        Buchung hinzufügen
                    </button>
                </div>
            </div>
            <div className="mt-4">
                <h2 className="text-xl font-semibold">Buchungen</h2>
                <ul>
                    {buchungen.map((buchung, index) => (
                        <li key={index}>
                            {buchung.account1} / {buchung.account2}: {buchung.amount} CHF
                        </li>
                    ))}
                </ul>
            </div>
            <div className="mt-4">
                <h2 className="text-xl font-semibold">Feedback</h2>
                <p>{feedback}</p>
            </div>
        </div>
    );
};

export default Buchung;