{
+ // Always return to create-account so the user can add more accounts or continue
goToStep('create-account');
};
- const handleFinishOnboarding = () => {
- goToStep('complete');
- };
-
const renderStep = () => {
const lastAccount = createdAccounts[createdAccounts.length - 1];
@@ -154,13 +149,13 @@ export default function Onboarding({ banks, accounts }: OnboardingProps) {
case 'create-account':
return (
{
- goToStep('more-accounts');
- }}
+ onContinue={goNext}
/>
);
@@ -178,6 +173,9 @@ export default function Onboarding({ banks, accounts }: OnboardingProps) {
case 'smart-rules':
return ('idle');
- const [categoryUsageOrder, setCategoryUsageOrder] = useState([]);
- const [lastSelectedCategory, setLastSelectedCategory] =
- useState(null);
- const [searchValue, setSearchValue] = useState('');
- const [rulesDialogOpen, setRulesDialogOpen] = useState(false);
- const [encryptionKey, setEncryptionKey] = useState(null);
- const commandInputRef = useRef(null);
-
- const automationRules = useMemo(
- () =>
- sharedAutomationRules.map((rule) => ({
- ...rule,
- rules_json:
- typeof rule.rules_json === 'string'
- ? JSON.parse(rule.rules_json)
- : rule.rules_json,
- })) as AutomationRule[],
- [sharedAutomationRules],
- );
-
- useEffect(() => {
- setCategoryUsageOrder(getCategoryUsageOrder());
- }, []);
-
- useEffect(() => {
- if (!isLoading && animationState === 'idle') {
- commandInputRef.current?.focus();
- }
- }, [isLoading, animationState, currentIndex]);
-
- // Decrypt transactions received from the backend and build the initial list
- useEffect(() => {
- async function decryptTransactions() {
- setIsLoading(true);
- try {
- const accountsMap = new Map(
- accounts.map((account) => [account.id, account]),
- );
- const banksMap = new Map(banks.map((bank) => [bank.id, bank]));
-
- const keyString = getStoredKey();
- let key: CryptoKey | null = null;
-
- if (keyString && isKeySet) {
- try {
- key = await importKey(keyString);
- setEncryptionKey(key);
- } catch (error) {
- console.error(
- 'Failed to import encryption key:',
- error,
- );
- }
- }
-
- const decrypted = await Promise.all(
- initialTransactions.map(async (transaction) => {
- try {
- let decryptedDescription = '';
- let decryptedNotes: string | null = null;
-
- if (!transaction.description_iv) {
- decryptedDescription = transaction.description;
- decryptedNotes = transaction.notes || null;
- } else if (key) {
- try {
- decryptedDescription = await decrypt(
- transaction.description,
- key,
- transaction.description_iv,
- );
-
- if (
- transaction.notes &&
- transaction.notes_iv
- ) {
- decryptedNotes = await decrypt(
- transaction.notes,
- key,
- transaction.notes_iv,
- );
- }
- } catch (error) {
- console.error(
- 'Failed to decrypt transaction:',
- transaction.id,
- error,
- );
- }
- }
-
- const account = accountsMap.get(
- transaction.account_id,
- );
- const bank = account?.bank?.id
- ? banksMap.get(account.bank.id)
- : undefined;
-
- return {
- ...transaction,
- decryptedDescription,
- decryptedNotes,
- account,
- category: null,
- bank,
- } as DecryptedTransaction;
- } catch (error) {
- console.error(
- 'Failed to process transaction:',
- transaction.id,
- error,
- );
- return null;
- }
- }),
- );
-
- const validTransactions = decrypted.filter(
- (transaction): transaction is DecryptedTransaction =>
- transaction !== null,
- );
-
- validTransactions.sort((a, b) => {
- const dateA = parseISO(a.transaction_date).getTime();
- const dateB = parseISO(b.transaction_date).getTime();
- return dateB - dateA;
- });
-
- setUncategorizedTransactions(validTransactions);
- } catch (error) {
- console.error(
- 'Failed to load uncategorized transactions:',
- error,
- );
- } finally {
- setIsLoading(false);
- }
- }
-
- decryptTransactions();
- }, [initialTransactions, accounts, banks, isKeySet]);
-
- const currentTransaction = uncategorizedTransactions[currentIndex];
- const remainingCount = uncategorizedTransactions.length - currentIndex;
- const isComplete = currentIndex >= uncategorizedTransactions.length;
-
- const sortedCategories = useMemo(() => {
- return sortCategoriesByUsage(categories, categoryUsageOrder);
- }, [categories, categoryUsageOrder]);
-
- const applyAutomationRulesToQueue = useCallback(async () => {
- if (
- !encryptionKey ||
- !automationRules.length ||
- uncategorizedTransactions.length === 0
- ) {
- return;
- }
-
- const remainingTransactions =
- uncategorizedTransactions.slice(currentIndex);
- let categorizedCount = 0;
- const newUncategorizedList: DecryptedTransaction[] = [
- ...uncategorizedTransactions.slice(0, currentIndex),
- ];
-
- for (const transaction of remainingTransactions) {
- const result = await evaluateRules(
- transaction,
- automationRules,
- categories,
- accounts,
- banks,
- encryptionKey,
- );
-
- if (result?.categoryId) {
- try {
- await transactionSyncService.update(transaction.id, {
- category_id: result.categoryId,
- });
- categorizedCount++;
-
- const matchedCategory = categories.find(
- (c) => c.id === result.categoryId,
- );
- if (matchedCategory) {
- updateCategoryUsageOrder(matchedCategory.id);
- }
- } catch (error) {
- console.error(
- 'Failed to apply automation rule to transaction:',
- error,
- );
- newUncategorizedList.push(transaction);
- }
- } else {
- newUncategorizedList.push(transaction);
- }
- }
-
- if (categorizedCount > 0) {
- setCategoryUsageOrder(getCategoryUsageOrder());
- setUncategorizedTransactions(newUncategorizedList);
- setCurrentIndex(
- Math.min(currentIndex, newUncategorizedList.length),
- );
- }
-
- return categorizedCount;
- }, [
- encryptionKey,
- automationRules,
+ const {
+ isLoading,
+ isComplete,
uncategorizedTransactions,
+ currentTransaction,
currentIndex,
+ remainingCount,
+ animationState,
+ lastSelectedCategory,
+ sortedCategories,
+ searchValue,
+ setSearchValue,
+ rulesDialogOpen,
+ setRulesDialogOpen,
+ handleCategorySelect,
+ handleSkip,
+ handlePrevious,
+ handleRulesDialogClose,
+ commandInputRef,
+ } = useCategorizeTransactions({
categories,
accounts,
banks,
- ]);
+ transactions,
+ });
- const handleRulesDialogClose = useCallback(
- async (open: boolean) => {
- setRulesDialogOpen(open);
+ const backHref = categorizeRoute.url()?.replace('/categorize', '') ?? '';
- if (!open) {
- await applyAutomationRulesToQueue();
- commandInputRef.current?.focus();
- }
- },
- [applyAutomationRulesToQueue],
- );
-
- const handleCategorySelect = useCallback(
- async (category: Category) => {
- if (!currentTransaction || animationState !== 'idle') return;
-
- setLastSelectedCategory(category);
- setAnimationState('exiting');
-
- try {
- await transactionSyncService.update(currentTransaction.id, {
- category_id: category.id,
- });
-
- updateCategoryUsageOrder(category.id);
- setCategoryUsageOrder(getCategoryUsageOrder());
- } catch (error) {
- console.error('Failed to update transaction:', error);
- setAnimationState('idle');
- return;
- }
-
- setTimeout(() => {
- setAnimationState('success');
-
- setTimeout(() => {
- setCurrentIndex((prev) => prev + 1);
- setAnimationState('entering');
- setSearchValue('');
-
- setTimeout(() => {
- setAnimationState('idle');
- setLastSelectedCategory(null);
- commandInputRef.current?.focus();
- }, 300);
- }, 400);
- }, 300);
- },
- [currentTransaction, animationState],
- );
-
- const handleSkip = useCallback(() => {
- if (animationState !== 'idle') return;
-
- setAnimationState('exiting');
-
- setTimeout(() => {
- setCurrentIndex((prev) => prev + 1);
- setAnimationState('entering');
-
- setTimeout(() => {
- setAnimationState('idle');
- }, 300);
- }, 300);
- }, [animationState]);
-
- const handlePrevious = useCallback(() => {
- if (animationState !== 'idle' || currentIndex === 0) return;
-
- setAnimationState('exiting');
-
- setTimeout(() => {
- setCurrentIndex((prev) => prev - 1);
- setAnimationState('entering');
-
- setTimeout(() => {
- setAnimationState('idle');
- }, 300);
- }, 300);
- }, [animationState, currentIndex]);
-
- // Keyboard shortcuts
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
- // Ctrl + R for rules dialog
if (e.ctrlKey && e.key === 'r') {
e.preventDefault();
setRulesDialogOpen(true);
}
- // Ctrl + N for skip (next)
if (e.ctrlKey && e.key === 'n') {
e.preventDefault();
if (animationState === 'idle' && currentTransaction) {
handleSkip();
}
}
- // Ctrl + B for previous (back)
if (e.ctrlKey && e.key === 'b') {
e.preventDefault();
if (animationState === 'idle' && currentIndex > 0) {
handlePrevious();
}
}
- // Escape to go back to transactions
if (e.key === 'Escape' && !rulesDialogOpen) {
e.preventDefault();
- const transactionsUrl = categorizeRoute
- .url()
- ?.replace('/categorize', '');
- if (transactionsUrl) {
- router.visit(transactionsUrl);
+ if (backHref) {
+ router.visit(backHref);
}
}
};
@@ -461,6 +100,8 @@ export default function CategorizeTransactions({
handlePrevious,
currentIndex,
rulesDialogOpen,
+ setRulesDialogOpen,
+ backHref,
]);
if (isLoading) {
@@ -504,12 +145,7 @@ export default function CategorizeTransactions({
)}
- trigger('light')}
- >
+ trigger('light')}>