Onboarding fix (#31)
This commit is contained in:
Víctor Falcón
GitHub
parent
fe5a55b1be
commit
bf69d4fd3b
|
|
@ -11,7 +11,7 @@ const categoryTypes = [
|
|||
type: 'expense',
|
||||
name: 'Expense',
|
||||
icon: ArrowUpRight,
|
||||
description: 'Money going out',
|
||||
description: 'Money going out of an account to pay for something (e.g., groceries, rent, subscriptions). Decreases your balance.',
|
||||
examples: ['Food', 'Rent', 'Entertainment', 'Transport'],
|
||||
color: 'from-red-500 to-rose-500',
|
||||
bgColor: 'bg-red-50 dark:bg-red-900/20',
|
||||
|
|
@ -21,7 +21,7 @@ const categoryTypes = [
|
|||
type: 'income',
|
||||
name: 'Income',
|
||||
icon: ArrowDownLeft,
|
||||
description: 'Money coming in',
|
||||
description: 'Money coming into an account from a source (e.g., salary, refunds, interest). Increases your balance.',
|
||||
examples: ['Salary', 'Freelance', 'Investments', 'Refunds'],
|
||||
color: 'from-emerald-500 to-green-500',
|
||||
bgColor: 'bg-emerald-50 dark:bg-emerald-900/20',
|
||||
|
|
@ -31,7 +31,7 @@ const categoryTypes = [
|
|||
type: 'transfer',
|
||||
name: 'Transfer',
|
||||
icon: Repeat,
|
||||
description: 'Moving money between accounts',
|
||||
description: 'Moving money between accounts. It does not count in expenses or income charts.',
|
||||
examples: ['To savings', 'Credit card payment', 'Between banks'],
|
||||
color: 'from-blue-500 to-cyan-500',
|
||||
bgColor: 'bg-blue-50 dark:bg-blue-900/20',
|
||||
|
|
@ -46,48 +46,33 @@ export function StepCategoryTypes({ onContinue }: StepCategoryTypesProps) {
|
|||
icon={Tag}
|
||||
iconContainerClassName="bg-gradient-to-br from-violet-400 to-purple-500"
|
||||
title="Understanding Categories"
|
||||
description="Categories help you organize and understand your spending. Every transaction belongs to one of three types:"
|
||||
description="Every transaction belongs to one of three types:"
|
||||
/>
|
||||
|
||||
<div className="mb-8 grid w-full max-w-3xl gap-4 md:grid-cols-3">
|
||||
{categoryTypes.map((category) => (
|
||||
<div
|
||||
key={category.type}
|
||||
className="flex flex-col items-center rounded-xl border bg-card p-6 text-center"
|
||||
className="flex flex-col gap-2 items-start rounded-xl border bg-card p-6 text-center"
|
||||
>
|
||||
<div
|
||||
className={`mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-gradient-to-br ${category.color}`}
|
||||
>
|
||||
<category.icon className="h-7 w-7 text-white" />
|
||||
<div className='flex gap-2 flex-row items-center justify-center'>
|
||||
<div
|
||||
className={`flex size-5 items-center justify-center rounded-full bg-gradient-to-br ${category.color}`}
|
||||
>
|
||||
<category.icon className="size-4 text-white" />
|
||||
</div>
|
||||
<h3 className="font-semibold text-base">
|
||||
{category.name}
|
||||
</h3>
|
||||
</div>
|
||||
<h3 className="mb-2 text-xl font-semibold">
|
||||
{category.name}
|
||||
</h3>
|
||||
<p className="mb-4 text-sm text-muted-foreground">
|
||||
|
||||
<p className="w-full text-left text-muted-foreground/75">
|
||||
{category.description}
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-1">
|
||||
{category.examples.map((example) => (
|
||||
<span
|
||||
key={example}
|
||||
className={`rounded-full px-2 py-0.5 text-xs ${category.bgColor} ${category.textColor}`}
|
||||
>
|
||||
{example}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mb-8 max-w-xl rounded-lg border border-violet-200 bg-violet-50 p-4 dark:border-violet-900/50 dark:bg-violet-900/20">
|
||||
<p className="text-center text-sm text-violet-800 dark:text-violet-200">
|
||||
<strong>Tip:</strong> We've already set up 50+ common
|
||||
categories for you. You can customize them in the next step
|
||||
or anytime from settings.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<StepButton text="Continue" onClick={onContinue} />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ interface StepSmartRulesProps {
|
|||
|
||||
export function StepSmartRules({ onContinue }: StepSmartRulesProps) {
|
||||
return (
|
||||
<div className="flex animate-in flex-col items-center duration-500 fade-in slide-in-from-bottom-4">
|
||||
<div className="flex animate-in flex-col items-center pb-4 duration-500 fade-in slide-in-from-bottom-4">
|
||||
<StepHeader
|
||||
icon={Zap}
|
||||
iconContainerClassName="bg-gradient-to-br from-yellow-400 to-amber-500"
|
||||
|
|
@ -16,12 +16,14 @@ export function StepSmartRules({ onContinue }: StepSmartRulesProps) {
|
|||
description="Create rules to automatically categorize your transactions based on patterns you define."
|
||||
/>
|
||||
|
||||
<div className="mb-6 grid w-full max-w-2xl gap-4 md:grid-cols-2">
|
||||
<div className="mb-5 grid w-full max-w-2xl gap-4 md:grid-cols-2">
|
||||
<div className="rounded-xl border bg-card p-5">
|
||||
<div className="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-100 dark:bg-emerald-900/30">
|
||||
<Sparkles className="h-5 w-5 text-emerald-600 dark:text-emerald-400" />
|
||||
<div className="flex flex-row gap-2 items-center">
|
||||
<div className="mb-3 flex size-8 items-center justify-center rounded-lg bg-emerald-100 dark:bg-emerald-900/30">
|
||||
<Sparkles className="size-5 text-emerald-600 dark:text-emerald-400" />
|
||||
</div>
|
||||
<h3 className="mb-2 font-semibold">Pattern Matching</h3>
|
||||
</div>
|
||||
<h3 className="mb-2 font-semibold">Pattern Matching</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Create rules like "If description contains 'AMAZON',
|
||||
categorize as Shopping"
|
||||
|
|
@ -29,10 +31,12 @@ export function StepSmartRules({ onContinue }: StepSmartRulesProps) {
|
|||
</div>
|
||||
|
||||
<div className="rounded-xl border bg-card p-5">
|
||||
<div className="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 dark:bg-blue-900/30">
|
||||
<Zap className="h-5 w-5 text-blue-600 dark:text-blue-400" />
|
||||
<div className="flex flex-row gap-2 items-center">
|
||||
<div className="mb-3 flex size-8 items-center justify-center rounded-lg bg-blue-100 dark:bg-blue-900/30">
|
||||
<Zap className="size-5 text-blue-600 dark:text-blue-400" />
|
||||
</div>
|
||||
<h3 className="mb-2 font-semibold">Instant Application</h3>
|
||||
</div>
|
||||
<h3 className="mb-2 font-semibold">Instant Application</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Rules apply automatically when you import new
|
||||
transactions
|
||||
|
|
@ -40,11 +44,8 @@ export function StepSmartRules({ onContinue }: StepSmartRulesProps) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-8 w-full max-w-2xl rounded-xl border-2 border-amber-200 bg-amber-50 p-6 dark:border-amber-900/50 dark:bg-amber-900/20">
|
||||
<div className="mb-6 w-full max-w-2xl rounded-xl border-2 border-amber-200 bg-amber-50 p-6 dark:border-amber-900/50 dark:bg-amber-900/20">
|
||||
<div className="mb-4 flex items-center gap-3">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-amber-200 dark:bg-amber-800">
|
||||
<Shield className="h-6 w-6 text-amber-700 dark:text-amber-300" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-amber-900 dark:text-amber-100">
|
||||
Why No AI Auto-Categorization?
|
||||
|
|
|
|||
|
|
@ -24,7 +24,6 @@ const PRIMARY_STEPS: OnboardingStep[] = [
|
|||
'account-types',
|
||||
'create-account',
|
||||
'category-types',
|
||||
'customize-categories',
|
||||
'smart-rules',
|
||||
'more-accounts',
|
||||
'complete',
|
||||
|
|
|
|||
|
|
@ -105,7 +105,14 @@ export default function Onboarding({
|
|||
const handleImportComplete = async () => {
|
||||
// Sync after import to ensure data is consistent
|
||||
await sync();
|
||||
goToStep('more-accounts');
|
||||
|
||||
// After first account import, go to category steps
|
||||
// After subsequent accounts, go back to more-accounts
|
||||
if (createdAccounts.length === 1) {
|
||||
goToStep('category-types');
|
||||
} else {
|
||||
goToStep('more-accounts');
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddMoreAccounts = () => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue