From 7fbf5dc6c21807b350b212d0ed9654ba8cc3bd36 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Thu, 30 Apr 2026 13:41:43 +0700
Subject: [PATCH] feat: conditionally render payroll card grid only when data
 is available

---
 .../js/pages/admin/finance/payroll/index.tsx  | 32 +++++++++++--------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/resources/js/pages/admin/finance/payroll/index.tsx b/resources/js/pages/admin/finance/payroll/index.tsx
index 41ae740..90b4395 100644
--- a/resources/js/pages/admin/finance/payroll/index.tsx
+++ b/resources/js/pages/admin/finance/payroll/index.tsx
@@ -76,21 +76,25 @@ export default function PayrollIndex({
                 )}
             </div>
 
-            <div className="flex flex-col gap-3">
-                <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-                    {currentMonthPayrolls.map((payroll) => (
-                        <PayrollCard
-                            key={payroll.id}
-                            payroll={payroll}
-                            onClick={() => {
-                                if (hasPermission('Edit:PayrollAdjustment')) {
-                                    onEdit(payroll);
-                                }
-                            }}
-                        />
-                    ))}
+            {currentMonthPayrolls.length > 0 && (
+                <div className="flex flex-col gap-3">
+                    <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                        {currentMonthPayrolls.map((payroll) => (
+                            <PayrollCard
+                                key={payroll.id}
+                                payroll={payroll}
+                                onClick={() => {
+                                    if (
+                                        hasPermission('Edit:PayrollAdjustment')
+                                    ) {
+                                        onEdit(payroll);
+                                    }
+                                }}
+                            />
+                        ))}
+                    </div>
                 </div>
-            </div>
+            )}
 
             <PayrollFormModal
                 isOpen={isFormOpen}