aiolabs/webapp
8
0
Fork 0
Code Issues 65 Pull requests Projects Releases Packages Wiki Activity Actions

feat(libra): expense/income form UI fixes #139

Merged
padreug merged 4 commits from feat/libra-expense-ui-fixes into dev 2026-06-25 20:43:36 +00:00
Conversation 0 Commits 4 Files changed 5 +83 -78
2 changed files with 83 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 49e7afb0ab - Show all commits

feat(libra): put Amount and Currency on the same row

Prev Next 
Wrap the Amount and Currency fields in a two-column grid on both the
expense (AddExpense.vue) and income (AddIncome.vue) forms, and add
w-full to the currency SelectTrigger so the dropdown fills its column.
Tightens the vertical layout of the entry dialogs.
Padreug 2026-06-25 22:16:44 +02:00
commit 49e7afb0ab

70
src/accounting-app/views/AddIncome.vue
View file

@ -106,42 +106,44 @@
</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> <FormDescription>Amount in selected currency</FormDescription>
<SelectItem v-for="currency in availableCurrencies" :key="currency" :value="currency"> <FormMessage />
{{ currency }} </FormItem>
</SelectItem> </FormField>
</SelectContent>
</Select> <FormField v-slot="{ componentField }" name="currency">
<FormDescription>Currency for this income</FormDescription> <FormItem>
<FormMessage /> <FormLabel>Currency *</FormLabel>
</FormItem> <Select v-bind="componentField">
</FormField> <FormControl>
<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>
<FormDescription>Currency for this income</FormDescription>
<FormMessage />
</FormItem>
</FormField>
</div>
<FormField v-slot="{ componentField }" name="reference"> <FormField v-slot="{ componentField }" name="reference">
<FormItem> <FormItem>

91
src/modules/expenses/components/AddExpense.vue
View file

@ -113,52 +113,55 @@
</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> <FormDescription>
<SelectItem Amount in selected currency
v-for="currency in availableCurrencies" </FormDescription>
:key="currency" <FormMessage />
:value="currency" </FormItem>
> </FormField>
{{ currency }}
</SelectItem> <!-- Currency -->
</SelectContent> <FormField v-slot="{ componentField }" name="currency">
</Select> <FormItem>
<FormDescription> <FormLabel>Currency *</FormLabel>
Currency for this expense <Select v-bind="componentField">
</FormDescription> <FormControl>
<FormMessage /> <SelectTrigger class="w-full">
</FormItem> <SelectValue placeholder="Select currency" />
</FormField> </SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem
v-for="currency in availableCurrencies"
:key="currency"
:value="currency"
>
{{ currency }}
</SelectItem>
</SelectContent>
</Select>
<FormDescription>
Currency for this expense
</FormDescription>
<FormMessage />
</FormItem>
</FormField>
</div>
<!-- Reference (optional) --> <!-- Reference (optional) -->
<FormField v-slot="{ componentField }" name="reference"> <FormField v-slot="{ componentField }" name="reference">