diff --git a/src/components/pages/expense/form/ExpenseRealizationKandangDetailExpense.tsx b/src/components/pages/expense/form/ExpenseRealizationKandangDetailExpense.tsx
new file mode 100644
index 00000000..8b889c5b
--- /dev/null
+++ b/src/components/pages/expense/form/ExpenseRealizationKandangDetailExpense.tsx
@@ -0,0 +1,224 @@
+'use client';
+
+import { FormikContextType } from 'formik';
+
+import Card from '@/components/Card';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import NumberInput from '@/components/input/NumberInput';
+import TextInput from '@/components/input/TextInput';
+
+import { ExpenseRealizationFormValues } from '@/components/pages/expense/form/ExpenseRealizationForm.schema';
+import { cn } from '@/lib/helper';
+import { NonstockApi } from '@/services/api/master-data';
+import { Nonstock } from '@/types/api/master-data/nonstock';
+
+interface ExpenseRealizationKandangDetailExpenseProps {
+  type?: 'add' | 'edit' | 'detail';
+  formik: FormikContextType<ExpenseRealizationFormValues>;
+  className?: {
+    wrapper?: string;
+  };
+}
+
+const ExpenseRealizationKandangDetailExpense: React.FC<
+  ExpenseRealizationKandangDetailExpenseProps
+> = ({ type, formik, className }) => {
+  const {
+    setInputValue: setNonstockInputValue,
+    options: nonstockOptions,
+    isLoadingOptions: isLoadingNonstockOptions,
+  } = useSelect<Nonstock>(NonstockApi.basePath, 'id', 'name');
+
+  const nonstockChangeHandler = (
+    kandangExpenseIdx: number,
+    costItemIdx: number,
+    val: OptionType | OptionType[] | null
+  ) => {
+    formik.setFieldTouched(
+      `realizations[${kandangExpenseIdx}].cost_items[${costItemIdx}].nonstock`,
+      true
+    );
+    formik.setFieldValue(
+      `realizations[${kandangExpenseIdx}].cost_items[${costItemIdx}].nonstock`,
+      val
+    );
+  };
+
+  const isExpenseRepeaterInputError = (
+    column: 'nonstock' | 'quantity' | 'total_cost' | 'notes',
+    kandangExpenseIdx: number,
+    expenseIdx: number
+  ) => {
+    return (
+      formik.touched.realizations?.[kandangExpenseIdx]?.cost_items?.[
+        expenseIdx
+      ]?.[column] &&
+      Boolean(
+        formik.errors.realizations?.[kandangExpenseIdx] instanceof Object &&
+          formik.errors.realizations?.[kandangExpenseIdx].cost_items?.[
+            expenseIdx
+          ] instanceof Object &&
+          formik.errors.realizations?.[kandangExpenseIdx].cost_items?.[
+            expenseIdx
+          ]?.[column]
+      )
+    );
+  };
+
+  return (
+    <Card
+      className={{
+        wrapper: cn('w-full', className?.wrapper),
+        body: 'p-4 shadow',
+      }}
+    >
+      <div className='mb-4 text-center'>
+        <h4 className='font-bold text-xl'>
+          Rincian Realisasi Biaya Operasional
+        </h4>
+      </div>
+
+      <div className='w-full flex flex-col gap-6'>
+        {formik.values.realizations.length === 0 && (
+          <div>
+            <p className='text-sm text-gray-400 text-center'>
+              Pilih kandang terlebih dahulu!
+            </p>
+          </div>
+        )}
+
+        {formik.values.realizations.map((kandangExpense, kandangExpenseIdx) => {
+          const kandangName = formik.values.kandangs?.find(
+            (kandang) => kandang.id === kandangExpense.kandang_id
+          );
+
+          return (
+            kandangName?.name && (
+              <div
+                key={`kandangExpense-${kandangExpenseIdx}`}
+                className='w-full flex flex-col gap-4'
+              >
+                <div>
+                  <h5 className='mb-2 text-lg font-bold text-center'>
+                    Biaya {kandangName?.name}
+                  </h5>
+
+                  <div className='overflow-x-auto'>
+                    <table className='table'>
+                      <thead>
+                        <tr>
+                          <th>Nonstock</th>
+                          <th>Total Kuantitas</th>
+                          <th>Total Biaya</th>
+                          <th>Catatan</th>
+                        </tr>
+                      </thead>
+
+                      <tbody>
+                        {kandangExpense.cost_items.map(
+                          (expenseItem, expenseIdx) => (
+                            <tr key={`expense-${expenseIdx}`}>
+                              <td className='p-2'>
+                                <SelectInput
+                                  placeholder='Pilih Nonstock'
+                                  value={expenseItem.nonstock}
+                                  onChange={(val) => {
+                                    nonstockChangeHandler(
+                                      kandangExpenseIdx,
+                                      expenseIdx,
+                                      val
+                                    );
+                                  }}
+                                  options={nonstockOptions}
+                                  isLoading={isLoadingNonstockOptions}
+                                  onInputChange={setNonstockInputValue}
+                                  className={{ wrapper: 'min-w-48' }}
+                                  isDisabled
+                                />
+                              </td>
+
+                              <td className='p-2'>
+                                <NumberInput
+                                  required
+                                  name={`realizations[${kandangExpenseIdx}].cost_items[${expenseIdx}].quantity`}
+                                  placeholder='Masukkan Total Kuantitas'
+                                  value={
+                                    formik.values.realizations[
+                                      kandangExpenseIdx
+                                    ].cost_items[expenseIdx].quantity ?? ''
+                                  }
+                                  onChange={formik.handleChange}
+                                  onBlur={formik.handleBlur}
+                                  isError={isExpenseRepeaterInputError(
+                                    'quantity',
+                                    kandangExpenseIdx,
+                                    expenseIdx
+                                  )}
+                                  className={{ wrapper: 'min-w-24' }}
+                                />
+                              </td>
+
+                              <td className='p-2'>
+                                <NumberInput
+                                  name={`realizations[${kandangExpenseIdx}].cost_items[${expenseIdx}].total_cost`}
+                                  placeholder='Masukkan Total Biaya'
+                                  value={
+                                    formik.values.realizations[
+                                      kandangExpenseIdx
+                                    ].cost_items[expenseIdx].total_cost ?? ''
+                                  }
+                                  onChange={formik.handleChange}
+                                  onBlur={formik.handleBlur}
+                                  isError={isExpenseRepeaterInputError(
+                                    'total_cost',
+                                    kandangExpenseIdx,
+                                    expenseIdx
+                                  )}
+                                  inputPrefix={
+                                    <span className='text-gray-600 font-medium'>
+                                      Rp
+                                    </span>
+                                  }
+                                  className={{ wrapper: 'min-w-24' }}
+                                />
+                              </td>
+
+                              <td className='p-2'>
+                                <TextInput
+                                  name={`realizations[${kandangExpenseIdx}].cost_items[${expenseIdx}].notes`}
+                                  placeholder='Tuliskan catatan'
+                                  value={
+                                    formik.values.realizations[
+                                      kandangExpenseIdx
+                                    ].cost_items[expenseIdx].notes ?? ''
+                                  }
+                                  onChange={formik.handleChange}
+                                  onBlur={formik.handleBlur}
+                                  isError={isExpenseRepeaterInputError(
+                                    'notes',
+                                    kandangExpenseIdx,
+                                    expenseIdx
+                                  )}
+                                  className={{ wrapper: 'min-w-24' }}
+                                />
+                              </td>
+                            </tr>
+                          )
+                        )}
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </div>
+            )
+          );
+        })}
+      </div>
+    </Card>
+  );
+};
+
+export default ExpenseRealizationKandangDetailExpense;