diff --git a/src/components/pages/closing/ClosingProductionDataTabContent.tsx b/src/components/pages/closing/ClosingProductionDataTabContent.tsx
new file mode 100644
index 00000000..ba8a12ed
--- /dev/null
+++ b/src/components/pages/closing/ClosingProductionDataTabContent.tsx
@@ -0,0 +1,268 @@
+'use client';
+
+import useSWR from 'swr';
+import { ClosingApi } from '@/services/api/closing';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { formatNumber } from '@/lib/helper';
+
+interface ClosingProductionDataTabContentProps {
+  projectFlockId: number;
+}
+
+const ClosingProductionDataTabContent = ({
+  projectFlockId,
+}: ClosingProductionDataTabContentProps) => {
+  const { data: productionData, isLoading } = useSWR(
+    `${ClosingApi.basePath}/${projectFlockId}/production-data`,
+    () => ClosingApi.getProductionData(projectFlockId)
+  );
+
+  if (isLoading) {
+    return (
+      <div className='w-full flex justify-center py-8'>
+        <span className='loading loading-spinner loading-lg' />
+      </div>
+    );
+  }
+
+  if (!productionData || !isResponseSuccess(productionData)) {
+    return (
+      <div className='w-full text-center py-8 text-gray-500'>
+        Gagal memuat data produksi.
+      </div>
+    );
+  }
+
+  const { purchase, sales, performance, variance } = productionData.data;
+
+  // Helper for consistent row styling
+  const DataRow = ({
+    label,
+    value,
+    unit = '',
+    valueClassName = 'font-bold text-gray-800',
+    unitClassName = 'text-gray-500 w-12 text-right',
+  }: {
+    label: string;
+    value: string | number;
+    unit?: string;
+    valueClassName?: string;
+    unitClassName?: string;
+  }) => (
+    <div className='flex justify-between items-center py-1'>
+      <span className='text-gray-500 text-sm font-medium w-1/2'>{label}</span>
+      <div className='flex gap-2 w-1/2 justify-end items-center'>
+        <span className={valueClassName}>{value}</span>
+        {unit && <span className={unitClassName}>{unit}</span>}
+      </div>
+    </div>
+  );
+
+  // Helper for rows with two values (e.g., Deplesi: Ekor & %)
+  const DoubleDataRow = ({
+    label,
+    value1,
+    unit1,
+    value2,
+    unit2,
+    value1ClassName = 'font-bold text-gray-800',
+    value2ClassName = 'font-bold text-blue-500',
+  }: {
+    label: string;
+    value1: string | number;
+    unit1: string;
+    value2: string | number;
+    unit2: string;
+    value1ClassName?: string;
+    value2ClassName?: string;
+  }) => (
+    <div className='flex justify-between items-center py-1'>
+      <span className='text-gray-500 text-sm font-medium w-1/2'>{label}</span>
+      <div className='flex gap-2 w-1/2 justify-end items-center'>
+        <div className='flex gap-2 items-center min-w-[5rem] justify-end'>
+          <span className={value1ClassName}>{value1}</span>
+          <span className='text-gray-500 w-8 text-right'>{unit1}</span>
+        </div>
+        <div className='flex gap-2 items-center min-w-[4rem] justify-end ml-2'>
+          <span className={value2ClassName}>{value2}</span>
+          <span className='text-gray-500 w-4 text-right'>{unit2}</span>
+        </div>
+      </div>
+    </div>
+  );
+
+  return (
+    <div className='w-full rounded-xl p-8 shadow-sm'>
+      <h2 className='text-lg font-bold mb-8 text-gray-800'>Data Produksi</h2>
+
+      <div className='grid grid-cols-1 lg:grid-cols-2 gap-x-24 gap-y-12 relative'>
+        {/* Left Column */}
+        <div className='space-y-10'>
+          {/* Purchase Section */}
+          <section>
+            <h3 className='font-bold text-gray-700 mb-4 text-base'>
+              Pembelian
+            </h3>
+            <div className='space-y-1'>
+              <DataRow
+                label='Populasi Awal'
+                value={formatNumber(purchase.initial_population)}
+                unit='Ekor'
+              />
+              <DataRow
+                label='Claim Culling'
+                value={formatNumber(purchase.claim_culling)}
+                unit='Ekor'
+              />
+              <DataRow
+                label='Populasi Akhir'
+                value={formatNumber(purchase.final_population)}
+                unit='Ekor'
+              />
+              <DataRow
+                label='Pakan Masuk'
+                value={formatNumber(purchase.feed_in_kg)}
+                unit='Kg'
+              />
+              <DataRow
+                label='Pakan Terpakai'
+                value={formatNumber(purchase.feed_used_kg)}
+                unit='Kg'
+              />
+              <DataRow
+                label='Pakan Terpakai per Ekor'
+                value={formatNumber(purchase.feed_used_per_head_kg)}
+                unit='Kg'
+              />
+            </div>
+          </section>
+
+          {/* Sales Section */}
+          <section>
+            <h3 className='font-bold text-gray-700 mb-4 text-base'>
+              Penjualan
+            </h3>
+            <div className='space-y-1'>
+              <DataRow
+                label='Penjualan (Kg)'
+                value={formatNumber(sales.sales_kg)}
+                unit='Kg'
+              />
+              <DataRow
+                label='Penjualan (Ekor)'
+                value={formatNumber(sales.sales_head)}
+                unit='Ekor'
+              />
+              <DataRow
+                label='Bobot Rata-Rata'
+                value={formatNumber(sales.average_weight_kg)}
+                unit='Kg/Ekor'
+              />
+              <DataRow
+                label='Harga Jual Rata-Rata'
+                value={formatNumber(sales.average_price_per_kg)}
+                unit='Rupiah'
+              />
+            </div>
+          </section>
+        </div>
+
+        {/* Divider Line (Absolute centered) */}
+        <div className='hidden lg:block absolute left-1/2 top-0 bottom-0 w-px bg-gray-200 -translate-x-1/2' />
+
+        {/* Right Column */}
+        <div className='space-y-10 flex flex-col h-full'>
+          {/* Performance Section */}
+          <section>
+            <h3 className='font-bold text-gray-700 mb-4 text-base'>
+              Performance
+            </h3>
+            <div className='space-y-1'>
+              <DoubleDataRow
+                label='Deplesi'
+                value1={formatNumber(performance.depletion_head)}
+                unit1='Ekor'
+                value2={formatNumber(performance.depletion_percentage)}
+                unit2='%'
+              />
+              <DataRow
+                label='Umur'
+                value={formatNumber(performance.age_days)}
+                unit='Hari'
+                // Aligning 'Hari' with the first unit column of double row
+                unitClassName='text-gray-500 w-8 text-right mr-[4.5rem]'
+              />
+              <DataRow
+                label='Mortalitas Std'
+                value={formatNumber(performance.mortality_std)}
+                unitClassName='hidden' // No unit shown in screenshot
+              />
+              <DataRow
+                label='Mortalitas Act'
+                value={formatNumber(performance.mortality_act)}
+                unitClassName='hidden'
+              />
+              <DataRow
+                label='DEFF Mortalitas'
+                value={formatNumber(performance.deff_mortality)}
+                unitClassName='hidden'
+              />
+              <DataRow
+                label='FCR Std'
+                value={formatNumber(performance.fcr_std)}
+                unitClassName='hidden'
+              />
+              <DataRow
+                label='FCR Act'
+                value={formatNumber(performance.fcr_act)}
+                unitClassName='hidden'
+              />
+              <DataRow
+                label='DEFF FCR'
+                value={formatNumber(performance.deff_fcr)}
+                unitClassName='hidden'
+              />
+              <DataRow
+                label='ADG'
+                value={formatNumber(performance.adg)}
+                unit='Gr/Hari'
+              />
+              <DataRow
+                label='IP'
+                value={formatNumber(performance.ip)}
+                unitClassName='hidden'
+              />
+            </div>
+          </section>
+
+          {/* Variance Section (Pushed to bottom) */}
+          <section className='mt-auto pt-4'>
+            <h3 className='font-bold text-gray-700 mb-4 text-base'>Selisih</h3>
+            <div className='space-y-1'>
+              <DataRow
+                label='Selisih Ayam'
+                value={formatNumber(variance.variance_head)}
+                unit='Ekor'
+                valueClassName='font-bold text-red-500'
+              />
+              <DataRow
+                label='% Selisih Ayam'
+                value={formatNumber(variance.variance_head_percentage)}
+                unit='%'
+                valueClassName='font-bold text-red-500'
+              />
+              <DataRow
+                label='Selisih Pakan'
+                value={formatNumber(variance.variance_feed_kg)}
+                unit='Kg'
+                valueClassName='font-bold text-red-500'
+              />
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ClosingProductionDataTabContent;