From 3dd36b8248dc3b8200598e34dd0ffdc7f9a5c3bf Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 11 Dec 2025 11:05:20 +0700
Subject: [PATCH] fix(FE): Parse recordingId and hide actions for rejected

---
 .../production/recording/detail/edit/page.tsx |  2 +-
 src/app/production/recording/detail/page.tsx  |  2 +-
 .../production/recording/RecordingTable.tsx   |  9 ++-
 .../recording/form/RecordingForm.tsx          | 78 +++++++++++--------
 4 files changed, 56 insertions(+), 35 deletions(-)

diff --git a/src/app/production/recording/detail/edit/page.tsx b/src/app/production/recording/detail/edit/page.tsx
index de53a354..ad6c6a9a 100644
--- a/src/app/production/recording/detail/edit/page.tsx
+++ b/src/app/production/recording/detail/edit/page.tsx
@@ -14,7 +14,7 @@ const RecordingEdit = () => {
 
   const { data: recording, isLoading: isLoadingRecording } = useSWR(
     recordingId,
-    (id: number) => RecordingApi.getSingle(id) // Gunakan RecordingApi
+    (id: string) => RecordingApi.getSingle(parseInt(id))
   );
 
   if (!recordingId) {
diff --git a/src/app/production/recording/detail/page.tsx b/src/app/production/recording/detail/page.tsx
index 77b82a68..194365a3 100644
--- a/src/app/production/recording/detail/page.tsx
+++ b/src/app/production/recording/detail/page.tsx
@@ -14,7 +14,7 @@ const RecordingDetail = () => {
 
   const { data: recording, isLoading: isLoadingRecording } = useSWR(
     recordingId,
-    (id: number) => RecordingApi.getSingle(id)
+    (id: string) => RecordingApi.getSingle(parseInt(id))
   );
 
   if (!recordingId) {
diff --git a/src/components/pages/production/recording/RecordingTable.tsx b/src/components/pages/production/recording/RecordingTable.tsx
index 965e6c9e..65cead2a 100644
--- a/src/components/pages/production/recording/RecordingTable.tsx
+++ b/src/components/pages/production/recording/RecordingTable.tsx
@@ -50,7 +50,12 @@ const RowOptionsMenu = ({
     );
   };
 
+  const isRecordingRejected = (recording: Recording) => {
+    return recording.approval?.action === 'REJECTED';
+  };
+
   const isApproved = isRecordingApproved(props.row.original);
+  const isRejected = isRecordingRejected(props.row.original);
 
   return (
     <RowOptionsMenuWrapper type={type}>
@@ -72,7 +77,7 @@ const RowOptionsMenu = ({
         <Icon icon='mdi:pencil-outline' width={16} height={16} />
         Edit
       </Button>
-      {!isApproved && (
+      {!isApproved && !isRejected && (
         <Button
           onClick={approveClickHandler}
           variant='ghost'
@@ -83,7 +88,7 @@ const RowOptionsMenu = ({
           Approve
         </Button>
       )}
-      {!isApproved && (
+      {!isApproved && !isRejected && (
         <Button
           onClick={rejectClickHandler}
           variant='ghost'
diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index ca2ae8ba..4dca38dc 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -112,6 +112,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     );
   }, []);
 
+  const isRecordingRejected = useCallback((recording?: Recording) => {
+    return recording?.approval?.action === 'REJECTED';
+  }, []);
+
   // ===== PAYLOAD CREATION HELPERS =====
   const createGrowingPayload = useCallback(
     (values: RecordingGrowingFormValues) => {
@@ -1483,37 +1487,48 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
               Kembali
             </Button>
 
-            {type === 'detail' && !isRecordingApproved(initialValues) && (
-              <div className='flex flex-row gap-2'>
-                <Button
-                  variant='outline'
-                  color='success'
-                  onClick={() => {
-                    setApprovalNotes('');
-                    approveModal.openModal();
-                  }}
-                  isLoading={isApproveLoading}
-                  className='w-full sm:w-fit'
-                >
-                  <Icon icon='material-symbols:check' width={24} height={24} />
-                  Approve
-                </Button>
+            {type === 'detail' &&
+              initialValues?.approval &&
+              !isRecordingApproved(initialValues) &&
+              !isRecordingRejected(initialValues) && (
+                <div className='flex flex-row gap-2'>
+                  <Button
+                    variant='outline'
+                    color='success'
+                    onClick={() => {
+                      setApprovalNotes('');
+                      approveModal.openModal();
+                    }}
+                    isLoading={isApproveLoading}
+                    className='w-full sm:w-fit'
+                  >
+                    <Icon
+                      icon='material-symbols:check'
+                      width={24}
+                      height={24}
+                    />
+                    Approve
+                  </Button>
 
-                <Button
-                  variant='outline'
-                  color='error'
-                  onClick={() => {
-                    setApprovalNotes('');
-                    rejectModal.openModal();
-                  }}
-                  isLoading={isRejectLoading}
-                  className='w-full sm:w-fit'
-                >
-                  <Icon icon='material-symbols:close' width={24} height={24} />
-                  Reject
-                </Button>
-              </div>
-            )}
+                  <Button
+                    variant='outline'
+                    color='error'
+                    onClick={() => {
+                      setApprovalNotes('');
+                      rejectModal.openModal();
+                    }}
+                    isLoading={isRejectLoading}
+                    className='w-full sm:w-fit'
+                  >
+                    <Icon
+                      icon='material-symbols:close'
+                      width={24}
+                      height={24}
+                    />
+                    Reject
+                  </Button>
+                </div>
+              )}
           </div>
 
           <h1 className='text-2xl font-bold text-center'>
@@ -2803,7 +2818,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
           {/* Approve Confirmation Modal */}
           {(type as 'add' | 'edit' | 'detail') === 'detail' &&
-            !isRecordingApproved(initialValues) && (
+            !isRecordingApproved(initialValues) &&
+            !isRecordingRejected(initialValues) && (
               <ConfirmationModalWithNotes
                 ref={approveModal.ref}
                 type='success'