feat(FE): create floation actions button

src/components/pages/production/project-flock/ProjectFlockTable.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import Button from '@/components/Button';
+import FloatingActionsButton from '@/components/FloatingActionsButton';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
@@ -20,6 +21,7 @@ import { Kandang } from '@/types/api/master-data/kandang';
 import { ProjectFlock } from '@/types/api/production/project-flock';
 import { Icon } from '@iconify/react';
 import { CellContext, SortingState } from '@tanstack/react-table';
+import { useRouter } from 'next/navigation';
 import { ChangeEventHandler, useEffect, useState } from 'react';
 import toast from 'react-hot-toast';
 import useSWR from 'swr';
@@ -119,6 +121,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
       periodFilter: 'period',
     },
   });
+  const router = useRouter();
 
   // State
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
@@ -262,7 +265,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
 
   return (
     <>
-      <div className='w-full p-0 sm:p-4'>
+      <div className='min-h-screen w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col justify-between items-end gap-2'>
             <div className='flex flex-col sm:flex-row gap-3 w-full'>
@@ -577,6 +580,57 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
         </div>
       </div>
 
+      <FloatingActionsButton
+        actions={[
+          {
+            action: 'DETAIL',
+            icon: 'mdi:eye-outline',
+            label: 'Lihat Detail',
+            hidden: selectedRowIds.length !== 1,
+            onClick() {
+              router.push(
+                `/production/project-flock/detail?projectFlockId=${selectedRowIds[0]}`
+              );
+              setRowSelection({});
+            },
+          },
+          {
+            action: 'DELETE',
+            icon: 'material-symbols:delete-outline-rounded',
+            label: 'Hapus Massal',
+            onClick: () => {
+              toast.error(`Konfirmasi hapus ${selectedRowIds.length} data.`);
+            },
+          },
+        ]}
+        approvals={[
+          {
+            icon: 'material-symbols:check',
+            label: 'Approve',
+            action: 'APPROVED',
+            onClick: () => {
+              setApprovalAction('APPROVED');
+              confirmModal.openModal();
+              setRowSelection({});
+            },
+          },
+          {
+            icon: 'mdi:times',
+            label: 'Reject',
+            action: 'REJECTED',
+            onClick: () => {
+              setApprovalAction('REJECTED');
+              confirmModal.openModal();
+              setRowSelection({});
+            },
+          },
+        ]}
+        selectedRowIds={selectedRowIds}
+        onClose={() => {
+          setRowSelection({});
+        }}
+      />
+
       <ConfirmationModal
         ref={deleteModal.ref}
         type='error'