diff --git a/src/app/closing/detail/page.tsx b/src/app/closing/detail/page.tsx
index 6225b8dd..487533be 100644
--- a/src/app/closing/detail/page.tsx
+++ b/src/app/closing/detail/page.tsx
@@ -4,6 +4,7 @@ import { useRouter, useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 
 import ClosingDetail from '@/components/pages/closing/ClosingDetail';
+import SalesReportTable from '@/components/pages/closing/sale/SalesReportTable';
 
 import { ClosingApi } from '@/services/api/closing';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
@@ -19,6 +20,11 @@ const ClosingDetailPage = () => {
     (id: number) => ClosingApi.getGeneralInfo(id)
   );
 
+  const { data: salesReport, isLoading: isLoadingSalesReport } = useSWR(
+    closingId,
+    (id: number) => ClosingApi.getPenjualan(id)
+  );
+
   if (!closingId) {
     router.back();
 
@@ -43,6 +49,9 @@ const ClosingDetailPage = () => {
       {!isLoadingClosing && isResponseSuccess(closing) && (
         <ClosingDetail id={Number(closingId)} initialValue={closing.data} />
       )}
+      {!isLoadingSalesReport && isResponseSuccess(salesReport) && (
+        <SalesReportTable type='detail' initialValues={salesReport.data} />
+      )}
     </div>
   );
 };