mirror of
https://github.com/spliit-app/spliit.git
synced 2026-02-14 03:26:13 +01:00
Add support for group income (= negative expenses) (#158)
* Allow negative amount for expenses to be entered - an expense becomes an income - this does not affect calculations, i.e. an income can be split just like an expense * Incomes should not be reimbursements when entering a negative number - deselect 'isReimbursement' - hide reimbursement checkbox * Change captions when entering a negative number - "expense" becomes "income" - "paid" becomes "received" * Format incomes on expense list - replace "paid by" with "received by" * Format incomes on "Stats" tab - a group's or participants balance might be negative - in this case "spendings" will be "earnings" (display accordingly) - always display positive numbers - for active user: highlight spendings/earnings in red/green * Fix typo --------- Co-authored-by: Sebastien Castiel <sebastien@castiel.me>
This commit is contained in:
Stefan Hynst
GitHub
@@ -64,14 +64,15 @@ export type Props = {
|
||||
|
||||
const enforceCurrencyPattern = (value: string) =>
|
||||
value
|
||||
// replace first comma with #
|
||||
.replace(/[.,]/, '#')
|
||||
// remove all other commas
|
||||
.replace(/[.,]/g, '')
|
||||
// change back # to dot
|
||||
.replace(/#/, '.')
|
||||
// remove all non-numeric and non-dot characters
|
||||
.replace(/[^\d.]/g, '')
|
||||
.replace(/^\s*-/, '_') // replace leading minus with _
|
||||
.replace(/[.,]/, '#') // replace first comma with #
|
||||
.replace(/[-.,]/g, '') // remove other minus and commas characters
|
||||
.replace(/_/, '-') // change back _ to minus
|
||||
.replace(/#/, '.') // change back # to dot
|
||||
.replace(/[^-\d.]/g, '') // remove all non-numeric characters
|
||||
|
||||
const capitalize = (value: string) =>
|
||||
value.charAt(0).toUpperCase() + value.slice(1)
|
||||
|
||||
const getDefaultSplittingOptions = (group: Props['group']) => {
|
||||
const defaultValue = {
|
||||
@@ -243,14 +244,16 @@ export function ExpenseForm({
|
||||
return onSubmit(values, activeUserId ?? undefined)
|
||||
}
|
||||
|
||||
const [isIncome, setIsIncome] = useState(Number(form.getValues().amount) < 0)
|
||||
const sExpense = isIncome ? 'income' : 'expense'
|
||||
const sPaid = isIncome ? 'received' : 'paid'
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(submit)}>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>
|
||||
{isCreate ? <>Create expense</> : <>Edit expense</>}
|
||||
</CardTitle>
|
||||
<CardTitle>{(isCreate ? 'Create ' : 'Edit ') + sExpense}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="grid sm:grid-cols-2 gap-6">
|
||||
<FormField
|
||||
@@ -258,7 +261,7 @@ export function ExpenseForm({
|
||||
name="title"
|
||||
render={({ field }) => (
|
||||
<FormItem className="">
|
||||
<FormLabel>Expense title</FormLabel>
|
||||
<FormLabel>{capitalize(sExpense)} title</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="Monday evening restaurant"
|
||||
@@ -278,7 +281,7 @@ export function ExpenseForm({
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Enter a description for the expense.
|
||||
Enter a description for the {sExpense}.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
@@ -290,7 +293,7 @@ export function ExpenseForm({
|
||||
name="expenseDate"
|
||||
render={({ field }) => (
|
||||
<FormItem className="sm:order-1">
|
||||
<FormLabel>Expense date</FormLabel>
|
||||
<FormLabel>{capitalize(sExpense)} date</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
className="date-base"
|
||||
@@ -302,7 +305,7 @@ export function ExpenseForm({
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Enter the date the expense was made.
|
||||
Enter the date the {sExpense} was {sPaid}.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
@@ -319,15 +322,17 @@ export function ExpenseForm({
|
||||
<span>{group.currency}</span>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
className="text-base max-w-[120px]"
|
||||
type="text"
|
||||
inputMode="decimal"
|
||||
step={0.01}
|
||||
placeholder="0.00"
|
||||
onChange={(event) =>
|
||||
onChange(enforceCurrencyPattern(event.target.value))
|
||||
}
|
||||
onChange={(event) => {
|
||||
const v = enforceCurrencyPattern(event.target.value)
|
||||
const income = Number(v) < 0
|
||||
setIsIncome(income)
|
||||
if (income) form.setValue('isReimbursement', false)
|
||||
onChange(v)
|
||||
}}
|
||||
onFocus={(e) => {
|
||||
// we're adding a small delay to get around safaris issue with onMouseUp deselecting things again
|
||||
const target = e.currentTarget
|
||||
@@ -339,23 +344,25 @@ export function ExpenseForm({
|
||||
</div>
|
||||
<FormMessage />
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="isReimbursement"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row gap-2 items-center space-y-0 pt-2">
|
||||
<FormControl>
|
||||
<Checkbox
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
<div>
|
||||
<FormLabel>This is a reimbursement</FormLabel>
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
{!isIncome && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="isReimbursement"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row gap-2 items-center space-y-0 pt-2">
|
||||
<FormControl>
|
||||
<Checkbox
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
<div>
|
||||
<FormLabel>This is a reimbursement</FormLabel>
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
@@ -375,7 +382,7 @@ export function ExpenseForm({
|
||||
isLoading={isCategoryLoading}
|
||||
/>
|
||||
<FormDescription>
|
||||
Select the expense category.
|
||||
Select the {sExpense} category.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
@@ -387,7 +394,7 @@ export function ExpenseForm({
|
||||
name="paidBy"
|
||||
render={({ field }) => (
|
||||
<FormItem className="sm:order-5">
|
||||
<FormLabel>Paid by</FormLabel>
|
||||
<FormLabel>{capitalize(sPaid)} by</FormLabel>
|
||||
<Select
|
||||
onValueChange={field.onChange}
|
||||
defaultValue={getSelectedPayer(field)}
|
||||
@@ -404,7 +411,7 @@ export function ExpenseForm({
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormDescription>
|
||||
Select the participant who paid the expense.
|
||||
Select the participant who {sPaid} the {sExpense}.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
@@ -428,7 +435,7 @@ export function ExpenseForm({
|
||||
<Card className="mt-4">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex justify-between">
|
||||
<span>Paid for</span>
|
||||
<span>{capitalize(sPaid)} for</span>
|
||||
<Button
|
||||
variant="link"
|
||||
type="button"
|
||||
@@ -461,7 +468,7 @@ export function ExpenseForm({
|
||||
</Button>
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Select who the expense was paid for.
|
||||
Select who the {sExpense} was {sPaid} for.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
@@ -661,7 +668,7 @@ export function ExpenseForm({
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Select how to split the expense.
|
||||
Select how to split the {sExpense}.
|
||||
</FormDescription>
|
||||
</FormItem>
|
||||
)}
|
||||
@@ -698,7 +705,7 @@ export function ExpenseForm({
|
||||
<span>Attach documents</span>
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
See and attach receipts to the expense.
|
||||
See and attach receipts to the {sExpense}.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
|
||||
Reference in New Issue
Block a user