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

View File

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

View File

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

View File

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

View File

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

View File

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