diff --git a/src/app/production/recording/grading/add/page.tsx b/src/app/production/recording/grading/add/page.tsx
deleted file mode 100644
index 9b918d98..00000000
--- a/src/app/production/recording/grading/add/page.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-'use client';
-
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-import GradingForm from '@/components/pages/production/recording/grading/form/GradingForm';
-import { RecordingApi } from '@/services/api/production';
-import { isResponseSuccess } from '@/lib/api-helper';
-
-const AddGrading = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const recordingId = searchParams.get('recording_id');
-
-  const { data: recording, isLoading: isLoadingRecording } = useSWR(
-    recordingId && recordingId !== 'new' ? [recordingId] : null,
-    ([id]) => RecordingApi.getSingle(parseInt(id))
-  );
-
-  if (
-    recordingId &&
-    recordingId !== 'new' &&
-    !isLoadingRecording &&
-    (!recording || !isResponseSuccess(recording))
-  ) {
-    router.replace('/404');
-    return;
-  }
-
-  return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      {recordingId && recordingId !== 'new' && isLoadingRecording && (
-        <span className='loading loading-spinner loading-xl' />
-      )}
-      {(!recordingId ||
-        recordingId === 'new' ||
-        (!isLoadingRecording && recording && isResponseSuccess(recording))) && (
-        <GradingForm
-          type='add'
-          initialValues={
-            isResponseSuccess(recording) ? recording.data?.eggs?.[0] : undefined
-          }
-        />
-      )}
-    </div>
-  );
-};
-
-export default AddGrading;
diff --git a/src/app/production/recording/grading/detail/edit/page.tsx b/src/app/production/recording/grading/detail/edit/page.tsx
deleted file mode 100644
index 0a65f528..00000000
--- a/src/app/production/recording/grading/detail/edit/page.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-'use client';
-
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-import GradingForm from '@/components/pages/production/recording/grading/form/GradingForm';
-import { RecordingApi } from '@/services/api/production';
-import { isResponseSuccess } from '@/lib/api-helper';
-
-const EditGrading = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const recordingId = searchParams.get('recordingId');
-  const gradingId = searchParams.get('gradingId');
-
-  const { data: recording, isLoading: isLoadingRecording } = useSWR(
-    recordingId ? [recordingId] : null,
-    ([id]) => RecordingApi.getSingle(parseInt(id))
-  );
-
-  if (!recordingId) {
-    router.back();
-
-    return (
-      <div className='w-full flex flex-row justify-center items-center p-4'>
-        <span className='loading loading-spinner loading-xl' />
-      </div>
-    );
-  }
-
-  if (!isLoadingRecording && (!recording || !isResponseSuccess(recording))) {
-    router.replace('/404');
-    return;
-  }
-
-  return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      {isLoadingRecording && (
-        <span className='loading loading-spinner loading-xl' />
-      )}
-      {!isLoadingRecording && recording && isResponseSuccess(recording) && (
-        <GradingForm
-          type='edit'
-          initialValues={recording.data.eggs?.find(
-            (egg) => egg.id === parseInt(gradingId || '0')
-          )}
-        />
-      )}
-    </div>
-  );
-};
-
-export default EditGrading;
diff --git a/src/app/production/recording/grading/detail/page.tsx b/src/app/production/recording/grading/detail/page.tsx
deleted file mode 100644
index 6a5fbcba..00000000
--- a/src/app/production/recording/grading/detail/page.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-'use client';
-
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-import GradingForm from '@/components/pages/production/recording/grading/form/GradingForm';
-import { RecordingApi } from '@/services/api/production';
-import { isResponseSuccess } from '@/lib/api-helper';
-
-const DetailGrading = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const gradingId = searchParams.get('gradingId');
-
-  const { data: grading, isLoading: isLoadingGrading } = useSWR(
-    gradingId ? [gradingId] : null,
-    ([id]) => RecordingApi.getSingle(parseInt(id))
-  );
-
-  if (!gradingId) {
-    router.back();
-
-    return (
-      <div className='w-full flex flex-row justify-center items-center p-4'>
-        <span className='loading loading-spinner loading-xl' />
-      </div>
-    );
-  }
-
-  if (!isLoadingGrading && (!grading || !isResponseSuccess(grading))) {
-    router.replace('/404');
-    return;
-  }
-
-  return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      {isLoadingGrading && (
-        <span className='loading loading-spinner loading-xl' />
-      )}
-      {!isLoadingGrading && grading && isResponseSuccess(grading) && (
-        <GradingForm
-          type='detail'
-          initialValues={grading.data.eggs?.find(
-            (egg) => egg.id === parseInt(gradingId)
-          )}
-        />
-      )}
-    </div>
-  );
-};
-
-export default DetailGrading;
diff --git a/src/app/production/recording/grading/layout.tsx b/src/app/production/recording/grading/layout.tsx
deleted file mode 100644
index 7220dfa1..00000000
--- a/src/app/production/recording/grading/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import SuspenseHelper from '@/components/helper/SuspenseHelper';
-
-const Layout = ({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) => {
-  return <SuspenseHelper>{children}</SuspenseHelper>;
-};
-
-export default Layout;
diff --git a/src/components/pages/production/recording/grading/form/GradingForm.tsx b/src/components/pages/production/recording/grading/form/GradingForm.tsx
deleted file mode 100644
index 417c6356..00000000
--- a/src/components/pages/production/recording/grading/form/GradingForm.tsx
+++ /dev/null
@@ -1,1050 +0,0 @@
-'use client';
-
-import { useMemo, useState, useEffect, useCallback } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { useFormik } from 'formik';
-import { Icon } from '@iconify/react';
-
-import Button from '@/components/Button';
-import NumberInput from '@/components/input/NumberInput';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
-import CheckboxInput from '@/components/input/CheckboxInput';
-import ConfirmationModal from '@/components/modal/ConfirmationModal';
-import Card from '@/components/Card';
-import Badge from '@/components/Badge';
-
-import {
-  CreateGradingPayload,
-  UpdateGradingPayload,
-  RecordingEgg,
-  GradingEgg,
-  Recording,
-} from '@/types/api/production/recording';
-import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
-import { type BaseApiResponse } from '@/types/api/api-general';
-
-import {
-  RecordingGradingFormSchema,
-  RecordingGradingFormValues,
-  UpdateRecordingGradingFormSchema,
-  getRecordingGradingFormInitialValues,
-} from '@/components/pages/production/recording/form/RecordingForm.schema';
-
-import { cn, formatDate } from '@/lib/helper';
-import toast from 'react-hot-toast';
-import { isResponseError } from '@/lib/api-helper';
-
-import {
-  RecordingApi,
-  ProjectFlockKandangApi,
-} from '@/services/api/production';
-
-import { useModal } from '@/components/Modal';
-import useSWR from 'swr';
-
-// INTERFACES & PROPS
-interface GradingFormProps {
-  type?: 'add' | 'edit' | 'detail';
-  initialValues?: RecordingEgg & {
-    grading_eggs?: GradingEgg[];
-    gradings?: { grade: string; qty: number }[];
-  };
-}
-
-const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
-  // HOOKS & ROUTER
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const recordingId = searchParams.get('recording_id');
-
-  // STATE MANAGEMENT
-  const [selectedGradingItems, setSelectedGradingItems] = useState<number[]>(
-    []
-  );
-  const [gradingFormErrorMessage, setGradingFormErrorMessage] = useState('');
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-  const deleteModal = useModal();
-
-  // API DATA FETCHING
-  const recordingUrl = useMemo(() => {
-    const recordingIdToUse = recordingId;
-    if (!recordingIdToUse) return null;
-    return `${RecordingApi.basePath}/${recordingIdToUse}`;
-  }, [recordingId]);
-
-  const { data: recordingData } = useSWR(
-    recordingUrl,
-    recordingUrl ? RecordingApi.getAllFetcher : null
-  );
-
-  // DATA PROCESSING
-  const recording =
-    recordingData?.status === 'success'
-      ? (recordingData.data as unknown as Recording)
-      : undefined;
-
-  const projectFlockKandangUrl = useMemo(() => {
-    if (!recording?.project_flock_kandang_id) return null;
-    return `${ProjectFlockKandangApi.basePath}/${recording.project_flock_kandang_id}`;
-  }, [recording?.project_flock_kandang_id]);
-
-  const { data: projectFlockKandangData } = useSWR(
-    projectFlockKandangUrl,
-    projectFlockKandangUrl ? ProjectFlockKandangApi.getAllFetcher : null
-  );
-
-  const projectFlockKandang =
-    projectFlockKandangData?.status === 'success'
-      ? (projectFlockKandangData.data as unknown as ProjectFlockKandang)
-      : undefined;
-
-  const konsumsiBaikEggData = useMemo(() => {
-    if (!recording?.eggs) return null;
-
-    const konsumsiBaikEgg = recording.eggs.find((egg: RecordingEgg) =>
-      egg.product_warehouse?.product?.name
-        ?.toLowerCase()
-        .includes('konsumsi baik')
-    );
-
-    return konsumsiBaikEgg || null;
-  }, [recording]);
-
-  const totalKonsumsiBaikEggs = konsumsiBaikEggData?.qty || 0;
-  const konsumsiBaikEggId = konsumsiBaikEggData?.id;
-
-  const isDataLoading =
-    !recording ||
-    (totalKonsumsiBaikEggs === 0 &&
-      recording?.project_flock_category === 'LAYING');
-
-  // FORM HANDLERS
-  const createGradingHandler = useCallback(
-    async (payload: CreateGradingPayload) => {
-      const res = (await RecordingApi.createGrading(payload)) as
-        | BaseApiResponse<unknown>
-        | undefined;
-
-      if (!res || isResponseError(res)) {
-        setGradingFormErrorMessage(res?.message || 'Failed to add Grading');
-        return;
-      }
-
-      toast.success(res?.message || 'Successfully added Grading!');
-      router.push('/production/recording');
-    },
-    [router]
-  );
-
-  const updateGradingHandler = useCallback(
-    async (gradingId: number, payload: UpdateGradingPayload) => {
-      const res = (await RecordingApi.updateGrading(gradingId, payload)) as
-        | BaseApiResponse<unknown>
-        | undefined;
-
-      if (!res || isResponseError(res)) {
-        setGradingFormErrorMessage(res?.message || 'Failed to update Grading');
-        return;
-      }
-      toast.success(res?.message || 'Successfully updated Grading!');
-      router.refresh();
-      router.push('/production/recording');
-    },
-    [router]
-  );
-
-  const deleteRecordingClickHandler = useCallback(() => {
-    deleteModal.openModal();
-  }, [deleteModal]);
-
-  const confirmationModalDeleteClickHandler = useCallback(async () => {
-    if (!initialValues?.id) return;
-
-    setIsDeleteLoading(true);
-    try {
-      const res = (await RecordingApi.deleteGrading(initialValues.id)) as
-        | BaseApiResponse<unknown>
-        | undefined;
-
-      if (!res || isResponseError(res)) {
-        setGradingFormErrorMessage(res?.message || 'Failed to delete Grading');
-        return;
-      }
-      deleteModal.closeModal();
-      toast.success(res?.message || 'Successfully delete Grading!');
-      router.push('/production/recording');
-    } catch {
-      setGradingFormErrorMessage('Failed to delete Grading');
-    } finally {
-      setIsDeleteLoading(false);
-    }
-  }, [deleteModal, initialValues?.id, router]);
-
-  // FORMIK SETUP
-  const formikInitialValues = useMemo(() => {
-    let recordingEggId: number | undefined = konsumsiBaikEggId;
-
-    if (!recordingEggId && initialValues?.id) {
-      recordingEggId = initialValues.id;
-    }
-
-    if (!recordingEggId) {
-      recordingEggId = parseInt(recordingId || '0') || 0;
-    }
-
-    let gradingData: {
-      recording_egg_id: number;
-      grade: string;
-      qty: number;
-    }[] = [];
-
-    if (initialValues?.grading_eggs && initialValues.grading_eggs.length > 0) {
-      gradingData = initialValues.grading_eggs.map((grading: GradingEgg) => ({
-        recording_egg_id: recordingEggId,
-        grade: grading.grade,
-        qty: grading.qty,
-      }));
-    } else if (initialValues?.gradings && initialValues.gradings.length > 0) {
-      gradingData = initialValues.gradings.map(
-        (grading: { grade: string; qty: number }) => ({
-          recording_egg_id: recordingEggId,
-          grade: grading.grade,
-          qty: grading.qty,
-        })
-      );
-    }
-
-    return getRecordingGradingFormInitialValues({
-      recording_egg_id: recordingEggId,
-      eggs_grading: gradingData,
-    });
-  }, [initialValues, recordingId, konsumsiBaikEggId]);
-
-  const formik = useFormik<RecordingGradingFormValues>({
-    initialValues: formikInitialValues,
-    enableReinitialize: true,
-    validationSchema: (() => {
-      return type === 'edit'
-        ? UpdateRecordingGradingFormSchema
-        : RecordingGradingFormSchema;
-    })(),
-    validateOnChange: true,
-    validateOnBlur: true,
-    onSubmit: async (values) => {
-      const gradingPayload = {
-        eggs_grading: (values.eggs_grading ?? []).map((grading) => ({
-          recording_egg_id: grading.recording_egg_id,
-          grade: grading.grade,
-          qty: grading.qty || 0,
-        })),
-      };
-
-      switch (type) {
-        case 'add':
-          await createGradingHandler(gradingPayload as CreateGradingPayload);
-          break;
-        case 'edit':
-          await updateGradingHandler(
-            initialValues?.id as number,
-            gradingPayload as UpdateGradingPayload
-          );
-          break;
-      }
-    },
-  });
-
-  const currentGradingTotal = useMemo(() => {
-    return (formik.values.eggs_grading || []).reduce((total, grading) => {
-      return total + (Number(grading.qty) || 0);
-    }, 0);
-  }, [formik.values.eggs_grading]);
-
-  const isGradingExceedsAvailable = currentGradingTotal > totalKonsumsiBaikEggs;
-  const isGradingIncomplete =
-    currentGradingTotal < totalKonsumsiBaikEggs && totalKonsumsiBaikEggs > 0;
-  const hasUserStartedGrading = currentGradingTotal > 0;
-
-  // GRADING HANDLERS
-  const addGrading = () => {
-    let recordingEggId: number | undefined = konsumsiBaikEggId;
-
-    if (!recordingEggId && initialValues?.id) {
-      recordingEggId = initialValues.id;
-    }
-
-    if (!recordingEggId) {
-      recordingEggId = parseInt(recordingId || '0') || 0;
-    }
-
-    const newGrading = [
-      ...(formik.values.eggs_grading || []),
-      {
-        recording_egg_id: recordingEggId,
-        grade: '',
-        qty: '',
-      },
-    ];
-    formik.setFieldValue('eggs_grading', newGrading);
-  };
-
-  const handleGradingGradeChangeWrapper = useCallback(
-    (idx: number) => (selectedOption: OptionType | OptionType[] | null) => {
-      const option = selectedOption as OptionType | null;
-      formik.setFieldValue(`eggs_grading.${idx}.grade`, option?.label || '');
-    },
-    [formik]
-  );
-
-  const handleGradingQtyChangeWrapper = useCallback(
-    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = parseFloat(e.target.value) || 0;
-      formik.setFieldValue(`eggs_grading.${idx}.qty`, value);
-    },
-    [formik]
-  );
-
-  const removeGrading = (idx: number) => {
-    const updatedGrading = formik.values.eggs_grading?.filter(
-      (_, i) => i !== idx
-    );
-    formik.setFieldValue('eggs_grading', updatedGrading);
-  };
-
-  const removeSelectedGrading = () => {
-    const updatedGrading = formik.values.eggs_grading?.filter(
-      (_, idx) => !selectedGradingItems.includes(idx)
-    );
-    formik.setFieldValue('eggs_grading', updatedGrading);
-    setSelectedGradingItems([]);
-  };
-
-  // VALIDATION HELPERS
-  const isRepeaterInputError = (
-    arrayName: 'eggs_grading',
-    column: string,
-    idx: number
-  ) => {
-    const touched = formik.touched as Record<string, unknown>;
-    const errors = formik.errors as Record<string, unknown>;
-
-    if (!touched[arrayName] || !Array.isArray(touched[arrayName])) {
-      return {
-        isError: false,
-        errorMessage: '',
-      };
-    }
-
-    const touchedField = (touched[arrayName] as unknown[])?.[idx] as Record<
-      string,
-      unknown
-    >;
-    const errorField = (errors[arrayName] as unknown[])?.[idx] as Record<
-      string,
-      unknown
-    >;
-
-    return {
-      isError: touchedField && Boolean(errorField?.[column]),
-      errorMessage:
-        touchedField && errorField?.[column]
-          ? (errorField[column] as string)
-          : '',
-    };
-  };
-
-  // EFFECTS
-  useEffect(() => {
-    if (isDataLoading) {
-      toast.dismiss('grading-exceeds');
-      toast.dismiss('grading-incomplete');
-      return;
-    }
-
-    if (isGradingExceedsAvailable && currentGradingTotal > 0) {
-      toast.error(
-        `Total grading (${currentGradingTotal}) melebihi telur yang tersedia (${totalKonsumsiBaikEggs})!`,
-        {
-          id: 'grading-exceeds',
-          duration: 3000,
-        }
-      );
-      toast.dismiss('grading-incomplete');
-    } else if (isGradingIncomplete && hasUserStartedGrading) {
-      toast.error(
-        `Total grading (${currentGradingTotal}) tidak sama dengan total telur konsumsi baik yang tersedia (${totalKonsumsiBaikEggs})! Semua telur harus digrading.`,
-        {
-          id: 'grading-incomplete',
-          duration: 3000,
-        }
-      );
-      toast.dismiss('grading-exceeds');
-    } else {
-      toast.dismiss('grading-exceeds');
-      toast.dismiss('grading-incomplete');
-    }
-  }, [
-    isDataLoading,
-    isGradingExceedsAvailable,
-    isGradingIncomplete,
-    hasUserStartedGrading,
-    currentGradingTotal,
-    totalKonsumsiBaikEggs,
-  ]);
-
-  useEffect(() => {
-    if (
-      konsumsiBaikEggId &&
-      formik.values.eggs_grading &&
-      formik.values.eggs_grading.length === 0
-    ) {
-      formik.setFieldValue('eggs_grading', [
-        { recording_egg_id: konsumsiBaikEggId, grade: '', qty: '' },
-      ]);
-    }
-  }, [konsumsiBaikEggId, formik.values.eggs_grading.length]);
-
-  return (
-    <>
-      <section className='w-full'>
-        <header className='flex flex-col gap-4'>
-          <Button
-            href='/production/recording'
-            variant='link'
-            className='w-fit p-0 text-primary'
-          >
-            <Icon icon='uil:arrow-left' width={24} height={24} />
-            Kembali
-          </Button>
-          <h1 className='text-2xl font-bold text-center'>
-            {type === 'add' && 'Tambah Grading'}
-            {type === 'edit' && 'Edit Grading'}
-            {type === 'detail' && 'Detail Grading'}
-          </h1>
-        </header>
-
-        <form
-          onSubmit={formik.handleSubmit}
-          className='w-full mt-8 flex flex-col gap-6'
-        >
-          {/* Basic Info Card */}
-          <Card
-            title='Informasi Recording'
-            className={{
-              wrapper: 'w-full mb-6 shadow-sm',
-              body: 'p-6',
-            }}
-          >
-            <div className='grid grid-cols-2 md:grid-cols-4 gap-4 mb-6'>
-              {/* Status Approval */}
-              {recording?.approval && (
-                <div>
-                  <span className='text-sm text-gray-600'>Status Approval</span>
-                  <div className='mt-1'>
-                    <Badge
-                      variant='soft'
-                      color={
-                        recording.approval.action === 'APPROVED'
-                          ? 'success'
-                          : recording.approval.action === 'REJECTED'
-                            ? 'error'
-                            : recording.approval.action === 'UPDATED'
-                              ? 'warning'
-                              : 'info'
-                      }
-                      className={{
-                        badge: 'whitespace-nowrap font-semibold text-xs px-2',
-                      }}
-                    >
-                      {(() => {
-                        const actionText = (() => {
-                          switch (recording.approval.action) {
-                            case 'APPROVED':
-                              return 'Disetujui';
-                            case 'REJECTED':
-                              return 'Ditolak';
-                            case 'CREATED':
-                              return 'Dibuat';
-                            case 'UPDATED':
-                              return 'Diperbarui';
-                            default:
-                              return recording.approval.action;
-                          }
-                        })();
-
-                        const stepName = recording.approval.step_name;
-
-                        if (stepName === actionText) {
-                          return stepName;
-                        }
-
-                        return `${stepName} - ${actionText}`;
-                      })()}
-                    </Badge>
-                  </div>
-                </div>
-              )}
-              {/* Recording Info */}
-              <div>
-                <span className='text-sm text-gray-600'>Lokasi</span>
-                <p className='font-semibold'>
-                  {projectFlockKandang?.project_flock?.location?.name || '-'}
-                </p>
-              </div>
-              <div>
-                <span className='text-sm text-gray-600'>Project Flock</span>
-                <p className='font-semibold'>
-                  {projectFlockKandang?.project_flock?.flock_name || '-'}
-                </p>
-              </div>
-              <div>
-                <span className='text-sm text-gray-600'>Kandang</span>
-                <p className='font-semibold'>
-                  {projectFlockKandang?.kandang?.name || '-'}
-                </p>
-              </div>
-              <div>
-                <span className='text-sm text-gray-600'>Tanggal Recording</span>
-                <p className='font-semibold'>
-                  {recording
-                    ? formatDate(recording.record_datetime, 'DD MMMM YYYY')
-                    : '-'}
-                </p>
-              </div>
-              <div>
-                <span className='text-sm text-gray-600'>Hari</span>
-                <p className='font-semibold'>Hari ke-{recording?.day || '-'}</p>
-              </div>
-              <div>
-                <span className='text-sm text-gray-600'>Kategori</span>
-                <p className='font-semibold'>
-                  <Badge
-                    variant='soft'
-                    color={
-                      recording?.project_flock_category === 'LAYING'
-                        ? 'info'
-                        : 'warning'
-                    }
-                    size='sm'
-                  >
-                    {recording?.project_flock_category || '-'}
-                  </Badge>
-                </p>
-              </div>
-              <div>
-                <span className='text-sm text-gray-600'>Periode</span>
-                <p className='font-semibold'>
-                  <Badge
-                    variant='soft'
-                    color='neutral'
-                    size='sm'
-                    className={{
-                      badge: 'whitespace-nowrap font-semibold text-xs px-2',
-                    }}
-                  >
-                    Periode {projectFlockKandang?.project_flock?.period || '-'}
-                  </Badge>
-                </p>
-              </div>
-            </div>
-
-            <div
-              className={
-                type === 'detail'
-                  ? 'space-y-6'
-                  : 'grid grid-cols-1 md:grid-cols-2 gap-6'
-              }
-            >
-              {/* Additional Recording Info */}
-              <div className='bg-blue-50 rounded-lg p-4 border border-blue-200'>
-                <div className='flex items-center justify-between mb-3'>
-                  <div className='bg-blue-100 rounded-full p-2'>
-                    <Icon
-                      icon='material-symbols:info'
-                      width={20}
-                      height={20}
-                      className='text-blue-600'
-                    />
-                  </div>
-                  <span className='text-xs text-blue-600 font-medium uppercase tracking-wide'>
-                    Detail Recording
-                  </span>
-                </div>
-                <div className='space-y-2'>
-                  <div>
-                    <p className='text-xs text-gray-600'>Area</p>
-                    <p className='font-semibold text-blue-900'>
-                      {projectFlockKandang?.project_flock?.area?.name || '-'}
-                    </p>
-                  </div>
-                  <div>
-                    <p className='text-xs text-gray-600'>Status Kandang</p>
-                    <p className='font-semibold text-blue-900'>
-                      {projectFlockKandang?.kandang?.status || '-'}
-                    </p>
-                  </div>
-                </div>
-              </div>
-
-              {/* Total Telur Konsumsi Baik Info */}
-              <div
-                className={`rounded-lg p-4 border-2 ${
-                  isDataLoading
-                    ? 'bg-gray-50 border-gray-200'
-                    : isGradingExceedsAvailable
-                      ? 'bg-red-50 border-red-200'
-                      : isGradingIncomplete && hasUserStartedGrading
-                        ? 'bg-yellow-50 border-yellow-200'
-                        : 'bg-green-50 border-green-200'
-                }`}
-              >
-                <div className='flex items-center justify-between mb-3'>
-                  <div>
-                    <p className='text-sm font-medium text-gray-600 mb-1'>
-                      Total Telur Konsumsi Baik
-                    </p>
-                    <div className='flex items-baseline gap-2'>
-                      <p className='text-2xl font-bold text-gray-900'>
-                        {isDataLoading ? (
-                          <span className='loading loading-spinner loading-sm'></span>
-                        ) : (
-                          totalKonsumsiBaikEggs
-                        )}{' '}
-                        <span className='text-sm text-gray-500 font-medium'>
-                          telur
-                        </span>
-                      </p>
-                    </div>
-                  </div>
-                  <div
-                    className={`rounded-full p-2 ${
-                      isDataLoading
-                        ? 'bg-gray-100'
-                        : isGradingExceedsAvailable
-                          ? 'bg-red-100'
-                          : isGradingIncomplete && hasUserStartedGrading
-                            ? 'bg-yellow-100'
-                            : 'bg-green-100'
-                    }`}
-                  >
-                    <Icon
-                      icon={
-                        isDataLoading
-                          ? 'material-symbols:hourglass-empty'
-                          : isGradingExceedsAvailable
-                            ? 'material-symbols:error'
-                            : isGradingIncomplete && hasUserStartedGrading
-                              ? 'material-symbols:warning'
-                              : 'material-symbols:check-circle'
-                      }
-                      width={20}
-                      height={20}
-                      className={
-                        isDataLoading
-                          ? 'text-gray-500'
-                          : isGradingExceedsAvailable
-                            ? 'text-red-600'
-                            : isGradingIncomplete && hasUserStartedGrading
-                              ? 'text-yellow-600'
-                              : 'text-green-600'
-                      }
-                    />
-                  </div>
-                </div>
-
-                {/* Progress Bar */}
-                <div className='space-y-2'>
-                  <div className='flex items-center justify-between text-sm'>
-                    <span className='text-gray-600'>Total yang digrading:</span>
-                    <span
-                      className={`font-semibold ${
-                        isDataLoading
-                          ? 'text-gray-500'
-                          : isGradingExceedsAvailable
-                            ? 'text-red-600'
-                            : isGradingIncomplete && hasUserStartedGrading
-                              ? 'text-yellow-600'
-                              : 'text-green-600'
-                      }`}
-                    >
-                      {isDataLoading ? (
-                        <span className='loading loading-spinner loading-xs'></span>
-                      ) : (
-                        `${currentGradingTotal} / ${totalKonsumsiBaikEggs}`
-                      )}
-                    </span>
-                  </div>
-                  <div className='w-full bg-gray-200 rounded-full h-2 overflow-hidden'>
-                    <div
-                      className={`h-full transition-all duration-300 ${
-                        isDataLoading
-                          ? 'bg-gray-400'
-                          : isGradingExceedsAvailable
-                            ? 'bg-red-500'
-                            : isGradingIncomplete && hasUserStartedGrading
-                              ? 'bg-yellow-500'
-                              : 'bg-green-500'
-                      }`}
-                      style={{
-                        width: isDataLoading
-                          ? '0%'
-                          : `${Math.min((currentGradingTotal / totalKonsumsiBaikEggs) * 100, 100)}%`,
-                      }}
-                    />
-                  </div>
-                  {!isDataLoading && isGradingExceedsAvailable && (
-                    <div className='flex items-center gap-1 text-xs text-red-600 mt-1'>
-                      <Icon
-                        icon='material-symbols:warning'
-                        width={12}
-                        height={12}
-                      />
-                      <span>Melebihi batas tersedia</span>
-                    </div>
-                  )}
-                  {!isDataLoading &&
-                    isGradingIncomplete &&
-                    hasUserStartedGrading && (
-                      <div className='flex items-center gap-1 text-xs text-yellow-600 mt-1'>
-                        <Icon
-                          icon='material-symbols:info'
-                          width={12}
-                          height={12}
-                        />
-                        <span>
-                          Grading belum lengkap, semua telur harus digrading
-                        </span>
-                      </div>
-                    )}
-                  {isDataLoading && (
-                    <div className='flex items-center gap-1 text-xs text-gray-500 mt-1'>
-                      <Icon
-                        icon='material-symbols:hourglass-empty'
-                        width={12}
-                        height={12}
-                      />
-                      <span>Memuat data telur konsumsi baik...</span>
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
-          </Card>
-
-          {/* Grading Table */}
-          <Card
-            title='Grading Telur'
-            className={{
-              wrapper: 'w-full mb-4 shadow',
-              title: 'mb-4',
-            }}
-          >
-            <div className='overflow-x-auto'>
-              <table className='table'>
-                <thead>
-                  <tr>
-                    {type !== 'detail' && (
-                      <th>
-                        <CheckboxInput
-                          name='select-all-grading'
-                          checked={
-                            formik.values.eggs_grading?.length ===
-                              selectedGradingItems.length &&
-                            formik.values.eggs_grading?.length > 0
-                          }
-                          onChange={(
-                            e: React.ChangeEvent<HTMLInputElement>
-                          ) => {
-                            if (e.target.checked) {
-                              setSelectedGradingItems(
-                                formik.values.eggs_grading?.map(
-                                  (_, idx) => idx
-                                ) ?? []
-                              );
-                            } else {
-                              setSelectedGradingItems([]);
-                            }
-                          }}
-                          classNames={{
-                            wrapper: 'flex justify-center',
-                            checkbox: 'checkbox checkbox-sm',
-                          }}
-                        />
-                      </th>
-                    )}
-                    <th>
-                      Grade
-                      <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                        data-tip='required'
-                      >
-                        <span className='text-error'>*</span>
-                      </span>
-                    </th>
-                    <th>
-                      Jumlah
-                      <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                        data-tip='required'
-                      >
-                        <span className='text-error'>*</span>
-                      </span>
-                    </th>
-                    {type !== 'detail' && <th>Action</th>}
-                  </tr>
-                </thead>
-                <tbody>
-                  {formik.values.eggs_grading?.map((grading, idx) => (
-                    <tr key={`grading-${idx}`}>
-                      {type !== 'detail' && (
-                        <td className='!align-middle'>
-                          <CheckboxInput
-                            name={`grading-${idx}`}
-                            checked={selectedGradingItems.includes(idx)}
-                            onChange={(
-                              e: React.ChangeEvent<HTMLInputElement>
-                            ) => {
-                              if (e.target.checked) {
-                                setSelectedGradingItems([
-                                  ...selectedGradingItems,
-                                  idx,
-                                ]);
-                              } else {
-                                setSelectedGradingItems(
-                                  selectedGradingItems.filter((i) => i !== idx)
-                                );
-                              }
-                            }}
-                            classNames={{
-                              wrapper: 'flex justify-center',
-                              checkbox: 'checkbox checkbox-sm',
-                            }}
-                          />
-                        </td>
-                      )}
-                      <td>
-                        <SelectInput
-                          required
-                          value={
-                            grading.grade
-                              ? { value: grading.grade, label: grading.grade }
-                              : null
-                          }
-                          onChange={handleGradingGradeChangeWrapper(idx)}
-                          options={[
-                            { value: 'Grade A', label: 'Grade A' },
-                            { value: 'Grade B', label: 'Grade B' },
-                            { value: 'Grade C', label: 'Grade C' },
-                            { value: 'Grade D', label: 'Grade D' },
-                          ]}
-                          placeholder='Pilih Grade'
-                          isError={
-                            isRepeaterInputError('eggs_grading', 'grade', idx)
-                              .isError
-                          }
-                          errorMessage={
-                            isRepeaterInputError('eggs_grading', 'grade', idx)
-                              .errorMessage
-                          }
-                          isDisabled={type === 'detail'}
-                          className={{
-                            wrapper: 'w-full min-w-32',
-                          }}
-                          isSearchable={false}
-                          isClearable={type !== 'detail'}
-                        />
-                      </td>
-                      <td>
-                        <NumberInput
-                          required
-                          name={`eggs_grading.${idx}.qty`}
-                          value={grading.qty}
-                          onChange={handleGradingQtyChangeWrapper(idx)}
-                          onBlur={formik.handleBlur}
-                          decimalScale={0}
-                          allowNegative={false}
-                          thousandSeparator=','
-                          decimalSeparator='.'
-                          isError={
-                            isRepeaterInputError('eggs_grading', 'qty', idx)
-                              .isError ||
-                            (!isDataLoading &&
-                              (isGradingExceedsAvailable ||
-                                (isGradingIncomplete && hasUserStartedGrading)))
-                          }
-                          errorMessage={
-                            isRepeaterInputError('eggs_grading', 'qty', idx)
-                              .errorMessage ||
-                            (!isDataLoading && isGradingExceedsAvailable
-                              ? `Total grading melebihi telur yang tersedia (${totalKonsumsiBaikEggs})`
-                              : !isDataLoading &&
-                                  isGradingIncomplete &&
-                                  hasUserStartedGrading
-                                ? `Total grading (${currentGradingTotal}) harus sama dengan total telur konsumsi baik (${totalKonsumsiBaikEggs})`
-                                : undefined)
-                          }
-                          readOnly={type === 'detail'}
-                          className={{
-                            wrapper: 'w-full min-w-24',
-                          }}
-                          placeholder='Masukkan jumlah telur'
-                        />
-                      </td>
-                      {type !== 'detail' && (
-                        <td>
-                          <div className='flex items-center'>
-                            <Button
-                              type='button'
-                              color='error'
-                              onClick={() => removeGrading(idx)}
-                            >
-                              <Icon
-                                icon='mdi:trash-can'
-                                width={24}
-                                height={24}
-                              />
-                            </Button>
-                          </div>
-                        </td>
-                      )}
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-            {type !== 'detail' && (
-              <div className='flex justify-center items-center mt-4 gap-4'>
-                {selectedGradingItems.length > 0 && (
-                  <Button
-                    type='button'
-                    color='error'
-                    onClick={removeSelectedGrading}
-                    disabled={selectedGradingItems.length === 0}
-                    className='w-fit'
-                  >
-                    <Icon icon='mdi:trash-can' width={24} height={24} />
-                    Hapus Terpilih ({selectedGradingItems.length})
-                  </Button>
-                )}
-                <Button
-                  type='button'
-                  color='success'
-                  onClick={addGrading}
-                  className='w-fit'
-                >
-                  <Icon icon='ic:round-plus' width={24} height={24} />
-                  Tambah Grading
-                </Button>
-              </div>
-            )}
-          </Card>
-
-          {/* Action buttons */}
-          <div className='flex flex-row justify-between gap-2 flex-wrap'>
-            {type !== 'add' && (
-              <div className='flex flex-row justify-start gap-2'>
-                {deleteRecordingClickHandler && (
-                  <Button
-                    type='button'
-                    color='error'
-                    onClick={deleteRecordingClickHandler}
-                    className='px-4'
-                  >
-                    <Icon
-                      icon='material-symbols:delete-outline-rounded'
-                      width={24}
-                      height={24}
-                      className='justify-start text-sm'
-                    />
-                    Delete
-                  </Button>
-                )}
-                {type !== 'edit' && initialValues && (
-                  <Button
-                    type='button'
-                    color='warning'
-                    href={`/production/recording/grading/edit/?gradingId=${initialValues.id}`}
-                    className='px-4'
-                  >
-                    <Icon
-                      icon='material-symbols:edit-outline'
-                      width={24}
-                      height={24}
-                      className='justify-start text-sm'
-                    />
-                    Edit
-                  </Button>
-                )}
-              </div>
-            )}
-            {type !== 'detail' && (
-              <div
-                className={cn('flex flex-row justify-end gap-2', {
-                  'w-full': type === 'add',
-                })}
-              >
-                <Button
-                  type='reset'
-                  color='warning'
-                  className='px-4'
-                  onClick={(e) => {
-                    formik.handleReset(e);
-                    formik.validateForm();
-                  }}
-                >
-                  Reset
-                </Button>
-                <Button
-                  type='submit'
-                  color='primary'
-                  className='px-4'
-                  isLoading={formik.isSubmitting}
-                  disabled={
-                    !formik.isValid ||
-                    formik.isSubmitting ||
-                    isDataLoading ||
-                    isGradingExceedsAvailable ||
-                    (isGradingIncomplete && hasUserStartedGrading)
-                  }
-                >
-                  Submit
-                </Button>
-              </div>
-            )}
-          </div>
-          {gradingFormErrorMessage && (
-            <div role='alert' className='alert alert-error'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{gradingFormErrorMessage}</span>
-            </div>
-          )}
-        </form>
-      </section>
-
-      {/* ===== MODALS ===== */}
-      {type !== 'add' && (
-        <>
-          <ConfirmationModal
-            ref={deleteModal.ref}
-            type='error'
-            text='Apakah anda yakin ingin menghapus data Grading ini?'
-            secondaryButton={{
-              text: 'Tidak',
-            }}
-            primaryButton={{
-              text: 'Ya',
-              color: 'error',
-              isLoading: isDeleteLoading,
-              onClick: confirmationModalDeleteClickHandler,
-            }}
-          />
-        </>
-      )}
-    </>
-  );
-};
-
-export default GradingForm;
diff --git a/src/services/api/production.ts b/src/services/api/production.ts
index 4266f6b7..ea06615a 100644
--- a/src/services/api/production.ts
+++ b/src/services/api/production.ts
@@ -9,8 +9,6 @@ import {
   CreateRecordingPayload,
   Recording,
   UpdateRecordingPayload,
-  CreateGradingPayload,
-  UpdateGradingPayload,
   NextDayRecording,
 } from '@/types/api/production/recording';
 import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
@@ -64,28 +62,6 @@ export class RecordingService extends BaseApiService<
     });
   }
 
-  async createGrading(
-    payload: CreateGradingPayload
-  ): Promise<BaseApiResponse<unknown> | undefined> {
-    return await this.customRequest<BaseApiResponse<unknown>>('gradings', {
-      method: 'POST',
-      payload,
-    });
-  }
-
-  async updateGrading(
-    gradingId: number,
-    payload: UpdateGradingPayload
-  ): Promise<BaseApiResponse<unknown> | undefined> {
-    return await this.customRequest<BaseApiResponse<unknown>>(
-      `gradings/${gradingId}`,
-      {
-        method: 'PUT',
-        payload,
-      }
-    );
-  }
-
   async deleteGrading(
     gradingId: number
   ): Promise<BaseApiResponse<unknown> | undefined> {