From d786b7b5ba8795565aedad172554419f4f0c3160 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 15 Jan 2026 15:41:11 +0700
Subject: [PATCH] feat(FE): Add warehouse display and standard detail modals

---
 .../recording/form/RecordingForm.tsx          | 198 +++++++++++++++++-
 1 file changed, 196 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 46fba9af..13267c22 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -20,7 +20,7 @@ import SelectInput, {
 import CheckboxInput from '@/components/input/CheckboxInput';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
-import { useModal } from '@/components/Modal';
+import Modal, { useModal } from '@/components/Modal';
 import AlertErrorList from '@/components/helper/form/FormErrors';
 
 import {
@@ -121,6 +121,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   const approveModal = useModal();
   const rejectModal = useModal();
   const deleteModal = useModal();
+  const fcrStandardModal = useModal();
+  const productionStandardModal = useModal();
 
   const isRecordingApproved = useCallback((recording?: Recording) => {
     return (
@@ -1565,9 +1567,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         : '-'}
                     </p>
                   </div>
+                  <div>
+                    <span className='text-sm text-gray-600'>Gudang</span>
+                    <p className='font-semibold'>
+                      {initialValues.warehouse?.name || '-'}
+                    </p>
+                  </div>
                   <div>
                     <span className='text-sm text-gray-600'>Hari</span>
-                    <p className='font-semibold'>Hari ke-{initialValues.day}</p>
+                    <p className='font-semibold'>
+                      Hari ke-{initialValues.day} (Minggu ke-
+                      {initialValues.project_flock?.production_standart?.week ||
+                        '-'}
+                      )
+                    </p>
                   </div>
                   <div>
                     <span className='text-sm text-gray-600'>Kategori</span>
@@ -1604,6 +1617,41 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       </Badge>
                     </p>
                   </div>
+                  <div>
+                    <span className='text-sm text-gray-600'>Standard FCR</span>
+                    <div className='mt-1'>
+                      <Badge
+                        variant='soft'
+                        color='primary'
+                        className={{
+                          badge:
+                            'cursor-pointer hover:opacity-80 transition-opacity whitespace-nowrap',
+                        }}
+                        onClick={() => fcrStandardModal.openModal()}
+                      >
+                        {initialValues.project_flock?.fcr?.name || '-'}
+                      </Badge>
+                    </div>
+                  </div>
+                  <div>
+                    <span className='text-sm text-gray-600'>
+                      Standard Produksi
+                    </span>
+                    <div className='mt-1'>
+                      <Badge
+                        variant='soft'
+                        color='primary'
+                        className={{
+                          badge:
+                            'cursor-pointer hover:opacity-80 transition-opacity whitespace-nowrap',
+                        }}
+                        onClick={() => productionStandardModal.openModal()}
+                      >
+                        {initialValues.project_flock?.production_standart
+                          ?.name || '-'}
+                      </Badge>
+                    </div>
+                  </div>
                 </div>
               </Card>
             )}
@@ -2663,6 +2711,152 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             )}
         </>
       )}
+
+      {/* FCR Standard Modal */}
+      <Modal
+        ref={fcrStandardModal.ref}
+        className={{
+          modal: 'p-0',
+          modalBox: 'p-0 rounded-2xl xl:max-w-4/12 max-w-sm',
+        }}
+      >
+        <div className='space-y-6'>
+          {/* Modal Header */}
+          <div className='flex items-center justify-between gap-2 py-3 border-b border-gray-300 px-4'>
+            <div className='flex items-center gap-2 text-primary'>
+              <Icon icon='mdi:chart-line' width={20} height={20} />
+              <h3 className='font-semibold'>Detail Standard FCR</h3>
+            </div>
+            <Button
+              variant='link'
+              onClick={fcrStandardModal.closeModal}
+              className='text-gray-500 hover:text-gray-700 transition-colors cursor-pointer'
+            >
+              <Icon icon='heroicons:x-mark' width={20} height={20} />
+            </Button>
+          </div>
+          <div className='space-y-4 px-4 pb-4'>
+            <div>
+              <span className='text-sm text-gray-600'>Nama Standard</span>
+              <p className='font-semibold'>
+                {initialValues?.project_flock?.fcr?.name || '-'}
+              </p>
+            </div>
+            <div>
+              <span className='text-sm text-gray-600'>FCR Standard</span>
+              <p className='font-semibold'>
+                {initialValues?.project_flock?.fcr?.fcr_std != null
+                  ? formatNumber(
+                      initialValues?.project_flock?.fcr?.fcr_std || 0
+                    )
+                  : '-'}
+              </p>
+            </div>
+          </div>
+        </div>
+      </Modal>
+
+      {/* Production Standard Modal */}
+      <Modal
+        ref={productionStandardModal.ref}
+        className={{
+          modal: 'p-0',
+          modalBox: 'p-0 rounded-2xl xl:max-w-4/12 max-w-sm',
+        }}
+      >
+        <div className='space-y-6'>
+          {/* Modal Header */}
+          <div className='flex items-center justify-between gap-2 py-3 border-b border-gray-300 px-4'>
+            <div className='flex items-center gap-2 text-primary'>
+              <Icon icon='mdi:clipboard-text' width={20} height={20} />
+              <h3 className='font-semibold'>Detail Standard Produksi</h3>
+            </div>
+            <Button
+              variant='link'
+              onClick={productionStandardModal.closeModal}
+              className='text-gray-500 hover:text-gray-700 transition-colors cursor-pointer'
+            >
+              <Icon icon='heroicons:x-mark' width={20} height={20} />
+            </Button>
+          </div>
+          <div className='space-y-4 px-4 pb-4'>
+            <div>
+              <span className='text-sm text-gray-600'>Nama Standard</span>
+              <p className='font-semibold'>
+                {initialValues?.project_flock?.production_standart?.name || '-'}
+              </p>
+            </div>
+            <div>
+              <span className='text-sm text-gray-600'>Minggu</span>
+              <p className='font-semibold'>
+                {initialValues?.project_flock?.production_standart?.week || '-'}
+              </p>
+            </div>
+            <div>
+              <span className='text-sm text-gray-600'>
+                Hen Day Standard (%)
+              </span>
+              <p className='font-semibold'>
+                {initialValues?.project_flock?.production_standart
+                  ?.hen_day_std != null
+                  ? `${initialValues?.project_flock?.production_standart?.hen_day_std}%`
+                  : '-'}
+              </p>
+            </div>
+            <div>
+              <span className='text-sm text-gray-600'>
+                Hen House Standard (%)
+              </span>
+              <p className='font-semibold'>
+                {initialValues?.project_flock?.production_standart
+                  ?.hen_house_std != null
+                  ? `${initialValues?.project_flock?.production_standart?.hen_house_std}%`
+                  : '-'}
+              </p>
+            </div>
+            <div>
+              <span className='text-sm text-gray-600'>
+                Feed Intake Standard (KG)
+              </span>
+              <p className='font-semibold'>
+                {initialValues?.project_flock?.production_standart
+                  ?.feed_intake_std != null
+                  ? formatNumber(
+                      initialValues?.project_flock?.production_standart
+                        ?.feed_intake_std || 0
+                    )
+                  : '-'}
+              </p>
+            </div>
+            <div>
+              <span className='text-sm text-gray-600'>Egg Mass Standard</span>
+              <p className='font-semibold'>
+                {initialValues?.project_flock?.production_standart
+                  ?.egg_mass_std != null
+                  ? formatNumber(
+                      initialValues?.project_flock?.production_standart
+                        ?.egg_mass_std || 0
+                    )
+                  : '-'}
+              </p>
+            </div>
+            <div>
+              <span className='text-sm text-gray-600'>
+                Egg Weight Standard (KG)
+              </span>
+              <p className='font-semibold'>
+                {initialValues?.project_flock?.production_standart
+                  ?.egg_weight_std != null
+                  ? formatNumber(
+                      initialValues?.project_flock?.production_standart
+                        ?.egg_weight_std || 0
+                    )
+                  : '-'}
+              </p>
+            </div>
+          </div>
+        </div>
+      </Modal>
     </>
   );
 };