diff --git a/src/app/closing/detail/page.tsx b/src/app/closing/detail/page.tsx
index f271700b..309addbd 100644
--- a/src/app/closing/detail/page.tsx
+++ b/src/app/closing/detail/page.tsx
@@ -35,13 +35,30 @@ const ClosingDetailPage = () => {
   );
 
   const { data: salesData, isLoading: isLoadingSales } = useSWR(
-    closingId ? `sales-${closingId}` : null,
-    () => ClosingApi.getPenjualan(Number(closingId))
+    kandangId
+      ? `sales-${closingId}-${kandangId}`
+      : closingId
+        ? `sales-${closingId}`
+        : null,
+    () =>
+      kandangId
+        ? ClosingApi.getPenjualanByKandang(Number(closingId), Number(kandangId))
+        : ClosingApi.getPenjualan(Number(closingId))
   );
 
   const { data: hppEkspedisiData, isLoading: isLoadingHppEkspedisi } = useSWR(
-    closingId ? `hpp-ekspedisi-${closingId}` : null,
-    () => ClosingApi.getHppEkspedisi(Number(closingId))
+    kandangId
+      ? `hpp-ekspedisi-${closingId}-${kandangId}`
+      : closingId
+        ? `hpp-ekspedisi-${closingId}`
+        : null,
+    () =>
+      kandangId
+        ? ClosingApi.getHppEkspedisiByKandang(
+            Number(closingId),
+            Number(kandangId)
+          )
+        : ClosingApi.getHppEkspedisi(Number(closingId))
   );
 
   if (!closingId) {
diff --git a/src/services/api/closing.ts b/src/services/api/closing.ts
index 8ea2faa5..892fc88e 100644
--- a/src/services/api/closing.ts
+++ b/src/services/api/closing.ts
@@ -37,6 +37,23 @@ export class ClosingApiService extends BaseApiService<Closing, null, null> {
     }
   }
 
+  async getPenjualanByKandang(
+    closingId: number,
+    kandangId: number
+  ): Promise<BaseApiResponse<ClosingSales> | undefined> {
+    try {
+      const path = `${this.basePath}/${closingId}/${kandangId}/penjualan`;
+      return await httpClient<BaseApiResponse<ClosingSales>>(path, {
+        method: 'GET',
+      });
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<ClosingSales>>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
+
   async getAllIncomingSapronakFetcher(
     endpoint: string
   ): Promise<BaseApiResponse<ClosingIncomingSapronak[]>> {
@@ -162,6 +179,23 @@ export class ClosingApiService extends BaseApiService<Closing, null, null> {
       return undefined;
     }
   }
+
+  async getHppEkspedisiByKandang(
+    closingId: number,
+    kandangId: number
+  ): Promise<BaseApiResponse<ClosingHppExpedition> | undefined> {
+    try {
+      const path = `${this.basePath}/${closingId}/${kandangId}/expedition-hpp`;
+      return await httpClient<BaseApiResponse<ClosingHppExpedition>>(path, {
+        method: 'GET',
+      });
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<ClosingHppExpedition>>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
 }
 
 export const ClosingApi = new ClosingApiService('/closings');