refactor(FE): Restrict edit and delete actions based on recording status

src/components/pages/production/recording/RecordingTable.tsx

@@ -104,8 +104,19 @@ const RowOptionsMenu = ({
     return recording.approval?.action === 'REJECTED';
   };
 
+  const isRecordingEditable = (recording: Recording) => {
+    if (
+      recording.executed_at &&
+      recording.project_flock?.project_flock_category === 'GROWING'
+    ) {
+      return false;
+    }
+    return true;
+  };
+
   const isApproved = isRecordingApproved(props.row.original);
   const isRejected = isRecordingRejected(props.row.original);
+  const isEditable = isRecordingEditable(props.row.original);
 
   return (
     <div className='relative'>
@@ -138,18 +149,20 @@ const RowOptionsMenu = ({
               View Details
             </Button>
           </RequirePermission>
-          <RequirePermission permissions='lti.production.recording.update'>
-            <Button
-              href={`/production/recording/detail/edit/?recordingId=${props.row.original.id}`}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full'
-              onClick={closePopover}
-            >
-              <Icon icon='mdi:pencil-outline' width={20} height={20} />
-              Edit
-            </Button>
-          </RequirePermission>
+          {isEditable && (
+            <RequirePermission permissions='lti.production.recording.update'>
+              <Button
+                href={`/production/recording/detail/edit/?recordingId=${props.row.original.id}`}
+                variant='ghost'
+                color='none'
+                className='p-3 justify-start text-sm font-semibold w-full'
+                onClick={closePopover}
+              >
+                <Icon icon='mdi:pencil-outline' width={20} height={20} />
+                Edit
+              </Button>
+            </RequirePermission>
+          )}
           {!isApproved && !isRejected && (
             <RequirePermission permissions='lti.production.recording.approve'>
               <Button
@@ -182,20 +195,22 @@ const RowOptionsMenu = ({
               </Button>
             </RequirePermission>
           )}
-          <RequirePermission permissions='lti.production.recording.delete'>
-            <Button
-              onClick={() => {
-                deleteClickHandler();
-                closePopover();
-              }}
-              variant='ghost'
-              color='error'
-              className='p-3 justify-start text-sm font-semibold w-full focus-visible:text-error-content hover:text-error-content'
-            >
-              <Icon icon='mdi:delete-outline' width={20} height={20} />
-              Delete
-            </Button>
-          </RequirePermission>
+          {isEditable && (
+            <RequirePermission permissions='lti.production.recording.delete'>
+              <Button
+                onClick={() => {
+                  deleteClickHandler();
+                  closePopover();
+                }}
+                variant='ghost'
+                color='error'
+                className='p-3 justify-start text-sm font-semibold w-full focus-visible:text-error-content hover:text-error-content'
+              >
+                <Icon icon='mdi:delete-outline' width={20} height={20} />
+                Delete
+              </Button>
+            </RequirePermission>
+          )}
         </div>
       </PopoverContent>
     </div>

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

@@ -49,6 +49,7 @@ export type BaseRecording = {
   project_flock: ProjectFlock;
   record_datetime: string;
   day: number;
+  executed_at: string;
 } & ProductionMetrics;
 
 export type RecordingDepletion = {