From 99cd75120fba4449300b406d03336887372c201f Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Sun, 16 Aug 2026 20:56:14 +0700
Subject: [PATCH] feat: update layout for purchase and transaction components
 to improve readability of price display

---
 .../js/pages/admin/manage/purchase/create.tsx      | 14 ++++++++------
 resources/js/pages/admin/manage/purchase/edit.tsx  | 14 ++++++++------
 resources/js/pages/admin/manage/restock/create.tsx | 14 ++++++++------
 resources/js/pages/admin/manage/restock/edit.tsx   | 14 ++++++++------
 .../js/pages/admin/manage/transaction/create.tsx   | 14 ++++++++------
 .../js/pages/admin/manage/transaction/edit.tsx     | 14 ++++++++------
 6 files changed, 48 insertions(+), 36 deletions(-)

diff --git a/resources/js/pages/admin/manage/purchase/create.tsx b/resources/js/pages/admin/manage/purchase/create.tsx
index 43bf4e6..163bdf2 100644
--- a/resources/js/pages/admin/manage/purchase/create.tsx
+++ b/resources/js/pages/admin/manage/purchase/create.tsx
@@ -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>
                                 ))
diff --git a/resources/js/pages/admin/manage/purchase/edit.tsx b/resources/js/pages/admin/manage/purchase/edit.tsx
index 5c6122e..881b896 100644
--- a/resources/js/pages/admin/manage/purchase/edit.tsx
+++ b/resources/js/pages/admin/manage/purchase/edit.tsx
@@ -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>
                                 ))
diff --git a/resources/js/pages/admin/manage/restock/create.tsx b/resources/js/pages/admin/manage/restock/create.tsx
index ffebfcf..b8c8a94 100644
--- a/resources/js/pages/admin/manage/restock/create.tsx
+++ b/resources/js/pages/admin/manage/restock/create.tsx
@@ -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>
                                 ))
diff --git a/resources/js/pages/admin/manage/restock/edit.tsx b/resources/js/pages/admin/manage/restock/edit.tsx
index c2b2046..d8e3263 100644
--- a/resources/js/pages/admin/manage/restock/edit.tsx
+++ b/resources/js/pages/admin/manage/restock/edit.tsx
@@ -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>
                                 ))
diff --git a/resources/js/pages/admin/manage/transaction/create.tsx b/resources/js/pages/admin/manage/transaction/create.tsx
index 612d38e..da9df82 100644
--- a/resources/js/pages/admin/manage/transaction/create.tsx
+++ b/resources/js/pages/admin/manage/transaction/create.tsx
@@ -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>
                                 ))
diff --git a/resources/js/pages/admin/manage/transaction/edit.tsx b/resources/js/pages/admin/manage/transaction/edit.tsx
index 69d10d3..065dfe4 100644
--- a/resources/js/pages/admin/manage/transaction/edit.tsx
+++ b/resources/js/pages/admin/manage/transaction/edit.tsx
@@ -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>
                                 ))