diff --git a/src/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab.tsx b/src/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab.tsx
index 75ac0a57..68aa15d1 100644
--- a/src/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab.tsx
+++ b/src/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab.tsx
@@ -26,14 +26,21 @@ import Menu from '@/components/menu/Menu';
 import { generatePurchasesPerSupplierPDF } from '@/components/pages/report/logistic-stock/export/PurchasesPerSupplierExport';
 import toast from 'react-hot-toast';
 import * as XLSX from 'xlsx';
+import { Supplier } from '@/types/api/master-data/supplier';
 
 interface Totals {
-  totalQty: number;
-  totalPrice: number;
-  totalPurchaseAmount: number;
-  totalTransport: number;
-  totalValueTransport: number;
-  totalJumlah: number;
+  total_qty: number;
+  total_price: number;
+  total_purchase_amount: number;
+  total_transport: number;
+  total_value_transport: number;
+  total_jumlah: number;
+}
+
+interface GroupedSupplierData {
+  id: number;
+  supplier: Supplier;
+  items: LogisticPurchasePerSupplierReport['rows'];
 }
 
 const PurchasesPerSupplierTab = () => {
@@ -314,6 +321,7 @@ const PurchasesPerSupplierTab = () => {
     [allDataForExport]
   );
 
+  // ===== EXPORT HANDLERS =====
   const handleExportExcel = useCallback(() => {
     if (allExportData.length === 0) {
       toast.error('Tidak ada data untuk diekspor.');
@@ -352,23 +360,23 @@ const PurchasesPerSupplierTab = () => {
         ([supplierName, supplierData]) => {
           const totals = supplierData.reduce(
             (acc, item) => ({
-              totalQty: acc.totalQty + (item.qty || 0),
-              totalPrice: acc.totalPrice + (item.unit_price || 0),
-              totalPurchaseAmount:
-                acc.totalPurchaseAmount + (item.purchase_value || 0),
-              totalTransport:
-                acc.totalTransport + (item.transport_unit_price || 0),
-              totalValueTransport:
-                acc.totalValueTransport + (item.transport_value || 0),
-              totalJumlah: acc.totalJumlah + (item.total_amount || 0),
+              total_qty: acc.total_qty + (item.qty || 0),
+              total_price: acc.total_price + (item.unit_price || 0),
+              total_purchase_amount:
+                acc.total_purchase_amount + (item.purchase_value || 0),
+              total_transport:
+                acc.total_transport + (item.transport_unit_price || 0),
+              total_value_transport:
+                acc.total_value_transport + (item.transport_value || 0),
+              total_jumlah: acc.total_jumlah + (item.total_amount || 0),
             }),
             {
-              totalQty: 0,
-              totalPrice: 0,
-              totalPurchaseAmount: 0,
-              totalTransport: 0,
-              totalValueTransport: 0,
-              totalJumlah: 0,
+              total_qty: 0,
+              total_price: 0,
+              total_purchase_amount: 0,
+              total_transport: 0,
+              total_value_transport: 0,
+              total_jumlah: 0,
             }
           );
 
@@ -401,12 +409,12 @@ const PurchasesPerSupplierTab = () => {
             'No. Referensi': '',
             'Nama Produk': '',
             Tujuan: '',
-            QTY: totals.totalQty,
-            'Harga Beli (Rp)': totals.totalPrice,
-            'Value Harga Beli (Rp)': totals.totalPurchaseAmount,
-            'Transport (Rp)': totals.totalTransport,
-            'Value Transport (Rp)': totals.totalValueTransport,
-            'Jumlah (Rp)': totals.totalJumlah,
+            QTY: totals.total_qty,
+            'Harga Beli (Rp)': totals.total_price,
+            'Value Harga Beli (Rp)': totals.total_purchase_amount,
+            'Transport (Rp)': totals.total_transport,
+            'Value Transport (Rp)': totals.total_value_transport,
+            'Jumlah (Rp)': totals.total_jumlah,
             Ekspedisi: '',
             'Surat Jalan': '',
           });
@@ -514,15 +522,13 @@ const PurchasesPerSupplierTab = () => {
     }
   };
 
-  interface GroupedSupplierData {
-    id: number;
-    supplier: {
-      id: number;
-      name: string;
-    };
-    items: LogisticPurchasePerSupplierReport['rows'];
-  }
+  const handlePrevPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
 
+  // ===== TABLE COLUMNS DEFINITION =====
   const groupedData = useMemo(() => {
     const groups: { [key: number]: GroupedSupplierData } = {};
 
@@ -542,13 +548,6 @@ const PurchasesPerSupplierTab = () => {
 
     return Object.values(groups);
   }, [data]);
-
-  const handlePrevPage = () => {
-    if (currentPage > 1) {
-      setCurrentPage(currentPage - 1);
-    }
-  };
-
   const getTableColumns = (
     totals: Totals
   ): ColumnDef<LogisticPurchasePerSupplierReport['rows'][0]>[] => {
@@ -617,7 +616,7 @@ const PurchasesPerSupplierTab = () => {
         },
         footer: () => (
           <div className='text-right font-semibold text-gray-900'>
-            {formatNumber(totals.totalQty)}
+            {formatNumber(totals.total_qty)}
           </div>
         ),
       },
@@ -631,7 +630,7 @@ const PurchasesPerSupplierTab = () => {
         },
         footer: () => (
           <div className='text-right font-semibold text-gray-900'>
-            {formatCurrency(totals.totalPrice)}
+            {formatCurrency(totals.total_price)}
           </div>
         ),
       },
@@ -645,7 +644,7 @@ const PurchasesPerSupplierTab = () => {
         },
         footer: () => (
           <div className='text-right font-semibold text-gray-900'>
-            {formatCurrency(totals.totalPurchaseAmount)}
+            {formatCurrency(totals.total_purchase_amount)}
           </div>
         ),
       },
@@ -659,7 +658,7 @@ const PurchasesPerSupplierTab = () => {
         },
         footer: () => (
           <div className='text-right font-semibold text-gray-900'>
-            {formatCurrency(totals.totalTransport)}
+            {formatCurrency(totals.total_transport)}
           </div>
         ),
       },
@@ -673,7 +672,7 @@ const PurchasesPerSupplierTab = () => {
         },
         footer: () => (
           <div className='text-right font-semibold text-gray-900'>
-            {formatCurrency(totals.totalValueTransport)}
+            {formatCurrency(totals.total_value_transport)}
           </div>
         ),
       },
@@ -687,7 +686,7 @@ const PurchasesPerSupplierTab = () => {
         },
         footer: () => (
           <div className='text-right font-semibold text-gray-900'>
-            {formatCurrency(totals.totalJumlah)}
+            {formatCurrency(totals.total_jumlah)}
           </div>
         ),
       },
@@ -853,37 +852,37 @@ const PurchasesPerSupplierTab = () => {
           </div>
         ) : (
           groupedData.map((supplier) => {
-            const totalQty = supplier.items.reduce(
+            const total_qty = supplier.items.reduce(
               (sum, item) => sum + (item.qty || 0),
               0
             );
-            const totalPrice = supplier.items.reduce(
+            const total_price = supplier.items.reduce(
               (sum, item) => sum + (item.purchase_value || 0),
               0
             );
-            const totalTransport = supplier.items.reduce(
+            const total_transport = supplier.items.reduce(
               (sum, item) => sum + (item.transport_value || 0),
               0
             );
-            const totalValueTransport = supplier.items.reduce(
+            const total_value_transport = supplier.items.reduce(
               (sum, item) => sum + (item.transport_value || 0),
               0
             );
-            const totalJumlah = supplier.items.reduce(
+            const total_jumlah = supplier.items.reduce(
               (sum, item) => sum + (item.total_amount || 0),
               0
             );
 
             const totals = {
-              totalQty,
-              totalPrice,
-              totalPurchaseAmount: totalPrice,
-              totalTransport,
-              totalValueTransport,
-              totalJumlah,
+              total_qty,
+              total_price,
+              total_purchase_amount: total_price,
+              total_transport,
+              total_value_transport,
+              total_jumlah,
             };
 
-            const totalPurchase = totals.totalJumlah;
+            const totalPurchase = totals.total_jumlah;
             const tableColumns = getTableColumns(totals);
 
             return (