Merge pull request 'feat(libra): expense/income form UI fixes' (#139) from feat/libra-expense-ui-fixes into dev

Reviewed-on: #139
This commit is contained in:
padreug 2026-06-25 20:43:35 +00:00
commit 9f8f2a233b
5 changed files with 81 additions and 90 deletions

View file

@ -96,60 +96,58 @@
<FormLabel>Description *</FormLabel> <FormLabel>Description *</FormLabel>
<FormControl> <FormControl>
<Textarea <Textarea
placeholder="e.g., Workshop fee, Donation, Service revenue" placeholder="A detailed description of the income source, and what it was for (event/project/etc)..."
v-bind="componentField" v-bind="componentField"
rows="3" rows="3"
/> />
</FormControl> </FormControl>
<FormDescription>Describe the source of this income</FormDescription>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
</FormField> </FormField>
<FormField v-slot="{ componentField }" name="amount"> <div class="grid grid-cols-2 gap-4">
<FormItem> <FormField v-slot="{ componentField }" name="amount">
<FormLabel>Amount *</FormLabel> <FormItem>
<FormControl> <FormLabel>Amount *</FormLabel>
<Input
type="number"
placeholder="0.00"
v-bind="componentField"
min="0.01"
step="0.01"
/>
</FormControl>
<FormDescription>Amount in selected currency</FormDescription>
<FormMessage />
</FormItem>
</FormField>
<FormField v-slot="{ componentField }" name="currency">
<FormItem>
<FormLabel>Currency *</FormLabel>
<Select v-bind="componentField">
<FormControl> <FormControl>
<SelectTrigger> <Input
<SelectValue placeholder="Select currency" /> type="number"
</SelectTrigger> placeholder="0.00"
v-bind="componentField"
min="0.01"
step="0.01"
/>
</FormControl> </FormControl>
<SelectContent> <FormMessage />
<SelectItem v-for="currency in availableCurrencies" :key="currency" :value="currency"> </FormItem>
{{ currency }} </FormField>
</SelectItem>
</SelectContent> <FormField v-slot="{ componentField }" name="currency">
</Select> <FormItem>
<FormDescription>Currency for this income</FormDescription> <FormLabel>Currency *</FormLabel>
<FormMessage /> <Select v-bind="componentField">
</FormItem> <FormControl>
</FormField> <SelectTrigger class="w-full">
<SelectValue placeholder="Select currency" />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem v-for="currency in availableCurrencies" :key="currency" :value="currency">
{{ currency }}
</SelectItem>
</SelectContent>
</Select>
<FormMessage />
</FormItem>
</FormField>
</div>
<FormField v-slot="{ componentField }" name="reference"> <FormField v-slot="{ componentField }" name="reference">
<FormItem> <FormItem>
<FormLabel>Reference</FormLabel> <FormLabel>Reference (optional)</FormLabel>
<FormControl> <FormControl>
<Input placeholder="e.g., Invoice #123, Receipt #456" v-bind="componentField" /> <Input placeholder="e.g., Invoice #123, Receipt #456" v-bind="componentField" />
</FormControl> </FormControl>
<FormDescription>Optional reference number or note</FormDescription>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
</FormField> </FormField>
@ -201,7 +199,6 @@ import { Textarea } from '@/components/ui/textarea'
import { Badge } from '@/components/ui/badge' import { Badge } from '@/components/ui/badge'
import { import {
FormControl, FormControl,
FormDescription,
FormField, FormField,
FormItem, FormItem,
FormLabel, FormLabel,

View file

@ -202,7 +202,7 @@ const messages: LocaleMessages = {
income: { income: {
title: 'Add Income', title: 'Add Income',
description: 'Submit income for the organization', description: 'Submit income for the organization',
selectAccount: 'Select the revenue account', selectAccount: 'Select the revenue account. Use the "Other" account if you\'re not sure.',
submitIncome: 'Submit Income', submitIncome: 'Submit Income',
notAvailable: 'Income submission is not yet available. This feature is coming soon.', notAvailable: 'Income submission is not yet available. This feature is coming soon.',
}, },

View file

@ -202,7 +202,7 @@ const messages: LocaleMessages = {
income: { income: {
title: 'A\u00f1adir ingreso', title: 'A\u00f1adir ingreso',
description: 'Enviar un ingreso para la organizaci\u00f3n', description: 'Enviar un ingreso para la organizaci\u00f3n',
selectAccount: 'Seleccionar la cuenta de ingresos', selectAccount: 'Seleccionar la cuenta de ingresos. Use la cuenta "Other" si no está seguro.',
submitIncome: 'Enviar ingreso', submitIncome: 'Enviar ingreso',
notAvailable: 'El registro de ingresos a\u00fan no est\u00e1 disponible. Esta funci\u00f3n llegar\u00e1 pronto.', notAvailable: 'El registro de ingresos a\u00fan no est\u00e1 disponible. Esta funci\u00f3n llegar\u00e1 pronto.',
}, },

View file

@ -202,7 +202,7 @@ const messages: LocaleMessages = {
income: { income: {
title: 'Ajouter un revenu', title: 'Ajouter un revenu',
description: 'Soumettre un revenu pour l\u2019organisation', description: 'Soumettre un revenu pour l\u2019organisation',
selectAccount: 'S\u00e9lectionner le compte de revenus', selectAccount: 'S\u00e9lectionner le compte de revenus. Utilisez le compte "Other" si vous n\'\u00eates pas s\u00fbr.',
submitIncome: 'Soumettre le revenu', submitIncome: 'Soumettre le revenu',
notAvailable: 'La saisie de revenus n\u2019est pas encore disponible. Cette fonctionnalit\u00e9 arrive bient\u00f4t.', notAvailable: 'La saisie de revenus n\u2019est pas encore disponible. Cette fonctionnalit\u00e9 arrive bient\u00f4t.',
}, },

View file

@ -113,66 +113,60 @@
</FormItem> </FormItem>
</FormField> </FormField>
<!-- Amount --> <!-- Amount + Currency -->
<FormField v-slot="{ componentField }" name="amount"> <div class="grid grid-cols-2 gap-4">
<FormItem> <!-- Amount -->
<FormLabel>Amount *</FormLabel> <FormField v-slot="{ componentField }" name="amount">
<FormControl> <FormItem>
<Input <FormLabel>Amount *</FormLabel>
type="number"
placeholder="0.00"
v-bind="componentField"
min="0.01"
step="0.01"
/>
</FormControl>
<FormDescription>
Amount in selected currency
</FormDescription>
<FormMessage />
</FormItem>
</FormField>
<!-- Currency -->
<FormField v-slot="{ componentField }" name="currency">
<FormItem>
<FormLabel>Currency *</FormLabel>
<Select v-bind="componentField">
<FormControl> <FormControl>
<SelectTrigger> <Input
<SelectValue placeholder="Select currency" /> type="number"
</SelectTrigger> placeholder="0.00"
v-bind="componentField"
min="0.01"
step="0.01"
/>
</FormControl> </FormControl>
<SelectContent> <FormMessage />
<SelectItem </FormItem>
v-for="currency in availableCurrencies" </FormField>
:key="currency"
:value="currency" <!-- Currency -->
> <FormField v-slot="{ componentField }" name="currency">
{{ currency }} <FormItem>
</SelectItem> <FormLabel>Currency *</FormLabel>
</SelectContent> <Select v-bind="componentField">
</Select> <FormControl>
<FormDescription> <SelectTrigger class="w-full">
Currency for this expense <SelectValue placeholder="Select currency" />
</FormDescription> </SelectTrigger>
<FormMessage /> </FormControl>
</FormItem> <SelectContent>
</FormField> <SelectItem
v-for="currency in availableCurrencies"
:key="currency"
:value="currency"
>
{{ currency }}
</SelectItem>
</SelectContent>
</Select>
<FormMessage />
</FormItem>
</FormField>
</div>
<!-- Reference (optional) --> <!-- Reference (optional) -->
<FormField v-slot="{ componentField }" name="reference"> <FormField v-slot="{ componentField }" name="reference">
<FormItem> <FormItem>
<FormLabel>Reference</FormLabel> <FormLabel>Reference (optional)</FormLabel>
<FormControl> <FormControl>
<Input <Input
placeholder="e.g., Invoice #123, Receipt #456" placeholder="e.g., Invoice #123, Receipt #456"
v-bind="componentField" v-bind="componentField"
/> />
</FormControl> </FormControl>
<FormDescription>
Optional reference number or note
</FormDescription>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
</FormField> </FormField>