diff --git a/src/app/closing/detail/page.tsx b/src/app/closing/detail/page.tsx
index d081951c..c8d5c47e 100644
--- a/src/app/closing/detail/page.tsx
+++ b/src/app/closing/detail/page.tsx
@@ -34,18 +34,6 @@ const ClosingDetailPage = () => {
     () => ProjectFlockKandangApi.getSingle(Number(kandangId))
   );
 
-  const { data: salesData, isLoading: isLoadingSales } = useSWR(
-    kandangId
-      ? `sales-${closingId}-${kandangId}`
-      : closingId
-        ? `sales-${closingId}`
-        : null,
-    () =>
-      kandangId
-        ? ClosingApi.getPenjualanByKandang(Number(closingId), Number(kandangId))
-        : ClosingApi.getPenjualan(Number(closingId))
-  );
-
   if (!closingId) {
     router.back();
 
@@ -62,10 +50,7 @@ const ClosingDetailPage = () => {
   }
 
   const isLoading =
-    isLoadingClosing ||
-    isLoadingSales ||
-    isLoadingProject ||
-    isLoadingKandang;
+    isLoadingClosing || isLoadingProject || isLoadingKandang;
 
   return (
     <div className='w-full p-4 flex flex-row justify-center'>
@@ -75,7 +60,6 @@ const ClosingDetailPage = () => {
         <ClosingDetail
           id={Number(closingId)}
           initialValue={closing.data}
-          salesData={isResponseSuccess(salesData) ? salesData.data : undefined}
           projectData={
             isResponseSuccess(projectData) ? projectData.data : undefined
           }
diff --git a/src/components/pages/closing/ClosingDetailTabs.tsx b/src/components/pages/closing/ClosingDetailTabs.tsx
index 94340283..3b9e7dce 100644
--- a/src/components/pages/closing/ClosingDetailTabs.tsx
+++ b/src/components/pages/closing/ClosingDetailTabs.tsx
@@ -11,12 +11,11 @@ import ProductionDataClosingTab from '@/components/pages/closing/tab/ProductionD
 
 import {
   ClosingGeneralInformation,
-  BaseClosingSales,
 } from '@/types/api/closing';
 import SapronakCalculationClosingTab from '@/components/pages/closing/tab/SapronakCalculationClosingTab';
 import OverheadClosingTab from '@/components/pages/closing/tab/OverheadClosingTab';
 import FinanceClosingTab from '@/components/pages/closing/tab/FinanceClosingTab';
-import SalesClosingTable from '@/components/pages/closing/table/SalesClosingTable';
+import SalesClosingTab from '@/components/pages/closing/tab/SalesClosingTab';
 import HppExpeditionClosingTab from '@/components/pages/closing/tab/HppExpeditionClosingTab';
 import ClosingKandangList from '@/components/pages/closing/ClosingKandangList';
 import { ProjectFlock } from '@/types/api/production/project-flock';
@@ -25,7 +24,6 @@ import { useClosingTabStore } from '@/stores/closing/closing-tab.store';
 interface ClosingDetailProps {
   id: number;
   initialValue?: ClosingGeneralInformation;
-  salesData?: BaseClosingSales;
   projectData?: ProjectFlock;
   kandangData?: ProjectFlockKandang;
 }
@@ -33,7 +31,6 @@ interface ClosingDetailProps {
 const ClosingDetail: React.FC<ClosingDetailProps> = ({
   id,
   initialValue,
-  salesData,
   projectData,
   kandangData,
 }) => {
@@ -60,7 +57,7 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
       {
         id: 'penjualan',
         label: 'Penjualan',
-        content: <SalesClosingTable initialValues={salesData} />,
+        content: <SalesClosingTab projectFlockId={id} />,
       },
       {
         id: 'overhead',
@@ -91,7 +88,7 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
     ];
 
     return validTabs;
-  }, [initialValue, salesData, kandangData, id]);
+  }, [initialValue, kandangData, id]);
 
   return (
     <>
diff --git a/src/components/pages/closing/tab/SalesClosingTab.tsx b/src/components/pages/closing/tab/SalesClosingTab.tsx
new file mode 100644
index 00000000..23ec720b
--- /dev/null
+++ b/src/components/pages/closing/tab/SalesClosingTab.tsx
@@ -0,0 +1,19 @@
+import SalesClosingTable from '@/components/pages/closing/table/SalesClosingTable';
+
+interface SalesClosingTabProps {
+  projectFlockId: number;
+}
+
+const SalesClosingTab = ({
+  projectFlockId,
+}: SalesClosingTabProps) => {
+  return (
+    <div className='flex flex-col gap-4'>
+      {projectFlockId && (
+        <SalesClosingTable projectFlockId={projectFlockId} />
+      )}
+    </div>
+  );
+};
+
+export default SalesClosingTab;
diff --git a/src/components/pages/closing/table/SalesClosingTable.tsx b/src/components/pages/closing/table/SalesClosingTable.tsx
index b30cfb4a..6ad716b2 100644
--- a/src/components/pages/closing/table/SalesClosingTable.tsx
+++ b/src/components/pages/closing/table/SalesClosingTable.tsx
@@ -5,6 +5,7 @@ import { ColumnDef } from '@tanstack/react-table';
 import Table from '@/components/Table';
 import Card from '@/components/Card';
 import { formatCurrency, formatNumber, formatDate } from '@/lib/helper';
+import { isResponseSuccess } from '@/lib/api-helper';
 import {
   BaseClosingSales,
   BaseSales,
@@ -13,20 +14,46 @@ import {
 import { Product } from '@/types/api/master-data/product';
 import { Customer } from '@/types/api/master-data/customer';
 import { Kandang } from '@/types/api/master-data/kandang';
+import { ClosingApi } from '@/services/api/closing';
+import { useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
 
 interface SalesClosingTableProps {
-  type?: 'detail';
-  initialValues?: BaseClosingSales;
+  projectFlockId: number;
 }
 
-const SalesClosingTable = ({ initialValues }: SalesClosingTableProps) => {
+const SalesClosingTable = ({
+  projectFlockId,
+}: SalesClosingTableProps) => {
+  const searchParams = useSearchParams();
+  const kandangId = searchParams.get('kandangId');
+
+  const { data: sales, isLoading } = useSWR(
+    kandangId
+      ? `/closing/sales/${projectFlockId}/${kandangId}`
+      : `/closing/sales/${projectFlockId}`,
+    () =>
+      kandangId
+        ? ClosingApi.getPenjualanByKandang(
+            projectFlockId,
+            Number(kandangId)
+          )
+        : ClosingApi.getPenjualan(projectFlockId)
+  );
+
   const salesData: BaseSales[] = useMemo(() => {
-    return initialValues?.sales || [];
-  }, [initialValues]);
+    if (isResponseSuccess(sales)) {
+      return sales.data.sales || [];
+    }
+    return [];
+  }, [sales]);
 
   const summary: ClosingSalesSummary | undefined = useMemo(() => {
-    return initialValues?.summary;
-  }, [initialValues]);
+    if (isResponseSuccess(sales)) {
+      return sales.data.summary;
+    }
+    return undefined;
+  }, [sales]);
 
   const totals = useMemo(() => {
     if (salesData.length === 0) {
@@ -306,6 +333,7 @@ const SalesClosingTable = ({ initialValues }: SalesClosingTableProps) => {
             <Table
               data={salesData}
               columns={salesColumns}
+              isLoading={isLoading}
               renderFooter={salesData.length > 0}
               className={{
                 tableWrapperClassName: 'overflow-x-auto',