Merge branch 'feat/FE/US-335/production-data-report' into feat/FE/US-340/TASK-364-365-368-marketing-report

src/components/Navbar.tsx

@@ -54,7 +54,8 @@ const Navbar = ({ title, toggleSidebar }: NavbarProps) => {
 
       <div className='flex gap-2'>
         <Dropdown
-          position='bottom-end'
+          align='end'
+          direction='bottom'
           trigger={
             <div className='btn btn-ghost btn-circle avatar'>
               <div className='w-10 rounded-full border flex justify-center items-center'>
@@ -62,9 +63,11 @@ const Navbar = ({ title, toggleSidebar }: NavbarProps) => {
               </div>
             </div>
           }
-          contentClassName='w-52 mt-3'
+          className={{
+            content: 'w-52 mt-3',
+          }}
         >
-          <Menu className='p-2 bg-base-100 shadow rounded-box menu-sm'>
+          <Menu>
             <MenuItem title='Logout' onClick={logoutClickHandler} />
           </Menu>
         </Dropdown>

src/components/pages/closing/ClosingDetail.tsx

@@ -6,12 +6,13 @@ import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
 import Tabs from '@/components/Tabs';
 import ClosingGeneralInformationTable from '@/components/pages/closing/ClosingGeneralInformationTable';
+import ClosingSapronakTabContent from '@/components/pages/closing/ClosingSapronakTabContent';
+import ClosingProductionDataTabContent from '@/components/pages/closing/ClosingProductionDataTabContent';
 
 import {
   ClosingGeneralInformation,
   BaseClosingSales,
 } from '@/types/api/closing';
-import ClosingSapronakTabContent from './ClosingSapronakTabContent';
 import ClosingSapronakCalculationTabContent from '@/components/pages/closing/ClosingSapronakCalculationTabContent';
 import ClosingOverheadTabContent from '@/components/pages/closing/ClosingOverheadTabContent';
 import SalesReportTable from './sale/SalesReportTable';
@@ -59,7 +60,7 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
       {
         id: 'dataProduksi',
         label: 'Data Produksi',
-        content: 'Data Produksi',
+        content: <ClosingProductionDataTabContent projectFlockId={id} />,
       },
       {
         id: 'keuangan',

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;

src/services/api/closing.ts

@@ -6,6 +6,7 @@ import {
   ClosingGeneralInformation,
   ClosingIncomingSapronak,
   ClosingOutgoingSapronak,
+  ClosingProductionData,
   ClosingOverhead,
   ClosingSapronakCalculation,
 } from '@/types/api/closing';
@@ -134,6 +135,22 @@ export class ClosingApiService extends BaseApiService<Closing, null, null> {
     }
   }
 
+  async getProductionData(id: number) {
+    try {
+      const getProductionDataPath = `${this.basePath}/${id}/production-data`;
+      const getProductionDataRes = await httpClient<
+        BaseApiResponse<ClosingProductionData>
+      >(getProductionDataPath);
+
+      return getProductionDataRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<ClosingProductionData>>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
+
   async getPerhitunganSapronak(
     id: number
   ): Promise<BaseApiResponse<ClosingSapronakCalculation> | undefined> {

src/types/api/closing.d.ts

@@ -79,6 +79,41 @@ export type ClosingIncomingSapronak = {
 
 export type ClosingOutgoingSapronak = ClosingIncomingSapronak;
 
+export type ClosingProductionData = {
+  purchase: {
+    initial_population: number;
+    claim_culling: number;
+    final_population: number;
+    feed_in_kg: number;
+    feed_used_kg: number;
+    feed_used_per_head_kg: number;
+  };
+  sales: {
+    sales_kg: number;
+    sales_head: number;
+    average_weight_kg: number;
+    average_price_per_kg: number;
+  };
+  performance: {
+    depletion_head: number;
+    depletion_percentage: number;
+    age_days: number;
+    mortality_std: number;
+    mortality_act: number;
+    deff_mortality: number;
+    fcr_std: number;
+    fcr_act: number;
+    deff_fcr: number;
+    adg: number;
+    ip: number;
+  };
+  variance: {
+    variance_head: number;
+    variance_head_percentage: number;
+    variance_feed_kg: number;
+  };
+};
+
 // ====== PERHITUNGAN SAPRONAK ======
 
 export type RowSapronakCalculation = {