refactor(FE): refactor chickin views and adjust approval logic in project flocks

src/components/FloatingActionsButton.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import Button from '@/components/Button';
 import Tooltip from '@/components/Tooltip';
 import { cn } from '@/lib/helper';
 import { Icon } from '@iconify/react';
@@ -11,12 +12,14 @@ type FloatingActionsButtonProps = {
     label?: string;
     onClick?: () => void;
     hidden?: boolean;
+    disabled?: boolean;
   }[];
   approvals: {
     action: 'APPROVED' | 'REJECTED';
     icon: string;
     label?: string;
     onClick?: () => void;
+    disabled?: boolean;
   }[];
   selectedRowIds: number[];
   onClose: () => void;
@@ -69,10 +72,12 @@ const FloatingActionsButton = ({
                 .filter((action) => !action.hidden)
                 .map((action, index) => {
                   return (
-                    <button
+                    <Button
                       key={index}
                       onClick={action.onClick}
-                      className='text-white hover:text-gray-400 tooltip tooltip-bottom'
+                      className='text-white hover:text-gray-400 tooltip tooltip-bottom p-0'
+                      variant='link'
+                      disabled={action.disabled}
                     >
                       <Tooltip content={action.label || action.action}>
                         <Icon
@@ -82,21 +87,22 @@ const FloatingActionsButton = ({
                           className={`text-${getActionColor(action.action)} font-thin`}
                         />
                       </Tooltip>
-                    </button>
+                    </Button>
                   );
                 })}
 
               <div className='border-[0.5px] border-white/30 h-full'></div>
 
               {/* Tombol Close */}
-              <button
+              <Button
                 onClick={onClose}
-                className='text-white hover:text-gray-400'
+                className='text-white hover:text-gray-400 p-0'
+                variant='link'
               >
                 <Tooltip content='Close'>
                   <Icon icon='mdi:close' width={20} height={20} />
                 </Tooltip>
-              </button>
+              </Button>
             </div>
           </div>
         </div>
@@ -104,14 +110,18 @@ const FloatingActionsButton = ({
         {/* === BARIS BAWAH: Approval Buttons (Approve/Reject) === */}
         <div className={`grid grid-cols-${approvals.length} gap-3`}>
           {approvals.map((approval, index) => (
-            <button
+            <Button
               key={index}
               onClick={approval.onClick}
               className={cn(
                 'btn btn-lg w-full',
-                'bg-white/20 hover:bg-white/40 border-white/30 hover:border-white/50',
-                'text-white/50 hover:text-white/100 font-semibold flex items-center gap-2 rounded-lg transition-all duration-200'
+                'bg-white/20 border-white/30',
+                'text-white/50 font-semibold flex items-center gap-2 rounded-lg transition-all duration-200',
+                approval.disabled
+                  ? 'cursor-not-allowed'
+                  : 'hover:text-white/100 hover:bg-white/40 hover:border-white/50'
               )}
+              disabled={approval.disabled}
             >
               <Icon
                 icon={approval.icon}
@@ -120,7 +130,7 @@ const FloatingActionsButton = ({
                 className={`text-${getApprovalColor(approval.action)}`}
               />
               {approval.label || approval.action}
-            </button>
+            </Button>
           ))}
         </div>
       </div>