diff --git a/src/app/closing/detail/page.tsx b/src/app/closing/detail/page.tsx
index 487533be..1b4ebc45 100644
--- a/src/app/closing/detail/page.tsx
+++ b/src/app/closing/detail/page.tsx
@@ -4,7 +4,6 @@ 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';
@@ -20,9 +19,9 @@ const ClosingDetailPage = () => {
     (id: number) => ClosingApi.getGeneralInfo(id)
   );
 
-  const { data: salesReport, isLoading: isLoadingSalesReport } = useSWR(
-    closingId,
-    (id: number) => ClosingApi.getPenjualan(id)
+  const { data: salesData, isLoading: isLoadingSales } = useSWR(
+    closingId ? `sales-${closingId}` : null,
+    () => ClosingApi.getPenjualan(Number(closingId))
   );
 
   if (!closingId) {
@@ -40,17 +39,18 @@ const ClosingDetailPage = () => {
     return;
   }
 
+  const isLoading = isLoadingClosing || isLoadingSales;
+
   return (
     <div className='w-full p-4 flex flex-row justify-center'>
-      {isLoadingClosing && (
-        <span className='loading loading-spinner loading-xl' />
-      )}
+      {isLoading && <span className='loading loading-spinner loading-xl' />}
 
-      {!isLoadingClosing && isResponseSuccess(closing) && (
-        <ClosingDetail id={Number(closingId)} initialValue={closing.data} />
-      )}
-      {!isLoadingSalesReport && isResponseSuccess(salesReport) && (
-        <SalesReportTable type='detail' initialValues={salesReport.data} />
+      {!isLoading && isResponseSuccess(closing) && (
+        <ClosingDetail
+          id={Number(closingId)}
+          initialValue={closing.data}
+          salesData={isResponseSuccess(salesData) ? salesData.data : undefined}
+        />
       )}
     </div>
   );
diff --git a/src/components/pages/closing/ClosingDetail.tsx b/src/components/pages/closing/ClosingDetail.tsx
index 147b3fbd..11e28e32 100644
--- a/src/components/pages/closing/ClosingDetail.tsx
+++ b/src/components/pages/closing/ClosingDetail.tsx
@@ -7,15 +7,24 @@ import Button from '@/components/Button';
 import Tabs from '@/components/Tabs';
 import ClosingGeneralInformationTable from '@/components/pages/closing/ClosingGeneralInformationTable';
 
-import { ClosingGeneralInformation } from '@/types/api/closing';
+import {
+  ClosingGeneralInformation,
+  BaseClosingSales,
+} from '@/types/api/closing';
 import ClosingSapronakTabContent from './ClosingSapronakTabContent';
+import SalesReportTable from './sale/SalesReportTable';
 
 interface ClosingDetailProps {
   id: number;
   initialValue?: ClosingGeneralInformation;
+  salesData?: BaseClosingSales;
 }
 
-const ClosingDetail: React.FC<ClosingDetailProps> = ({ id, initialValue }) => {
+const ClosingDetail: React.FC<ClosingDetailProps> = ({
+  id,
+  initialValue,
+  salesData,
+}) => {
   const [activeTab, setActiveTab] = useState<string>('sapronak');
 
   const closingDetailTabs = useMemo(() => {
@@ -33,7 +42,7 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({ id, initialValue }) => {
       {
         id: 'penjualan',
         label: 'Penjualan',
-        content: 'Penjualan',
+        content: <SalesReportTable initialValues={salesData} />,
       },
       {
         id: 'overhead',
diff --git a/src/components/pages/closing/sale/SalesReportTable.tsx b/src/components/pages/closing/sale/SalesReportTable.tsx
index e509eb7d..89cb6615 100644
--- a/src/components/pages/closing/sale/SalesReportTable.tsx
+++ b/src/components/pages/closing/sale/SalesReportTable.tsx
@@ -263,7 +263,7 @@ const SalesReportTable = ({
                 tableWrapperClassName: 'overflow-x-auto',
                 tableClassName: 'w-full table-auto text-sm',
                 headerColumnClassName:
-                  'px-4 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end whitespace-nowrap border-l border-l-gray-200 border-r border-r-gray-200 border-t border-t-gray-200 border-gray-200 border-b-0',
+                  'px-4 py-3 text-xs font-semibold text-gray-500 whitespace-nowrap border-l border-l-gray-200 border-r border-r-gray-200 border-t border-t-gray-200 border-gray-200 border-b-0',
                 bodyRowClassName:
                   'hover:bg-gray-50 transition-colors border-b border-gray-200 first:border-t first:border-t-gray-200 border-l border-l-gray-200 border-r border-r-gray-200',
                 bodyColumnClassName:
diff --git a/src/services/api/closing.ts b/src/services/api/closing.ts
index fe2c2d50..6ce32995 100644
--- a/src/services/api/closing.ts
+++ b/src/services/api/closing.ts
@@ -20,10 +20,11 @@ export class ClosingApiService extends BaseApiService<Closing, null, null> {
     id: number
   ): Promise<BaseApiResponse<ClosingSales> | undefined> {
     try {
-      const getPenjualanPath = `${id}/penjualan`;
-      return await this.customRequest<BaseApiResponse<ClosingSales>>(
-        getPenjualanPath
-      );
+      const getPenjualanPath = `${this.basePath}/${id}/penjualan`;
+      const getPenjualanRes =
+        await httpClient<BaseApiResponse<ClosingSales>>(getPenjualanPath);
+
+      return getPenjualanRes;
     } catch (error) {
       if (axios.isAxiosError<BaseApiResponse<ClosingSales>>(error)) {
         return error.response?.data;