feat: update layout for purchase and transaction components to improve readability of price display

This commit is contained in:
Yoga Pangestu 2026-08-16 20:56:14 +07:00
parent 919e8228d2
commit 99cd75120f
6 changed files with 48 additions and 36 deletions

View File

@ -1219,7 +1219,7 @@ export default function PurchaseCreate({ suppliers, rawMaterials }: Props) {
<Trash2 className="h-4 w-4 text-destructive" />
</Button>
</div>
<div className="flex items-center justify-between">
<div className="space-y-2">
<div className="flex items-center gap-2">
<Button
type="button"
@ -1250,11 +1250,13 @@ export default function PurchaseCreate({ suppliers, rawMaterials }: Props) {
<Plus className="h-4 w-4" />
</Button>
</div>
<span className="font-medium">
{formatCurrency(
item.price * item.quantity,
)}
</span>
<div className="text-right">
<span className="text-xs font-medium text-muted-foreground">
{formatCurrency(
item.price * item.quantity,
)}
</span>
</div>
</div>
</div>
))

View File

@ -655,7 +655,7 @@ export default function PurchaseEdit({
<Trash2 className="h-4 w-4 text-destructive" />
</Button>
</div>
<div className="flex items-center justify-between">
<div className="space-y-2">
<div className="flex items-center gap-2">
<Button
type="button"
@ -686,11 +686,13 @@ export default function PurchaseEdit({
<Plus className="h-4 w-4" />
</Button>
</div>
<span className="font-medium">
{formatCurrency(
item.price * item.quantity,
)}
</span>
<div className="text-right">
<span className="text-xs font-medium text-muted-foreground">
{formatCurrency(
item.price * item.quantity,
)}
</span>
</div>
</div>
</div>
))

View File

@ -625,7 +625,7 @@ return 0;
<Trash2 className="h-4 w-4 text-destructive" />
</Button>
</div>
<div className="flex items-center justify-between">
<div className="space-y-2">
<div className="flex items-center gap-2">
<Button
type="button"
@ -656,11 +656,13 @@ return 0;
<Plus className="h-4 w-4" />
</Button>
</div>
<span className="font-medium">
{formatCurrency(
item.price * item.quantity,
)}
</span>
<div className="text-right">
<span className="text-xs font-medium text-muted-foreground">
{formatCurrency(
item.price * item.quantity,
)}
</span>
</div>
</div>
</div>
))

View File

@ -567,7 +567,7 @@ return 0;
<Trash2 className="h-4 w-4 text-destructive" />
</Button>
</div>
<div className="flex items-center justify-between">
<div className="space-y-2">
<div className="flex items-center gap-2">
<Button
type="button"
@ -598,11 +598,13 @@ return 0;
<Plus className="h-4 w-4" />
</Button>
</div>
<span className="font-medium">
{formatCurrency(
item.price * item.quantity,
)}
</span>
<div className="text-right">
<span className="text-xs font-medium text-muted-foreground">
{formatCurrency(
item.price * item.quantity,
)}
</span>
</div>
</div>
</div>
))

View File

@ -1000,7 +1000,7 @@ export default function TransactionCreate({
<Trash2 className="h-4 w-4 text-destructive" />
</Button>
</div>
<div className="flex items-center justify-between">
<div className="space-y-2">
<div className="flex items-center gap-2">
<Button
type="button"
@ -1031,11 +1031,13 @@ export default function TransactionCreate({
<Plus className="h-4 w-4" />
</Button>
</div>
<span className="font-medium">
{formatCurrency(
item.price * item.quantity,
)}
</span>
<div className="text-right">
<span className="text-xs font-medium text-muted-foreground">
{formatCurrency(
item.price * item.quantity,
)}
</span>
</div>
</div>
</div>
))

View File

@ -980,7 +980,7 @@ export default function TransactionEdit({
<Trash2 className="h-4 w-4 text-destructive" />
</Button>
</div>
<div className="flex items-center justify-between">
<div className="space-y-2">
<div className="flex items-center gap-2">
<Button
type="button"
@ -1011,11 +1011,13 @@ export default function TransactionEdit({
<Plus className="h-4 w-4" />
</Button>
</div>
<span className="font-medium">
{formatCurrency(
item.price * item.quantity,
)}
</span>
<div className="text-right">
<span className="text-xs font-medium text-muted-foreground">
{formatCurrency(
item.price * item.quantity,
)}
</span>
</div>
</div>
</div>
))