diff --git a/src/components/pages/ApprovalSteps.tsx b/src/components/pages/ApprovalSteps.tsx
index ba9bde3d..18d7fcfe 100644
--- a/src/components/pages/ApprovalSteps.tsx
+++ b/src/components/pages/ApprovalSteps.tsx
@@ -191,6 +191,53 @@ export const formatGroupedApprovalsToApprovalSteps = (
 
 export default ApprovalSteps;
 
+/**
+ * Mengubah array BaseApproval (datar) menjadi BaseGroupedApproval (berkelompok).
+ */
+const groupApprovalsByStep = (
+  approvals: BaseApproval[]
+): BaseGroupedApproval[] => {
+  const groups: Record<number, BaseGroupedApproval> = {};
+  for (const approval of approvals) {
+    if (!groups[approval.step_number]) {
+      groups[approval.step_number] = {
+        step_number: approval.step_number,
+        step_name: approval.step_name,
+        approvals: [],
+      };
+    }
+    groups[approval.step_number].approvals.push(approval);
+  }
+  return Object.values(groups);
+};
+
+/**
+ * Mengubah array BaseGroupedApproval (berkelompok) kembali menjadi BaseApproval[] (datar).
+ */
+const flattenGroupedApprovals = (
+  groupedApprovals: BaseGroupedApproval[]
+): BaseApproval[] => {
+  return groupedApprovals.flatMap((group) => group.approvals);
+};
+
+/**
+ * Type guard untuk memeriksa apakah data adalah BaseGroupedApproval[].
+ */
+const isGroupedApprovalData = (
+  data: BaseApproval[] | BaseGroupedApproval[]
+): data is BaseGroupedApproval[] => {
+  if (!data || data.length === 0) {
+    return true;
+  }
+  const firstElement = data[0];
+  return (
+    typeof firstElement === 'object' &&
+    firstElement !== null &&
+    'approvals' in firstElement &&
+    Array.isArray(firstElement.approvals)
+  );
+};
+
 const useApprovalSteps = <T extends ModuleWithApproval>({
   moduleUrl,
   moduleName,
@@ -204,6 +251,7 @@ const useApprovalSteps = <T extends ModuleWithApproval>({
     page: number;
     limit: number;
     search?: string;
+    group_step_number?: boolean;
   };
 }) => {
   const paramString = new URLSearchParams({
@@ -211,17 +259,15 @@ const useApprovalSteps = <T extends ModuleWithApproval>({
     limit: params?.limit?.toString() || '',
     search: params?.search || '',
   }).toString();
-
   const SWR_KEY_CONSTANTS = '/constants';
   const SWR_KEY_APPROVALS =
     moduleName && moduleId
-      ? `/approvals?module_name=${moduleName}&module_id=${moduleId}&group_step_number=true${
+      ? `/approvals?module_name=${moduleName}&module_id=${moduleId}${
           params ? `&${paramString}` : ''
         }`
       : null;
   const SWR_KEY_CURRENT_DATA = moduleUrl;
 
-  // Get Approval Lines dari GET /constant
   const { data: constData, isLoading: constIsLoading } = useSWR(
     SWR_KEY_CONSTANTS,
     async (url) => {
@@ -229,16 +275,16 @@ const useApprovalSteps = <T extends ModuleWithApproval>({
     }
   );
 
-  // Get Grouped Data dari GET /approvals
   const {
     data: approvalData,
     isLoading: approvalIsLoading,
     mutate: mutateApprovals,
   } = useSWR(SWR_KEY_APPROVALS, async (url) => {
-    return await httpClientFetcher<BaseApiResponse<BaseGroupedApproval[]>>(url);
+    return await httpClientFetcher<
+      BaseApiResponse<BaseApproval[] | BaseGroupedApproval[]>
+    >(url);
   });
 
-  // Get latest approval
   const {
     data: currentData,
     isLoading: currentIsLoading,
@@ -259,15 +305,29 @@ const useApprovalSteps = <T extends ModuleWithApproval>({
         })?.steps ?? [])
       : [];
 
-    const grouped = isResponseSuccess(approvalData) ? approvalData.data : [];
-
     const latest = isResponseSuccess(currentData)
       ? currentData.data?.approval
       : undefined;
 
+    const rawData = isResponseSuccess(approvalData)
+      ? approvalData.data
+      : undefined;
+
+    let processedGroupedApprovals: BaseGroupedApproval[] = [];
+
+    if (rawData) {
+      if (isGroupedApprovalData(rawData)) {
+        processedGroupedApprovals = rawData;
+      } else {
+        processedGroupedApprovals = groupApprovalsByStep(
+          rawData as BaseApproval[]
+        );
+      }
+    }
+
     return {
       approvalLine: line,
-      groupedApprovals: grouped,
+      groupedApprovals: processedGroupedApprovals,
       latestApproval: latest,
     };
   }, [constData, approvalData, currentData, moduleName]);
@@ -290,11 +350,39 @@ const useApprovalSteps = <T extends ModuleWithApproval>({
     }
   }, [isLoading, approvalLine, groupedApprovals, latestApproval]);
 
+  const rawDataApprovals = useMemo(() => {
+    const rawData = isResponseSuccess(approvalData)
+      ? approvalData.data
+      : undefined;
+
+    if (!rawData) {
+      return undefined;
+    }
+
+    const isDataCurrentlyGrouped = isGroupedApprovalData(rawData);
+    const wantsGrouped = params?.group_step_number !== false;
+
+    if (wantsGrouped) {
+      if (isDataCurrentlyGrouped) {
+        return rawData as BaseGroupedApproval[];
+      } else {
+        return groupApprovalsByStep(rawData as BaseApproval[]);
+      }
+    } else {
+      if (isDataCurrentlyGrouped) {
+        return flattenGroupedApprovals(rawData as BaseGroupedApproval[]);
+      } else {
+        return rawData as BaseApproval[];
+      }
+    }
+  }, [approvalData, params?.group_step_number]);
+
   // Return Hook
   return {
     approvals,
     isLoading,
     rawData: isResponseSuccess(currentData) ? currentData.data : undefined,
+    rawDataApprovals: rawDataApprovals,
     refresh,
   };
 };
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
index 265ad476..bc268060 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
@@ -34,14 +34,13 @@ import { Kandang } from '@/types/api/master-data/kandang';
 import Collapse from '@/components/Collapse';
 import { ProjectFlockApi } from '@/services/api/production/project-flock';
 import { BaseApiResponse } from '@/types/api/api-general';
-import { APPROVAL_WORKFLOWS, FLOCK_CATEGORY_OPTIONS } from '@/config/constant';
+import { FLOCK_CATEGORY_OPTIONS } from '@/config/constant';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import ProjectFlockKandangTable from './ProjectFlockKandangTable';
 import ApprovalSteps, {
   useApprovalSteps,
 } from '@/components/pages/ApprovalSteps';
-import Card from '@/components/Card';
 
 interface ProjectFlockFormProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -151,11 +150,18 @@ const ProjectFlockForm = ({
   const {
     approvals,
     isLoading: approvalsLoading,
+    rawData: rawApprovals,
+    rawDataApprovals: rawDataApprovals,
     refresh: refreshApprovals,
   } = useApprovalSteps({
     moduleUrl: `/production/project-flocks/${initialValues?.id}`,
     moduleName: 'PROJECT_FLOCKS',
     moduleId: initialValues?.id.toString() ?? '',
+    params: {
+      page: 1,
+      limit: 10,
+      group_step_number: false,
+    },
   });
 
   useEffect(() => {
diff --git a/src/types/api/api-general.d.ts b/src/types/api/api-general.d.ts
index 37040654..f9e35512 100644
--- a/src/types/api/api-general.d.ts
+++ b/src/types/api/api-general.d.ts
@@ -98,6 +98,7 @@ export type flags =
   | 'OVK';
 
 export type BaseApproval = {
+  id?: number;
   step_number: number;
   step_name: string;
   action: string;