feat(FE-441): Show laying metrics and extend ProductionMetrics

src/components/pages/production/recording/form/RecordingForm.tsx

@@ -1540,7 +1540,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
           {/* FCR & Mortality Metrics - Detail View Only */}
           {type === 'detail' && initialValues && (
-            <div className='grid grid-cols-2 gap-6 mb-6'>
+            <div
+              className={`grid gap-6 mb-6 ${
+                initialValues.project_flock_category === 'LAYING'
+                  ? 'grid-cols-3'
+                  : 'grid-cols-2'
+              }`}
+            >
               {/* FCR Section */}
               <div className='border border-gray-200 rounded-lg bg-white'>
                 <div className='px-4 py-3 border-b border-gray-200'>
@@ -1557,24 +1563,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         <th className='text-center py-2 font-semibold text-gray-600'>
                           STANDAR
                         </th>
-                        <th className='text-center py-2 font-semibold text-gray-600'>
-                          TOTAL PEMAKAIAN PAKAN (KG)
-                        </th>
                       </tr>
                     </thead>
                     <tbody>
-                      <tr className='border-b border-gray-100'>
-                        <td className='py-3 font-medium'>Bobot</td>
-                        <td className='text-center py-3'>
-                          <span className='font-semibold'>
-                            {initialValues.avg_daily_gain?.toFixed(2) || '-'}
-                          </span>
-                        </td>
-                        <td className='text-center py-3 text-gray-600'>-</td>
-                        <td className='text-center py-3 text-gray-600'>
-                          {formatNumber(initialValues.cum_intake || 0)}
-                        </td>
-                      </tr>
                       <tr>
                         <td className='py-3 font-medium'>FCR</td>
                         <td className='text-center py-3'>
@@ -1583,7 +1574,17 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           </span>
                         </td>
                         <td className='text-center py-3 text-gray-600'>-</td>
-                        <td className='text-center py-3'></td>
+                      </tr>
+                      <tr>
+                        <td className='py-3 font-medium'>Feed Intake (KG)</td>
+                        <td className='text-center py-3'>
+                          <span className='font-semibold'>
+                            {formatNumber(initialValues.feed_intake || 0)}
+                          </span>
+                        </td>
+                        <td className='text-center py-3 text-gray-600'>
+                          {formatNumber(initialValues.feed_intake_std || 0)}
+                        </td>
                       </tr>
                     </tbody>
                   </table>
@@ -1601,12 +1602,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   <table className='w-full text-sm'>
                     <thead>
                       <tr className='border-b border-gray-200'>
-                        <th
-                          colSpan={2}
-                          className='text-center py-2 font-semibold text-gray-600 border-r border-gray-200'
-                        >
-                          JUMLAH AYAM
-                        </th>
                         <th
                           colSpan={2}
                           className='text-center py-2 font-semibold text-gray-600 border-r border-gray-200'
@@ -1630,12 +1625,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         <th className='text-center py-2 font-semibold text-xs text-gray-500'>
                           Total
                         </th>
-                        <th className='text-center py-2 font-semibold text-xs text-gray-500 border-r border-gray-200'>
-                          (%)
-                        </th>
-                        <th className='text-center py-2 font-semibold text-xs text-gray-500'>
-                          Total
-                        </th>
                         <th className='text-center py-2 font-semibold text-xs text-gray-500'>
                           (%)
                         </th>
@@ -1645,19 +1634,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       <tr>
                         <td className='text-center py-3 border-r border-gray-100'>
                           <span className='font-semibold'>
-                            {formatNumber(initialValues.total_chick_qty || 0)}
+                            {formatNumber(initialValues.hand_day || 0)}
                           </span>
                         </td>
                         <td className='text-center py-3 border-r border-gray-200 text-gray-600'>
-                          -
+                          {initialValues.hand_day_std !== undefined
-                        </td>
+                            ? `${initialValues.hand_day_std}%`
-                        <td className='text-center py-3 border-r border-gray-100'>
+                            : '-'}
-                          <span className='font-semibold'>
-                            {formatNumber(initialValues.daily_gain || 0)}
-                          </span>
-                        </td>
-                        <td className='text-center py-3 border-r border-gray-200 text-gray-600'>
-                          -
                         </td>
                         <td className='text-center py-3 border-r border-gray-100'>
                           <span className='font-semibold'>
@@ -1674,6 +1657,60 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   </table>
                 </div>
               </div>
+
+              {/* Egg Production Section - Only for LAYING category */}
+              {type === 'detail' &&
+                initialValues &&
+                initialValues.project_flock_category === 'LAYING' && (
+                  <div className='border border-gray-200 rounded-lg bg-white'>
+                    <div className='px-4 py-3 border-b border-gray-200'>
+                      <span className='card-title font-bold text-xl'>
+                        Produksi Telur
+                      </span>
+                    </div>
+                    <div className='p-4'>
+                      <table className='w-full text-sm'>
+                        <thead>
+                          <tr className='border-b border-gray-200'>
+                            <th className='text-left py-2 font-semibold text-gray-600'></th>
+                            <th className='text-center py-2 font-semibold text-gray-600'>
+                              AKTUAL
+                            </th>
+                            <th className='text-center py-2 font-semibold text-gray-600'>
+                              STANDAR
+                            </th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <tr>
+                            <td className='py-3 font-medium'>Egg Mesh</td>
+                            <td className='text-center py-3'>
+                              <span className='font-semibold'>
+                                {formatNumber(initialValues.egg_mesh || 0)}
+                              </span>
+                            </td>
+                            <td className='text-center py-3 text-gray-600'>
+                              {formatNumber(initialValues.egg_mesh_std || 0)}
+                            </td>
+                          </tr>
+                          <tr>
+                            <td className='py-3 font-medium'>
+                              Egg Weight (KG)
+                            </td>
+                            <td className='text-center py-3'>
+                              <span className='font-semibold'>
+                                {formatNumber(initialValues.egg_weight || 0)}
+                              </span>
+                            </td>
+                            <td className='text-center py-3 text-gray-600'>
+                              {formatNumber(initialValues.egg_weight_std || 0)}
+                            </td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                )}
             </div>
           )}
 

src/types/api/production/recording.d.ts

@@ -4,12 +4,22 @@ import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
 export type ProductionMetrics = {
   total_depletion_qty: number;
   cum_depletion_rate: number;
-  daily_gain: number;
-  avg_daily_gain: number;
   cum_intake: number;
   fcr_value: number;
   total_chick_qty: number;
-  cum_depletion: number;
+  hand_day?: number;
+  hand_house?: number;
+  feed_intake?: number;
+  egg_mesh?: number;
+  egg_weight?: number;
+  hand_day_std?: number;
+  hand_house_std?: number;
+  feed_intake_std?: number;
+  egg_mesh_std?: number;
+  egg_weight_std?: number;
+  daily_gain?: number;
+  avg_daily_gain?: number;
+  cum_depletion?: number;
 };
 
 export type BaseRecording = {