Add Expenses app
A UI based on [Budget Zen](https://github.com/BrunoBernardino/budgetzen-web) but slightly updated and adjusted for bewCloud. It also features a chart with available money and spent by budgets. This is useful for envelope-based budgeting.
This commit is contained in:
Bruno Bernardino
249
components/expenses/ExpenseModal.tsx
Normal file
249
components/expenses/ExpenseModal.tsx
Normal file
@@ -0,0 +1,249 @@
|
||||
import { useSignal } from '@preact/signals';
|
||||
import { useEffect } from 'preact/hooks';
|
||||
|
||||
import { Budget, Expense } from '/lib/types.ts';
|
||||
|
||||
import {
|
||||
RequestBody as SuggestionsRequestBody,
|
||||
ResponseBody as SuggestionsResponse,
|
||||
} from '/routes/api/expenses/auto-complete.tsx';
|
||||
|
||||
interface ExpenseModalProps {
|
||||
isOpen: boolean;
|
||||
expense: Expense | null;
|
||||
budgets: Budget[];
|
||||
onClickSave: (
|
||||
newExpenseCost: number,
|
||||
newExpenseDescription: string,
|
||||
newExpenseBudget: string,
|
||||
newExpenseDate: string,
|
||||
newExpenseIsRecurring: boolean,
|
||||
) => Promise<void>;
|
||||
onClickDelete: () => Promise<void>;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export default function ExpenseModal(
|
||||
{ isOpen, expense, budgets, onClickSave, onClickDelete, onClose }: ExpenseModalProps,
|
||||
) {
|
||||
const newExpenseCost = useSignal<number | ''>(expense?.cost ?? '');
|
||||
const newExpenseDescription = useSignal<string>(expense?.description ?? '');
|
||||
const newExpenseBudget = useSignal<string>(expense?.budget ?? 'Misc');
|
||||
const newExpenseDate = useSignal<string>(expense?.date ?? '');
|
||||
const newExpenseIsRecurring = useSignal<boolean>(expense?.is_recurring ?? false);
|
||||
const suggestions = useSignal<string[]>([]);
|
||||
const showSuggestions = useSignal<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (expense) {
|
||||
newExpenseCost.value = expense.cost;
|
||||
newExpenseDescription.value = expense.description;
|
||||
newExpenseBudget.value = expense.budget;
|
||||
newExpenseDate.value = expense.date;
|
||||
newExpenseIsRecurring.value = expense.is_recurring;
|
||||
showSuggestions.value = false;
|
||||
} else {
|
||||
newExpenseCost.value = '';
|
||||
newExpenseDescription.value = '';
|
||||
newExpenseBudget.value = 'Misc';
|
||||
newExpenseDate.value = '';
|
||||
newExpenseIsRecurring.value = false;
|
||||
showSuggestions.value = false;
|
||||
}
|
||||
}, [expense]);
|
||||
|
||||
const sortedBudgetNames = budgets.map((budget) => budget.name).sort();
|
||||
|
||||
if (!sortedBudgetNames.includes('Misc')) {
|
||||
sortedBudgetNames.push('Misc');
|
||||
sortedBudgetNames.sort();
|
||||
}
|
||||
|
||||
const fetchSuggestions = async (name: string) => {
|
||||
if (name.length < 2) {
|
||||
suggestions.value = [];
|
||||
showSuggestions.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const requestBody: SuggestionsRequestBody = {
|
||||
name,
|
||||
};
|
||||
|
||||
const response = await fetch(`/api/expenses/auto-complete`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(requestBody),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const result = await response.json() as SuggestionsResponse;
|
||||
suggestions.value = result.suggestions;
|
||||
showSuggestions.value = true;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch suggestions:', error);
|
||||
suggestions.value = [];
|
||||
showSuggestions.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<section
|
||||
class={`fixed ${isOpen ? 'block' : 'hidden'} z-40 w-screen h-screen inset-0 bg-gray-900 bg-opacity-60`}
|
||||
>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class={`fixed ${
|
||||
isOpen ? 'block' : 'hidden'
|
||||
} z-50 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 bg-slate-600 text-white rounded-md px-8 py-6 drop-shadow-lg overflow-y-scroll max-h-[80%]`}
|
||||
>
|
||||
<h1 class='text-2xl font-semibold my-5'>{expense ? 'Edit Expense' : 'Create New Expense'}</h1>
|
||||
<section class='py-5 my-2 border-y border-slate-500'>
|
||||
<fieldset class='block mb-2'>
|
||||
<label class='text-slate-300 block pb-1' for='expense_cost'>Cost</label>
|
||||
<input
|
||||
class='input-field'
|
||||
type='number'
|
||||
name='expense_cost'
|
||||
id='expense_cost'
|
||||
value={newExpenseCost.value}
|
||||
onInput={(event) => {
|
||||
newExpenseCost.value = Number(event.currentTarget.value);
|
||||
}}
|
||||
placeholder='10.99'
|
||||
/>
|
||||
</fieldset>
|
||||
|
||||
<fieldset class='block mb-2 relative'>
|
||||
<label class='text-slate-300 block pb-1' for='expense_description'>Description</label>
|
||||
<input
|
||||
class='input-field'
|
||||
type='text'
|
||||
name='expense_description'
|
||||
id='expense_description'
|
||||
value={newExpenseDescription.value}
|
||||
onInput={(event) => {
|
||||
newExpenseDescription.value = event.currentTarget.value;
|
||||
fetchSuggestions(event.currentTarget.value);
|
||||
}}
|
||||
onFocus={() => {
|
||||
if (suggestions.value.length > 0) {
|
||||
showSuggestions.value = true;
|
||||
}
|
||||
}}
|
||||
onBlur={() => {
|
||||
setTimeout(() => {
|
||||
showSuggestions.value = false;
|
||||
}, 200);
|
||||
}}
|
||||
placeholder='Lunch'
|
||||
/>
|
||||
{showSuggestions.value && suggestions.value.length > 0 && (
|
||||
<ul class='absolute z-50 w-full bg-slate-700 rounded-md mt-1 max-h-40 overflow-y-auto ring-1 ring-slate-800 shadow-lg'>
|
||||
{suggestions.value.map((suggestion) => (
|
||||
<li
|
||||
key={suggestion}
|
||||
class='px-4 py-2 hover:bg-slate-600 cursor-pointer'
|
||||
onClick={() => {
|
||||
newExpenseDescription.value = suggestion;
|
||||
showSuggestions.value = false;
|
||||
suggestions.value = [];
|
||||
}}
|
||||
>
|
||||
{suggestion}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</fieldset>
|
||||
|
||||
<fieldset class='block mb-2'>
|
||||
<label class='text-slate-300 block pb-1' for='expense_budget'>Budget</label>
|
||||
<select
|
||||
class='input-field'
|
||||
name='expense_budget'
|
||||
id='expense_budget'
|
||||
value={newExpenseBudget.value}
|
||||
onSelect={(event) => {
|
||||
newExpenseBudget.value = event.currentTarget.value;
|
||||
}}
|
||||
placeholder='Misc'
|
||||
>
|
||||
{sortedBudgetNames.map((budget) => (
|
||||
<option value={budget} selected={newExpenseBudget.value === budget}>{budget}</option>
|
||||
))}
|
||||
</select>
|
||||
</fieldset>
|
||||
|
||||
<fieldset class='block mb-2'>
|
||||
<label class='text-slate-300 block pb-1' for='expense_date'>Date</label>
|
||||
<input
|
||||
class='input-field'
|
||||
type='date'
|
||||
name='expense_date'
|
||||
id='expense_date'
|
||||
value={newExpenseDate.value}
|
||||
onInput={(event) => {
|
||||
newExpenseDate.value = event.currentTarget.value;
|
||||
}}
|
||||
placeholder='2025-01-01'
|
||||
/>
|
||||
</fieldset>
|
||||
|
||||
{expense
|
||||
? (
|
||||
<fieldset class='block mb-2'>
|
||||
<label class='text-slate-300 block pb-1' for='expense_is_recurring'>Is Recurring?</label>
|
||||
<input
|
||||
class='input-field'
|
||||
type='checkbox'
|
||||
name='expense_is_recurring'
|
||||
id='expense_is_recurring'
|
||||
value='true'
|
||||
checked={newExpenseIsRecurring.value}
|
||||
onInput={(event) => {
|
||||
newExpenseIsRecurring.value = event.currentTarget.checked;
|
||||
}}
|
||||
/>
|
||||
</fieldset>
|
||||
)
|
||||
: null}
|
||||
</section>
|
||||
<footer class='flex justify-between'>
|
||||
{expense
|
||||
? (
|
||||
<button
|
||||
class='px-5 py-2 bg-slate-600 hover:bg-red-600 text-white cursor-pointer rounded-md mr-2'
|
||||
onClick={() => onClickDelete()}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
)
|
||||
: null}
|
||||
<button
|
||||
class='px-5 py-2 bg-slate-600 hover:bg-slate-500 text-white cursor-pointer rounded-md mr-2'
|
||||
onClick={() =>
|
||||
onClickSave(
|
||||
newExpenseCost.value as number,
|
||||
newExpenseDescription.value,
|
||||
newExpenseBudget.value,
|
||||
newExpenseDate.value,
|
||||
newExpenseIsRecurring.value,
|
||||
)}
|
||||
>
|
||||
{expense ? 'Update' : 'Create'}
|
||||
</button>
|
||||
<button
|
||||
class='px-5 py-2 bg-slate-600 hover:bg-slate-500 text-white cursor-pointer rounded-md ml-2'
|
||||
onClick={() => onClose()}
|
||||
>
|
||||
{expense ? 'Cancel' : 'Close'}
|
||||
</button>
|
||||
</footer>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user